jQuery 自定义插件 (分页控件)

1、引入jqpage.js 

2、html代码

<div id="page">
</div>

3、js 调用

 $(function () {
            $.fn.jqpage({
                id: 'page',  700 ,onSelectPage: function (pageNum, pageSize) {
                    console.log(pageNum + '------' + pageSize);
                    // ajax 异步请求数据...
                    var total = 100;
                    return total;
                }
            });
        });

id：占位div的id
width：宽度
onSelectPage： 页码改变的回调函数
参数：pageNum 新页码
         pageSize 每页显示条数
返回值 : total 总记录条数

4、效果图

 

jqpage.js 源码

$(function ($) {
    $.fn.jqpage = function (options) {

        // 默认参数
        var settings = $.extend({}, { id: '' }, options);
        var page = $('#' + settings.id);

        var page_html =
' <table style="border:1px solid black;font-size:13px;font-weight:bold;color:black;" class="tabPage"         ' +
'                data-current="1" data-total="10" data-pageCount="100" data-pageSize="10">     ' +
'               <tbody><tr>                                                                    ' +
'               <td> <span  class="homePage" >首页</span> |</td>            ' +
'               <td> <span  class="prevPage" >上一页</span> |</td>          ' +
'               <td> <span  class="nextPage" >下一页</span> |</td>          ' +
'               <td> <span  class="lastPage" >尾页</span> |</td>            ' +
'               <td> <select class="jrd_pageSizeChage">                                        ' +
'                       <option value="10">10</option>                                         ' +
'                       <option value="20">20</option>                                         ' +
'                       <option value="30">30</option>                                         ' +
'                   </select> </td>                                                            ' +
'                <td> <span class="goPage">前往</span><input type="text" class="txt_goPage" style="25px;"/>页 |</td>          ' +
'                <td>当前<label class="jrd_pageNum"></label>/<label class="jrd_pageCount"></label>页</td>  ' +
'               <td>总共<label class="jrd_total"></label>条记录</td>   ' +
'</tr></tbody></table> ';

        function init() {
            page.html(page_html);

            if (settings.width) {
                page.css('width', settings.width);
                page.find('.tabPage').css('width', settings.width);
            }
            // 添加其他参数时在这里进行初始化 
            // style, ...
            

            // 注册4个事件
            page.find('.homePage').click(function () { jrd_PageChange(0) });
            page.find('.prevPage').click(function () { jrd_PageChange(1) });
            page.find('.nextPage').click(function () { jrd_PageChange(2) });
            page.find('.lastPage').click(function () { jrd_PageChange(3) });
            page.find('.goPage').click(function () { jrd_PageChange(4) });
            //page.find('.txt_goPage').click(function () { jrd_PageChange(4) }).data('pid', settings.id);
            page.find('.jrd_pageSizeChage').change(jrd_pageSizeChage).data('pid', settings.id).change();

        }

        // 页码发生事件
        function jrd_PageChange(t) {
            var pageNum = page.data('pageNum');
            //var total = page.data('total');
            var pageCount = page.data('pageCount');
            var pageSize = page.data('pageSize');

            if (t == 0) { // 首页
                pageNum = 1;
                settings.onSelectPage(pageNum, pageSize);
            } else if (t == 1) { // 上一页
                pageNum = pageNum - 1;
                if (pageNum < 1) pageNum = 1;
                settings.onSelectPage(pageNum, pageSize);
            } else if (t == 2) { // 下一页
                pageNum = pageNum + 1;
                if (pageNum > pageCount) pageNum = pageCount;
                settings.onSelectPage(pageNum, pageSize);
            } else if (t == 3) { // 尾页
                pageNum = pageCount;
                settings.onSelectPage(pageNum, pageSize);
            } else if (t == 4) {
                //pageNum 输入的值
                pageNum = parseInt(page.find('.txt_goPage').val());
                if (isNaN(pageNum) || pageNum < 1) pageNum = 1;
                if (pageNum > pageCount) pageNum = pageCount;
                settings.onSelectPage(pageNum, pageSize);
            }

            page.data('pageNum', pageNum); // 修改为当前页
            page.find('.jrd_pageNum').text(pageNum);
            page.find('.txt_goPage').val(pageNum);
        }
        // 显示数量事件
        function jrd_pageSizeChage() {
            var pageNum = 1;
            var pageSize = parseInt($(this).val())
            var totalCount = settings.onSelectPage(pageNum, pageSize); // 返回总记录数
            var pageCount = Math.ceil(totalCount / pageSize);

            page.data('pageNum', pageNum).data('pageSize', pageSize)
                .data('totalCount', totalCount).data('pageCount', pageCount);
            page.find('.jrd_pageNum').text(pageNum);
            page.find('.jrd_pageCount').text(pageCount);
            page.find('.jrd_total').text(totalCount);
        }

        init();
    }
});