jquery实现表格无刷新分页-js教程-PHP中文网

jquery实现表格无刷新分页

php中文网

发布： 2016-06-01 09:54:39

原创

1587人浏览过

本文实例讲解了基于jquery实现表格无刷新分页功能，分享给大家供大家参考，具体内容如下

<code class="html"><html>
<head>
  <title>面向对象的无刷新表格分页</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  <link rel="stylesheet" href="css/king-table.css"/>
  <script type="text/javascript" src="/Public/js/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="js/king-table.js"></script>
</head>
<body>
<table id="cs_table" class="data-table"></table>
<br/>
<table id="cs_table2" class="data-table"></table>
<script type="text/javascript">
  var data = [];
  for(var i=0;i<103;i++){
    data[i] = {id:i+1,name:"jason"+(i+1),gender:"男",age:i+1,address:"成都"};
  }
  var cs = new table({
    "tableId":"cs_table",  //必须 表格id
    "headers":["序号","姓名","性别","年龄","地址"],  //必须 thead表头
    "data":data,     //必须 tbody 数据展示
    "displayNum": 10,  //必须  默认 10 每页显示行数
    "groupDataNum":5,   //可选  默认 10 组数
    "display_tfoot":true, // true/false 是否显示tfoot --- 默认false
    "bindContentTr":function(){ //可选 给tbody 每行绑定事件回调
      this.tableObj.find("tbody").on("click",'tr',function(e){
        return false;
        var tr_index = $(this).data("tr_index");    // tr行号 从0开始
        var data_index = $(this).data("data_index");  //数据行号 从0开始
      })
    },
    sort:true,  // 点击表头是否排序 true/false --- 默认false
    sortContent:[
      {
        index:0,//表头序号
        compareCallBack:function(a,b){ //排序比较的回调函数
          var a=parseInt(a.id,10);
          var b=parseInt(b.id,10);
          if(a < b)
            return -1;
          else if(a == b)
            return 0;
          else
            return 1;
        }
      },
      {
        index:3,//表头序号
        compareCallBack:function(a,b){ //排序比较的回调函数
          var a=parseInt(a.age,10);
          var b=parseInt(b.age,10);
          if(a < b)
            return -1;
          else if(a == b)
            return 0;
          else
            return 1;
        }
      }
  ],
    specialRows:[
      {
        row:4,
        cssText:{
           "color":"#FFCF17"
        }
      }
    ],
    search:true  // 默认为false 没有搜索
  });
</script>
</body>
</html></code>

登录后复制