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

首先需要引入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的容器上面）
        }


    }


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

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

转载于:https://www.cnblogs.com/ycc-521/p/7196537.html