jqPaginator分页的使用方法

简要教程

 

jqPaginator.js是一款强大的jquery分页插件。该jquery分页插件简洁大方，可以高度自定义，适用于多种场景。

在页面中引入jquery和jqPaginator.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jqPaginator.js"></script>

使用一个<ul>元素来作为分页组件的容器。

<ul class="pagination" id="pagination1"></ul>

在页面DOM元素加载完毕之后，通过下面的方法来完成对该分页组件的初始化

$('#pagination1').jqPaginator({
    totalPages: 100,
    visiblePages: 10,
    currentPage: 1,
 
    first: '<li class="first"><a href="javascript:void(0);">First</a></li>',
    prev: '<li class="prev"><a href="javascript:void(0);">Previous</a></li>',
    next: '<li class="next"><a href="javascript:void(0);">Next</a></li>',
    last: '<li class="last"><a href="javascript:void(0);">Last</a></li>',
    page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
    onPageChange: function (num) {
        $('#text').html('当前第' + num + '页');
    }
});

配置参数

  下载插件

教程

 

 

jqPaginator.js是一款强大的jquery分页插件。该jquery分页插件简洁大方，可以高度自定义，适用于多种场景。

 使用方法

在页面中引入jquery和jqPaginator.js文件。

<script src="js/jquery.min.js"></script> <script src="js/jqPaginator.js"></script>

 HTML结构

使用一个<ul>元素来作为分页组件的容器。

<ul class="pagination" id="pagination1"></ul>

 初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来完成对该分页组件的初始化。

