一款基于jQuery的分页插件

Posted 2020-08-13

特别提示：本人博客部分有参考网络其他博客，但均是本人亲手编写过并验证通过。如发现博客有错误，请及时提出以免误导其他人，谢谢！欢迎转载，但记得标明文章出处：http://www.cnblogs.com/mao2080/

1、效果示例

2、代码样式

/*
* 基于jquery 分页插件
* by [email protected]
*/
$(function (){
    window.pageUtil = {
        /**
         * 构建分页
         * @param {Object} divId 要绑定的容器
         * @param {Object} data 查询数据
         * @param {Object} args 参数信息
         */
        page : function(divId, data, args){
            var pager = $(divId);
            var pageInfo = (!data || !data.data)?{"currPage":0,"pageSize":10,"pageTotal":0,"recordTotal":0,"prevPage":0,"nextPage":0,"firstPage":0,"lastPage":0}:data.data;
            pageInfo.pageTotal = this.getPageTotal(pageInfo);
            var html = "<table><tbody><tr>";
            if(!args.hidePageSelect){
                html+=‘<td>显示行数</td>‘;
                html+=‘<td>‘;
                if(!args.pageSelect){
                    html+=this.getPageSelect([10, 20, 50],pageInfo.pageSize);
                }else{
                    html+=this.getPageSelect(args.pageSelect, pageInfo.pageSize);
                }
                html+=‘</td>‘;
            }
            html+=‘<td>共‘+pageInfo.pageTotal+‘页，</td>‘;
            html+=‘<td>转到</td><td><input type="text" value="‘+pageInfo.currPage+‘" size="5" class="page-turn"></td>‘;
            html+=‘<td>页 第‘+this.getRowRange(pageInfo)+‘项</td>‘;
            html+=‘<td>，共‘+pageInfo.recordTotal+‘项</td>‘;
            html+=‘<td>‘;
            if(pageInfo.currPage == 1){
                html+=‘<input type="button" value="Prev" class="page-prev page-button-disable">‘;
            }else{
                html+=‘<input type="button" value="Prev" class="page-prev">‘;
            }
            if(pageInfo.currPage == pageInfo.pageTotal){
                html+=‘<input type="button" value="Next" class="page-next page-button-disable">‘;
            }else{
                html+=‘<input type="button" value="Next" class="page-next">‘;
            }
            html+=‘</td>‘;
            html+=‘</tr></tbody></table>‘;
            pager.html(html);
            pager.find(".page-select").off("change").bind("change", function(){
                if(args.query){
                    args.query(1, $(this).val());
                }
            });
            pager.find(".page-turn").off("keypress").bind("keypress", function(event){
                if(event.keyCode == "13" && args.query){
                    var pages = $(this).val();
                    if(/^\+?[1-9][0-9]*$/.test(pages) && (pages*1> 0 && pages*1 <= pageInfo.pageTotal)){
                        args.query(pages, pageInfo.pageSize);
                    }else{
                        alert("请输入1~"+pageInfo.pageTotal+"的数字.");
                    }
                }
            });
            pager.find(".page-prev").off("click").bind("click", function(){
                if(args.query && !$(this).hasClass("page-button-disable")){
                    args.query(pageInfo.currPage-1, pageInfo.pageSize);
                }
            });
            pager.find(".page-next").off("click").bind("click", function(){
                if(args.query && !$(this).hasClass("page-button-disable")){
                    args.query(pageInfo.currPage+1, pageInfo.pageSize);
                }
            });
        },
        /**
         * 获取总页数
         * @param {Object} data
         */
        getPageTotal : function(data){
            if(data.recordTotal == 0){
                return 0;
            }
            if(data.recordTotal%data.pageSize == 0){
                return data.recordTotal/data.pageSize;
            }else{
                return parseInt(data.recordTotal/data.pageSize)+1;
            }
        },
        /**
         * 获取当前数据行数范围
         * @param {Object} data
         */
        getRowRange : function(data){
            if(data.recordTotal == 0){
                return "0-0";
            }
            if(data.currPage < data.pageTotal){
                return ((data.currPage-1)*data.pageSize+1)+"-"+(data.currPage)*data.pageSize;
            }else{
                return ((data.currPage-1)*data.pageSize+1)+"-"+(data.recordTotal);
            }
        },
        /**
         * 构建分页下拉框
         * @param {Object} pageSelect 分页条数
         * @param {Object} pageSize 一页大小
         */
        getPageSelect : function(pageSelect, pageSize){
            var pageSel = ‘<select class="page-select">‘;
            for(var i in pageSelect){
                if(pageSelect[i] == pageSize){
                    pageSel+="<option selected=‘selected‘ value="+pageSelect[i]+">"+pageSelect[i]+"</option>";
                }else{
                    pageSel+="<option value="+pageSelect[i]+">"+pageSelect[i]+"</option>";
                }
            }
            return pageSel+"</select>";
        }
    };
});

 

3、资料下载

page-demo.rar