jQuery 自定義插件 (分頁控件)

時間 2019-11-11

原文原文鏈接

一、引入jqpage.js css

二、html代碼html

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

三、js 調用ajax

 $(function () {
            $.fn.jqpage({
                id: 'page', width: 700 ,onSelectPage: function (pageNum, pageSize) {
                    console.log(pageNum + '------' + pageSize);
                    // ajax 異步請求數據...
                    var total = 100;
                    return total;
                }
            });
        });

id：佔位div的id
width：寬度
onSelectPage：頁碼改變的回調函數
參數：pageNum 新頁碼
pageSize 每頁顯示條數
返回值 : total 總記錄條數異步

四、效果圖ide

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="width: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();
    }
});