分页插件jquery.pagination.js使用教程

前言

分页组件几乎每个项目中都会用到,今天说到的这款就很不错,但是感觉网上的教程说的都不太清楚,项目中用了几次,也搞清楚了许多,下面给出一个详细的解答

使用教程

一、下载

点击下载 V2.2,下载包内已经包含了Jquery-2.1.1.min.js

二、引用

<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.pagination.js"></script>

三、DOM准备

dom要注意大小写哦,网上有些是大写,我class和id命名习惯小写

<!-- 分页 -->
<div id="pagination">

</div>

四、js代码之ajax

这里我们用一个ajax来举例,比如我们要实现一个这样的例子

qq%e6%88%aa%e5%9b%be20160910163156

首先定义一个全局变量PAGESIZE(每页多少条数据),这个变量每个要分页的地方都要有,因此最好存放在公共js里:PAGESIZE = 12,然后写ajax,我们首先定义一个公共ajax函数getIndexList(),然后一进入页面调用,查询和分页跳转时都是调用这个函数,下面给出ajax request和reponse范例

//request
{
    "opr":"list",
    "pageIndex": pageIndex,
    "pageSize": PAGESIZE,
    "data"  : data
}
//reponse
{
    "status":0,      //状态码,判断成功还是失败,也可以用succes之类
    "total":12,       //总条数,必须,因为插件要根据这个值计算总页数
    "data" :{[
        "username":"a",
        "age":19,
        "height":"178"
    ]}
}

下面就是声明公共ajax方法了

//公共ajax请求数据
var page_index = 0;     //初始化分页(默认0就是第一页)
function getIndexList(index){
    var pageIndex = index;      //接收传进来的页码参数
    //查询条件
    var userName = $('#search').val();
    var data = {
        "userName":userName
    };
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: 'application/json; charset=UTF-8',
        url:'...',  //这里填ajax的url
        data:JSON.stringify({
            "opr"  : "list",        //一个操作码,个人需要
            "pageIndex": pageIndex, //往后台传一个页码【重点】
            "pageSize": PAGESIZE,   //之前定义的全局变量,每页条数【重点】
            "data"  : data          //这个是查询条件,没有查询的话可以不要
        }),
        success: function (reponse) {
            //我要做的是把取出来的数据放表格里然后append到tbody内,因此每次分页跳转都要清空上一页数据,否则就会一直append在后面
            $('#tbody-index').empty();   //tbody-index就是数据数据容器,我这个案例里是一个table内的tbody
            var res = reponse.data; 
            //如果总条目数小于已设置的每页条数的话隐藏分页组件,因为数据都不够一页还分页干嘛
            if(reponse.total < PAGESIZE){
                $('#pagination').hide();        //注意组件大小写,与dom内一样
            } else{
                $('#pagination').show();
            }
            //下面就是取到数据的操作了,视具体情况而定
            //成功的话做点什么
            if(reponse.status == 0){
                for(var i=0;i<res.length;i++){
                    $('#tbody-index').append("<tr><td class='common_name'>"+res[i].common_name+"</td><td class='disc'>"+res[i].disc+"</td><td class='real_address'>"+res[i].real_address+"</td><td class='virtual_address'>"+res[i].virtual_address+"</td><td class='bytes'>"+res[i].bytes_sent+" / "+res[i].bytes_received+"</td><td class='connected_sine'>"+res[i].connected_sine+"</td></tr>");
                }
            //会话超时做点什么
            } else if(reponse.need_login == 1){  
                toastr.error("会话超时,请重新登录", '提示');
                $.cookie('username', null);
                toLoginPage(); 
            } else{
                toastr.error(reponse.msg, '提示');
            }
            //【重要】初始化组件,传进来一个total和pageindex,计算总页数和当前页,已便修改dom(例如会自动设置当前页高亮等)
            initPagination(reponse.total,pageIndex);
        },
        //失败的话做点什么
        error: function () {
            toastr.error('连接超时,请重试','提示');
        }
    });
};

至此,公共的ajax已经写完了,你已经成功了一大半!接下来继续

各种调用

// 定义分页初始化方法【这个方法ajax里调用了,很重要】
function initPagination(count,pageIndex) {
    $("#pagination").pagination(count, {
        num_display_entries: 4,     //前页数
        num_edge_entries: 2,        //尾页数
        items_per_page: PAGESIZE,   //每页条数【不想用全局变量的话在当前页设置一个PAGESIZE变量或者直接写死,比如20】
        current_page:pageIndex,     //当前页码
        prev_text: "上一页",        //上一页text
        next_text: "下一页",        //下一页text
        prev_show_always:false,     //是否一直显示上一页下一页
        next_show_always:false, 
        callback:pageSelectCallback //回调函数【重要,下面会声明这个函数】
    });
}
//分页回调
function pageSelectCallback(page_index,jq){
    getIndexList(page_index);   //公共ajax方法,参数内的jq不用管,page_index就是最开始声明的那个,在这里会用到!
}
// 已进入页面时加载数据
$(function(){
    getIndexList(page_index);
});

写在后面

按照上面步骤,应该就能实现完整的分页功能,需要注意的我都注释在了后面,有问题请评论或加群,群号在footer内

共有 0 条评论

Top