Contoh halaman jadual bukan muat semula berdasarkan jQuery

Contoh dalam artikel ini menerangkan halaman jadual bukan muat semula berdasarkan jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Rendering adalah seperti berikut:

struktur html:

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

Salin selepas log masuk

gaya css:

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}

Salin selepas log masuk

kod enkapsulasi javascript:

/**
 * 抽象化表格
 */
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" &#63; 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);
}

Salin selepas log masuk

Kaedah panggilan:

<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>

Salin selepas log masuk

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Ringkasan kemahiran sambungan JQuery", "ringkasan kesan khas klasik biasa jQuery" , " Ringkasan pemalam dan penggunaan jQuery biasa", "Ringkasan penggunaan Ajax dalam jquery" dan "Ringkasan kemahiran operasi jquery biasa"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.