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: '
首页
',prev: '
«
',next: '
»
',last: '
尾页
',page: '
{{page}}
',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 = $("");$("loading...").appendTo(tr01);tbody.append(tr01);console.log('pagination:' + $('ul.pagination').length)if ($('ul.pagination').length == 0) {$(obj).after("
");}
}
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 = $("");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);}$("" + valstr + "").appendTo(tr);}tbody.append(tr);}} else {//无记录var tr = $("");$("(暂无相关记录)").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 "";}},{ field: "Id" },{ field: "ActionName" },{ field: "ActionUrl" },{ field: "ActionGroupName" },{field: "Id", formatter: function (val, rec) {return "修改";}}])

页面如下：

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

转载于:https://www.cnblogs.com/RainbowInTheSky/p/4590492.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！