标签：技术 新闻联播 image -o log 添加 upd 配置参数 als
首先需要引入jQuery
再次需要引入
<script src="jquery/jquery.pagination.js"></script>
同时也要引入
<link rel="stylesheet" href="css/pagination.css">
引入之后，分页基本样子
下面看分页配置参数
var defaults = {
totalData: 0, //数据总条数
showData: 0, //每页显示的条数
pageCount: 9, //总页数,默认为9
current: 1, //当前第几页
prevCls: ‘prev‘, //上一页class
nextCls: ‘next‘, //下一页class
prevContent: ‘<‘, //上一页内容
nextContent: ‘>‘, //下一页内容
activeCls: ‘active‘, //当前页选中状态
coping: false, //首页和尾页
isHide: false, //当前页数为0页或者1页时不显示分页
homePage: ‘‘, //首页节点内容
endPage: ‘‘, //尾页节点内容
keepShowPN: false, //是否一直显示上一页下一页
count: 3, //当前页前后分页个数
jump: false, //跳转到指定页数
jumpIptCls: ‘jump-ipt‘, //文本框内容
jumpBtnCls: ‘jump-btn‘, //跳转按钮
jumpBtn: ‘跳转‘, //跳转按钮文本
callback: function(){} //回调
};
前台页面
备注：text是放内容的，也就是存放数据的
M-box1是实现分页
函数声明，插件封装好的函数
var totaldata = 20;
var size = 2;
$(function(){
$(‘.M-box1‘).pagination({
totalData: totaldata,（总条数）
showData:size,（每页显示几条）
coping:true,（显示首页和尾页）
jumpIptCls: ‘jump-ipt‘, //文本框内容
jumpBtnCls: ‘jump-btn‘, //跳转按钮
jumpBtn: ‘跳转‘,
callback:function (val) {
var pag= val.getCurrent();
console.log(pag);（回调函数实现点击每一页可以获取数据）
ajax_asyc(‘get‘,‘http://www.dcw.com/index_page‘,pag)（请求方式、后台接口、当前第几页）
}
});
})
下面开始请求数据
// 请求数据（函数声明）（形参）
function ajax_asyc(method,url,pagesize) {
console.log(pagesize);
$.ajax({
type:method,
url:url,
data:{"page": pagesize},
dataType:‘json‘,
beforeSend:function () {
},
success:function (response) {
console.log(response);
if(response.status==1){
load_page_content(response.data)
}else {
}
},
error:function (xhr) {
},
complete:function (xhr) {
}
}) ;
请求到数据将数据添加在页面上（刚开始我是先写的静态页面，所以我请求数据，现在就把前台的HTML+请求的数据，最终显示在页面上）
function load_page_content(data) {
// 设置父容器为空
$(".text").empty();（一定要保证父容器为空）
for(index in data){
var html=‘‘;
var list=data[index];
html +=‘<div id="mo-one"></div>‘
html +=‘<div class="panel-top clearfix"><p class="left"><img src="img/wen.png" class="mark"><img id="picture" src="‘+list.avatar+‘"><span id="username">‘+list.nickname+‘</span></p><p class="right" style="margin-right:30px;"><img src="img/zhong.png" ><span style="width:50px;text-align: center">‘+list.member_id+‘</span><img src="img/eye.png" ><span style="width:80px;text-align: center">‘+list.update_time+‘</span></p></div>‘
html +=‘<div class="panel-mid"><p>谁能告诉我福彩怎么查询开奖结果？谢谢</p><div>‘
html +=‘<div class="panel-bottom"><p><img src="img/huida.png" ><span>热门回答</span></p><p>cctv-2财经频道21：20《经济新闻联播》。cctv-5频道21:50-22:00广播平台：中央人民广播电台中国之声播出时间21:00。网络直播搜狐网、腾讯网、中国竞彩网、中国足彩在线、中国体彩网、播出时间：</p></div>‘
html +=‘<div class="panel-bottom-two clearfix"><div class="left"><p><span class="icon-关注" class="search" style="font-size:24px;"></span> <span>关注问题</span><span class="icon-个人页-添加-加关注" class="search" style="font-size:24px;"></span> <span>添加评论</span><span class="icon-个人页-添加-加关注" class="search" style="font-size:24px;"></span><span>添加答案</span></p></div><div class="right"><p><span class="icon-点赞" class="search" style="font-size:24px;"></span><span>点赞</span><span>‘+list.vote+‘</span><span class="icon-收藏" class="search" style="font-size:24px;"></span><span>收藏</span><span>‘+list.reward+‘</span><span class="icon-分享" class="search" style="font-size:24px;"></span> <span>分享</span><span>‘+list.id+‘</span><img src="img/report%20(2).png" style="width:24px;height:24px;"><span>举报</span><span>‘+list.hits+‘</span></p></div></div>‘
html +=‘<div id="mo"></div>‘
$(".text").append(html);（将数据添加在class名为text的容器上面）
}
}
下面再来说个问题 ，当页面打开时，我没有第一页的数据，没有默认数据，所以这时，就要请求第一页的数据
备注：这代表已经将第一条数据请求到，这属于函数调用，通过传参获取后台的数据
jQuery 分页插件（jQuery.pagination.js）ajax 实现分页
标签：技术 新闻联播 image -o log 添加 upd 配置参数 als
原文地址：http://www.cnblogs.com/ycc-521/p/7196537.html
