一款基于jQuery的分页插件

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

1、效果示例

2、代码样式

/*
* 基于jquery 分页插件
* by mao2080@sina.com
*/
$(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