Jquery制作可以绑定的表格

//总页数 当前页 可见页 参数 翻页执行后处理的函数function PageTable(totalPages, currentPage, tableobj, url, where, columns) {  function PageTableAjax() {    initTable(tableobj);    $.ajax({      type: "POST",      url: url,      data: { where: where, page: currentPage },      dataType: "json",      success: function (rsp) {        if (rsp.pass) {          totalPages = rsp.pagination.PageCount;          currentPage = rsp.pagination.PageIndex;          bindTable(tableobj, rsp.rows, columns)          console.log("PageTablePaginator")          PageTablePaginator();        } else {          console.log(rsp.msg)        }      },      error: function (e, s, t) {        console.log("ajax error")      }    });  }  function PageTablePaginator() {    $.jqPaginator('ul.pagination', {      wrapper: '',      first: '<li ><a href="javascript:;">首页</a></li>',      prev: '<li ><a href="javascript:;">&laquo;</a></li>',      next: '<li ><a href="javascript:;">&raquo;</a></li>',      last: '<li ><a href="javascript:;">尾页</a></li>',      page: '<li ><a href="javascript:;">{{page}}</a></li>',      totalPages: totalPages,/*总数 */      visiblePages: 5,/*可见分页数*/      currentPage: currentPage,      onPageChange: function (num, type) {        if (type == "change") {          console.log('PageTableAjax')          PageTable(totalPages, num, tableobj, url, where, columns)        }      }    });  }  PageTableAjax();}//table初始化状态function initTable(obj) {  console.log('initTable')  var head = $(obj).find('thead tr th');  var tbody = $(obj).find('tbody');  tbody.html("");  //无记录  var tr01 = $("<tr align=\"center\"></tr>");  $("<td colspan=\"" + head.length + "\">loading...</td>").appendTo(tr01);  tbody.append(tr01);  console.log('pagination:' + $('ul.pagination').length)  if ($('ul.pagination').length == 0) {    $(obj).after("<ul class=\"pagination\"></ul>");  }}function bindTable(obj, rows, columns) {  console.log('bindTable')  var tbody = $(obj).find('tbody');  tbody.html("");  var head = $(obj).find('thead tr th');  console.log("columns:" + columns.length);  if (rows[0] != 'undefined' && rows[0] != null) {    for (var i = 0; i < rows.length; i++) {      var r = rows[i];      var tr = $("<tr></tr>");      for (var j = 0; j < columns.length; j++) {        var fieldstr = columns[j].field;        var valstr = r[fieldstr];        if (fieldstr.indexOf('.') != -1) {          //console.log("indexOf:" + fieldstr.substring(fieldstr.indexOf('.'), fieldstr.length))          var arr = fieldstr.split(".");          valstr = r[arr[0]][arr[1]];          switch(arr.length)          {            case 2:              valstr = r[arr[0]][arr[1]];              break;            case 3:              valstr = r[arr[0]][arr[1]][arr[2]];              break;            case 4:              valstr = r[arr[0]][arr[1]][arr[2]][arr[3]];              break;            default:              valstr = r[arr[0]][arr[1]];          }        }        if (columns[j].formatter != 'undefined' && typeof columns[j].formatter === 'function') {          console.log('columns.formatter')          valstr = columns[j].formatter(valstr, i);        }        $("<td>" + valstr + "</td>").appendTo(tr);      }      tbody.append(tr);    }  } else {        //无记录    var tr = $("<tr align=\"center\"></tr>");    $("<td colspan=\"" + head.length + "\">(暂无相关记录)</td>").appendTo(tr);    tbody.append(tr);  }}

花费的时间有限，基本就是为了实现功能。
里面的分页插件是是使用了这个：http://www.oschina.net/p/jqpaginator

使用方法如下：

PageTable(10, 1, "#actionlist", "/Admin/ActionList", where,          [{            field: "Id", formatter: function (val, rec) {              return "<input name=\"aid\" type=\"checkbox\" value=\""+val+"\">";            }          },          { field: "Id" },          { field: "ActionName" },          { field: "ActionUrl" },          { field: "ActionGroupName" },          {            field: "Id", formatter: function (val, rec) {              return "<a href=\"javascrip:;\" onclick=\"loadContent('/Admin/ActionUpdate?aid=" + val + "',true)\">修改</a>";            }          }])

页面如下：

<table id="actionlist" class="pure-table pure-table-bordered">  <thead>    <tr>      <th><input name="aid_g" type="checkbox" title="全选/反选"></th>      <th>#</th>      <th>命令名</th>      <th>命令参数</th>      <th>分组名</th>      <th>操作</th>    </tr>  </thead>  <tbody>  </tbody></table>

解释如下：函数PageTable有如下参数
totalPages, currentPage, tableobj, url, where, columns（总页数，目标页，表格对象，请求的url，相关查询参数，还有字段列）

我后端是C#用MVC的Json返回：

return Json(new { rows = itemList, pagination = pageturn ,pass=true})

一个匿名对象：rows是行数据，pagination的分页数据，pass是告知数据是否正确。

函数的结构：PageTable函数是入口，先执行PageTableAjax函数，初始化表格（initTable函数）在请求数据，数据接收后，通知bindTable函数绑定数据，再通知PageTablePaginator函数绑定分页。最后在PageTablePaginator函数的每个分页绑定PageTable，达到分页的效果。

效果图如上，表格我是用pure的table样式，还不错。分页的样式是参考bootstrap，然后仔细修改，毕竟bootstrap的css文件太大，不如pure小巧（只有5KB）

原标题：Jquery制作可以绑定的表格

关键词：jquery