jQuery 分页插件(jQuery.pagination.js)ajax 实现分页

web开发作者:dayu日期:9天前点击:4

引入之后,分页基本样子

技术分享

下面看分页配置参数

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 class="mark"><imgsrc="‘+list.avatar+‘"><span><span>‘+list.member_id+‘</span><img src="img/eye.png" ><span>‘+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"></span> <span>关注问题</span><span class="icon-个人页-添加-加关注" class="search"></span> <span>添加评论</span><span class="icon-个人页-添加-加关注" class="search"></span><span>添加答案</span></p></div><div class="right"><p><span class="icon-点赞" class="search"></span><span>点赞</span><span>‘+list.vote+‘</span><span class="icon-收藏" class="search"></span><span>收藏</span><span>‘+list.reward+‘</span><span class="icon-分享" class="search"></span> <span>分享</span><span>‘+list.id+‘</span><img src="img/report%20(2).png" ><span>举报</span><span>‘+list.hits+‘</span></p></div></div>‘

html +=‘<divsrc="http://image.mamicode.com/info/201707/20180110235551294484.png" >

备注:这代表已经将第一条数据请求到,这属于函数调用,通过传参获取后台的数据




jQuery 分页插件(jQuery.pagination.js)ajax 实现分页

原文地址:http://www.cnblogs.com/ycc-521/p/7196537.html


下一篇       上一篇