$('#pagination1').jqPaginator({     totalPages: 100,     visiblePages: 10,     currentPage: 1,       first: '<li class="first"><a href="javascript:void(0);">First</a></li>',     prev: '<li class="prev"><a href="javascript:void(0);">Previous</a></li>',     next: '<li class="next"><a href="javascript:void(0);">Next</a></li>',     last: '<li class="last"><a href="javascript:void(0);">Last</a></li>',     page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',     onPageChange: function (num) {         $('#text').html('当前第' + num + '页');     } });

 配置参数

jqPaginator分页插件的可用配置参数如下：

参数	默认值	描述
totalPages	0	设置分页的总页数
totalCounts	0	设置分页的总条目数
pageSize	0	设置每一页的条目数。 注意：要么设置totalPages，要么设置totalCounts + pageSize，否则报错；设置了totalCounts和pageSize后，会自动计算出totalPages。
currentPage	1	设置当前的页码
visiblePages	7	设置最多显示的页码数（例如有100页，当前第1页，则显示1 - 7页）
disableClass	'disabled'	设置首页，上一页，下一页，末页的“禁用状态”样式
activeClass	'active'	设置当前页码样式
first	bootstrap风格	设置“首页”的Html结构
prev	bootstrap风格	设置“上一页”的Html结构
next	bootstrap风格	设置“下一页”的Html结构
last	bootstrap风格	设置“末页”的Html结构
page	bootstrap风格	设置页码的Html结构,其中可以使用{{page}}代表当前页，{{totalPages}}代表总页数，{{totalCounts}}代表总条目数（例如：上面的“极简风格”的Demo，就是使用了{{占位符}}，并将visiblePages设为1实现的。） 注意：first、prev、next、last。page只要设置一个，其余未设置的会变为空。
wrapper	(无)	分页结构的Html包裹，例如：<div class="your class"></div>，一般不会用到
onPageChange	(无)	回调函数，当换页时触发（包括初始化第一页的时候），会传入两个参数： 1、“目标页"的页码，Number类型 2、触发类型，可能的值：“init”（初始化），“change”（点击分页）

 

扩展方法

jqPaginator分页插件在初始化之后，提供了两个扩展方法，方便初始化后对组件进行操作。

// 扩展方法一 $('#id').jqPaginator('option', options)

这个方法用于动态修改jqPaginator分页插件的配置信息。例如：

$('#id').jqPaginator('option', {     currentPage: 1  //将当前页修改为第一页 });

// 扩展方法二 $('#id').jqPaginator('destroy')

该方法用于销毁jqPaginator分页插件。

 

分割线

_______________________________________________________________________________________________

下面是我自己的实例

首先引入

<script type="text/javascript" src="../../js/jqPaginator.min.js"></script>

然后html 

<ul class="pagination" id="pagination0"></ul>

代码逻辑

首先是第一个方法  在你进入页面时调用 或者在你点击事件 或其他需要的位置调用。

//申请列表
            function getapplylist(dataparam) {
                var usertoken = $.cookie('usercookie')
                $.support.cors = true;
                new AjaxRequest({
                    type: "post",
                    url: baseUrl + "/financine/loan/queryLoan",
                    token: usertoken,
                    param: dataparam,
                    isShowLoader: true,
                    dataType: "json",
                    callBack: function (res) {
                        if (res.code == 0) {
                            if (res.data.count == 0) {
                                alert("数据为空")
                                renderTable(res.data.data)
                            } else {
                                //调用渲染表格页面
                                display_pages(res.data.count, 1, dataparam)
                            }

                        } else if (res.code == 1012) {
                            alert(res.msg)
                            $(window).attr('location', '../user/login.html');
                        }
                    }
                });
            }
            /* 
                分页组件展示 
                total_pages: 总页数；
                // visible_pages： 让组件展示5页；
                current_page: 当前页
            */
            function display_pages(total_pages, current_page, dataparam) {
                $.jqPaginator('#pagination0', {
                    totalCounts: total_pages,
                    pageSize: 10,  //每页显示的数据量
                    currentPage: current_page,
                    first: '<li class="first"><a href="javascript:;">首页</a></li>',
                    prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
                    next: '<li class="next"><a href="javascript:;">下一页</a></li>',
                    last: '<li class="last"><a href="javascript:;">末页</a></li>',
                    page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                    onPageChange: function (page, type) {
                        var newdatas = JSON.parse(dataparam)
                        newdatas.offset = page
                        var newdata = JSON.stringify(newdatas)
                        var usertoken = $.cookie('usercookie')
                        $.support.cors = true;
                        new AjaxRequest({
                            type: "post",
                            url: baseUrl + "/financine/loan/queryLoan",
                            token: usertoken,
                            param: newdata,
                            isShowLoader: true,
                            dataType: "json",
                            callBack: function (res) {
                                if (res.code == 0) {
                                    renderTable(res.data.data)
                                } else if (res.code == 1012) {
                                    alert(res.msg)
                                    $(window).attr('location',
                                        '../user/login.html');
                                }
                            }
                        });
                    }
                });
            }
            //渲染申请列表表格
            function renderTable(datas) {
                var tableHtml = "";
                for (var i in datas) {
                    tableHtml += "<tr>";
                    tableHtml += "<td>" + datas[i].scfLoanLoanNo + "</td>";
                    tableHtml += "<td>" + datas[i].scfLoanLoanDa + "</td>";
                    tableHtml += "<td>" + datas[i].scfLoanLoanCd + "</td>";

                    tableHtml += "<td>" + datas[i].scfCltNm + "</td>";
                    tableHtml += "<td>" + datas[i].scfLoanLoanAmt + "</td>";
                    tableHtml += "<td>" + datas[i].scfLoanLnRt + "</td>";
                    tableHtml += "<td>" + datas[i].scfLoanLterm + "</td>";
                    tableHtml += "<td>" + datas[i].scfLoanZifNm + "</td>";
                    tableHtml += "<td>" + datas[i].scfLoanUseAge + "</td>";
                    tableHtml += "<td>" + datas[i].transactionId + "</td>";
                    tableHtml += "</tr>";
                }
                $("#tboduy").html(tableHtml);
            }

这样就完成了分页组件  你只需要把几个需要的东西传入就行了  这是最重要的一句话。

注意：要么设置totalPages，要么设置totalCounts + pageSize，否则报错；设置了totalCounts和pageSize后，会自动计算出totalPages。

最后是效果图