基于jquery實(shí)現(xiàn)表格無(wú)刷新分頁(yè)

更新時(shí)間：2016年01月07日 15:47:16 投稿：lijiao

這篇文章主要介紹了基于jquery實(shí)現(xiàn)表格無(wú)刷新分頁(yè)，功能實(shí)現(xiàn)了前端排序功能，增加了前端搜索功能，感興趣的小伙伴們可以參考一下

本文實(shí)例講解了基于jquery實(shí)現(xiàn)表格無(wú)刷新分頁(yè)功能，分享給大家供大家參考，具體內(nèi)容如下

效果圖：

具體代碼：

<html>
<head>
  <title>面向?qū)ο蟮臒o(wú)刷新表格分頁(yè)</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="js/jquery-1.7.2.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":["序號(hào)","姓名","性別","年齡","地址"],  //必須 thead表頭
    "data":data,     //必須 tbody 數(shù)據(jù)展示
    "displayNum": 10,  //必須  默認(rèn) 10 每頁(yè)顯示行數(shù)
    "groupDataNum":5,   //可選  默認(rèn) 10 組數(shù)
    "display_tfoot":true, // true/false 是否顯示tfoot --- 默認(rèn)false
    "bindContentTr":function(){ //可選 給tbody 每行綁定事件回調(diào)
      this.tableObj.find("tbody").on("click",'tr',function(e){
        return false;
        var tr_index = $(this).data("tr_index");    // tr行號(hào) 從0開(kāi)始
        var data_index = $(this).data("data_index");  //數(shù)據(jù)行號(hào) 從0開(kāi)始
      })
    },
    sort:true,  // 點(diǎn)擊表頭是否排序 true/false --- 默認(rèn)false
    sortContent:[
      {
        index:0,//表頭序號(hào)
        compareCallBack:function(a,b){ //排序比較的回調(diào)函數(shù)
          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,//表頭序號(hào)
        compareCallBack:function(a,b){ //排序比較的回調(diào)函數(shù)
          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  // 默認(rèn)為false 沒(méi)有搜索
  });
</script>
</body>
</html>

html,body{margin: 0;padding:0}
a:focus {outline: none;}
h3.head_title {border-bottom: 1px solid #d5ddeb;color: #1c7493;display: block;font-size: 14px;height: 30px;line-height: 30px;margin-bottom: 10px;}
/* 通用表格顯示 */
table, th, td {font: 12px Arial,Helvetica,sans-serif,'宋體';margin: 0;padding: 0}
table{border-spacing: 0;border-collapse: collapse;empty-cells: show}
.data-table {width: 100%;border-style: none;background-color: #fff;/*margin-bottom: 20px;*/text-align: left;}
.data-table th, .data-table td { padding: 5px;line-height: 30px}
.data-table thead th {background-color: #eee;margin: 0;text-align: left;border-top: 1px solid #cfcfcf;border-bottom: 1px solid #cfcfcf;font-weight: 500}
.data-table tbody td {background-color: #fff;border-bottom: 1px dotted #ddd;table-layout:fixed;word-break:break-all;border-collapse:collapse;font-weight: 400}
.data-table tbody tr.evenrow td {background-color: #f4f4f4;}
.data-table tfoot td {background-color: #fafafa;text-align: right;border-bottom: 1px solid #cfcfcf;}
/*表格分頁(yè)列表*/
.data-table td.paging a {border: 1px solid #eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align:center;}
/*表格分頁(yè)當(dāng)前頁(yè)*/
.data-table td.paging a.current {background: #eee; border: 1px solid #CFCFCF; color: #444; font-weight: bold;}
.data-table td.paging input{border:1px solid #4D90BB;font-family:Arial,sans-serif,Tahoma; font-size:12px; padding:0 5px;outline: none}
.data-table td.paging .search-txt{height:30px;line-height:30px;width: 100px }
.data-table td.paging .search-btn{height: 32px;border-left:none;cursor: pointer;_filter:chroma(color=#000000);_border:none;}
/*表格排序*/
.data-table thead th.bg{background:#eee url("../images/bg.gif") right center no-repeat;cursor: pointer}
.data-table thead th.asc{background: url("../images/asc.gif") right center no-repeat;cursor: pointer}
.data-table thead th.desc{background: url("../images/desc.gif") right center no-repeat;cursor: pointer}

以上就是基于jquery實(shí)現(xiàn)表格無(wú)刷新分頁(yè)功能的詳細(xì)代碼，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: