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

标签：技术   新闻联播   image   -o   log   添加   upd   配置参数   als   

首先需要引入jQuery

再次需要引入

同时也要引入

引入之后，分页基本样子

下面看分页配置参数

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 +=‘
‘
            html +=‘

‘+list.nickname+‘
‘+list.member_id+‘‘+list.update_time+‘
‘
            html +=‘

谁能告诉我福彩怎么查询开奖结果？谢谢
‘
            html +=‘

热门回答
cctv-2财经频道21：20《经济新闻联播》。cctv-5频道21:50-22:00广播平台：中央人民广播电台中国之声播出时间21:00。网络直播搜狐网、腾讯网、中国竞彩网、中国足彩在线、中国体彩网、播出时间：
‘
            html +=‘

 关注问题 添加评论添加答案
点赞‘+list.vote+‘收藏‘+list.reward+‘ 分享‘+list.id+‘举报‘+list.hits+‘
‘
            html +=‘
‘
            $(".text").append(html);（将数据添加在class名为text的容器上面）
        }

    }

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


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

 

jQuery 分页插件（jQuery.pagination.js）ajax 实现分页
标签：技术   新闻联播   image   -o   log   添加   upd   配置参数   als   
原文地址：http://www.cnblogs.com/ycc-521/p/7196537.html