jQuery 分页插件（jQuery.pagination.js）ajax 实现分页

Posted 2020-09-28 小小小晨

首先需要引入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" alt="" 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" alt=""><span style="width:50px;text-align: center">\'+list.member_id+\'</span><img src="img/eye.png" alt=""><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" alt=""><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" alt="" style="width:24px;height:24px;"><span>举报</span><span>\'+list.hits+\'</span></p></div></div>\'

            html +=\'<div id="mo"></div>\'
            $(".text").append(html);（将数据添加在class名为text的容器上面）
        }


    }


下面再来说个问题 ，当页面打开时，我没有第一页的数据，没有默认数据，所以这时，就要请求第一页的数据

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