【转】基于jquery的无刷新表格分页

效果图

css样式

<style>
    html,body{margin: 0;padding:0}
        a:focus {outline: none;}
            /* 通用表格显示 */
        table, th, td {font: 12px Arial,Helvetica,sans-serif,'宋体';margin: 0;padding: 0}
        table{border-spacing: 0;border-collapse: collapse;}
        .datatable {width: 100%;border-style: none;background-color: #fff;margin-bottom: 20px;text-align: left;}
        .datatable th, .datatable td { padding: 5px;line-height: 30px}
        .datatable thead th {background-color: #eee;margin: 0;text-align: left;border-top: 1px solid #cfcfcf;border-bottom: 1px solid #cfcfcf;font-weight: 500}
        .datatable tbody td {background-color: #fff;border-bottom: 1px solid #ddd;table-layout:fixed;word-break:break-all;font-weight: 400}
        .datatable tbody tr.evenrow td {background-color: #f4f4f4;}
        .datatable tfoot td {background-color: #fafafa;text-align: right;border-bottom: 1px solid #cfcfcf;}
            /*表格分页列表*/
        .datatable td.paging a {border: 1px solid #eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align:center;}
            /*表格分页当前页*/
        .datatable td.paging a.current {background: #eee; border: 1px solid #CFCFCF; color: #444; font-weight: bold;}
        .datatable td.paging a.current{border: 0;cursor: auto;background:none}
</style>

html结构

<table id="cs_table" class="datatable"></table>

javascript封装代码

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    /**
     * 抽象化表格
     */
    function abstractTable(){
        // ---------内容属性
        this.id = null;         // 每个表格都有唯一的一个id
        this.tableobj = null;  //表格对象
        this.rowNum = 0;       //行数
        this.colNum = 0;      //列数
        this.header = [];     //表头数据
        this.content = [];   //body数据
        // ----------提供外部使用获得表格内部数据
        this.currentClickRowID = 0;   //当前点击的行数据
        // --- 通过表头来获得这张表的列数
        this.getColNum = function(){
            this.colNum = this.header.length;
            return   this.colNum;
        }
        // -----------  表格自我构建行为
        this.clearTable = function(){};
        this.showHeader = function(){};
        this.showContent = function(begin,end){};
        this.showFoot = function(){};
     
        // --------- 分页功能属性
        this.allDataNum = 0;  // 总数据条数
        this.displayNum = 10; // 每页显示条数
        this.maxPageNum = 0;  // 最大页码值
        this.currentPageNum =1;// 当前页码值
        //tfoot分页组
        this.groupDataNum = 10;  //每组显示10页
        this.groupNum = 1;       //当前组
     
        // -------- 分页功能行为
        this.paginationFromBeginToEnd = function(begin,end){}
        this.first =  function(){}//首页
        this.last = function(){}//最后一页
        this.prev = function(){}//上一页
        this.next = function(){}//下一页
        this.goto = function(){} //跳到某页
     
        // ----------- 表格初始化
        this.init = function(begin,end){}
     
    }
     
    /*
     表格对象模板
     */
    function tableTemplet(table_id){
        abstractTable.call(this);
        this.id = table_id;
     
    }
    /**
     * 表格对象
     * @param options
     */
    function table(options){
        if(!options){return;}
        if(!$.isPlainObject(options)){return;}
     
        tableTemplet.call(this,options.tableId);
        //得到表格对象
        this.tableobj = $("#"+this.id);
        //清空表格内容
        this.clearTable = function(){
            this.tableobj.html(" ");
        }
        // 实现分页行为
        this.paginationFromBeginToEnd= function(x,y){
            this.maxPageNum = Math.ceil(this.allDataNum/this.displayNum);
            var arrPage = [];
            for(var i= x;i<y;i++){
                arrPage.push(this.content[i]);
            }
            return arrPage;
        }
     
        this.showHeader = function(){
            if(this.header != null){
               var  $thead = $("<thead>"),
                    $tr = $("<tr>"),
                    $th;
                for(var i=0;i<this.colNum;i++){
                    $th = $("<th>").html(this.header[i]);
                    $th.appendTo($tr);
                }
                $tr.appendTo($thead);
                $thead.appendTo(this.tableobj)
            }
        }
        //初始化tbody
        this.showContent = function(begin,end){
            if(this.content != null){
                var $tbody = $("<tbody>"),
                    $tr,
                    $td;
                var tempDaTa = this.paginationFromBeginToEnd(begin,end),
                    len = tempDaTa.length;
                // 循环创建行
                for(var i=0;i<len;i++){
                    $tr = $("<tr>").appendTo($tbody);
                    if(i%2==1){
                        $tr.addClass("evenrow");
                    }
                    // 循环创建列  取得对象中的键
                    for(var key in tempDaTa[i]){
                        $td = $("<td>").html(tempDaTa[i][key]).appendTo($tr);
                    }
                }
                this.tableobj.append($tbody);
            }
     
        }
        //初始化tfoot
        this.showFoot = function(){
           var $tfoot = $("<tfoot>"),
               $tr = $("<tr>"),
               $td = $("<td>").attr("colspan",this.colNum).addClass("paging");
               $tr.append($td);
               $tfoot.append($tr);
               this.tableobj.append($tfoot);
               this.pagination($td);
        }
        //表格分页
        this.pagination = function(tdCell){
            var $td= typeof(tdCell) == "object" ? tdCell : $("#" + tdCell);
            //首页
            var oA = $("<a/>");
            oA.attr("href","#1");
            oA.html("首页");
            $td.append(oA);
            //上一页
            if(this.currentPageNum>=2){
                var oA = $("<a/>");
                oA.attr("href","#"+(this.currentPageNum - 1));
                oA.html("上一页");
                $td.append(oA);
            }
            //普通显示格式
            if(this.maxPageNum <= this.groupDataNum){  // 10页以内 为一组
                for(var i = 1;i <= this.maxPageNum ;i++){
                    var oA = $("<a/>");
                    oA.attr("href","#"+i);
                    if(this.currentPageNum == i){
                        oA.attr("class","current");
                    }
                    oA.html(i);
                    $td.append(oA);
                }
            }else{//超过10页以后（也就是第一组后）
                 if(this.groupNum<=1){//第一组显示
                     for(var j = 1;j <= this.groupDataNum ;j++){
                         var oA = $("<a/>");
                         oA.attr("href","#"+j);
                         if(this.currentPageNum == j){
                             oA.attr("class","current");
                         }
                         oA.html(j);
                         $td.append(oA);
     
                     }
                 }else{//第二组后面的显示
                     var begin = (this.groupDataNum*(this.groupNum-1))+ 1,
                          end ,
                         maxGroupNum = Math.ceil(this.maxPageNum/this.groupDataNum);
                     if(this.maxPageNum%this.groupDataNum!=0&&this.groupNum==maxGroupNum){
                         end = this.groupDataNum*(this.groupNum-1)+this.maxPageNum%this.groupDataNum
                     }else{
                         end = this.groupDataNum*(this.groupNum);
                     }
     
                     for(var j = begin;j <= end ;j++){
                         var oA = $("<a/>");
                         oA.attr("href","#"+j);
                         if(this.currentPageNum == j){
                             oA.attr("class","current");
                         }
                         oA.html(j);
                         $td.append(oA);
                     }
                 }
            }
            //下一页
            if( (this.maxPageNum - this.currentPageNum) >= 1 ){
                var oA = $("<a/>");
                oA.attr("href","#" + (this.currentPageNum + 1));
                oA.html("下一页");
                $td.append(oA);
            }
            //尾页
            var oA = $("<a/>");
            oA.attr("href","#" + this.maxPageNum);
            oA.html("尾页");
            $td.append(oA);
     
            var page_a = $td.find('a');
            var tempThis = this;
     
            page_a.unbind("click").bind("click",function(){
                var nowNum =  parseInt($(this).attr('href').substring(1));
     
                if(nowNum>tempThis.currentPageNum){//下一组
                    if(tempThis.currentPageNum%tempThis.groupDataNum==0){
                        tempThis.groupNum += 1;
     
                        var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
                        if(tempThis.groupNum>=maxGroupNum){
                            tempThis.groupNum = maxGroupNum;
                        }
                    }
                }
                if(nowNum<tempThis.currentPageNum){//上一组
                    if((tempThis.currentPageNum-1)%tempThis.groupDataNum==0){
                        tempThis.groupNum -= 1;
                        if(tempThis.groupNum<=1){
                            tempThis.groupNum = 1;
                        }
                    }
                }
                if(nowNum==tempThis.maxPageNum){//直接点击尾页
                    var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
                    tempThis.groupNum = maxGroupNum;
                }
                if(nowNum==1){
                    var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
                    tempThis.groupNum = 1;
                }
                tempThis.currentPageNum = nowNum;
     
     
                tempThis.init((tempThis.currentPageNum-1)*tempThis.displayNum,
                    tempThis.currentPageNum*tempThis.displayNum);
                return false;
            });
        }
        //初始化
        this.init = function(begin,end){
            this.header = options.headers;
            this.colNum = this.header.length;
            this.content = options.data;
            this.allDataNum = this.content.length;
            if(options.displayNum){
                this.displayNum = options.displayNum;
            }
            if(options.groupDataNum){
                this.groupDataNum = options.groupDataNum;
            }
            this.clearTable();
            this.showHeader();
            this.showContent(begin,end);
            this.showFoot();
        }
     
        this.init(0,options.displayNum);
    }
</script>

调用方式

<script type="text/javascript">
    var data = [];
    for(var i=0;i<334;i++){
        data[i] = {id:i+1,name:"jason"+(i+1),gender:"男",age:26,address:"成都"};
    }
    var cs = new table({
        "tableId":"cs_table",    //必须
        "headers":["序号","姓名","性别","年龄","地址"],   //必须
        "data":data,        //必须
        "displayNum": 6,    //必须   默认 10
       "groupDataNum":9  //可选    默认 10
});
</script>