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 class="first"><a href="javascript:;">首页</a></li>', prev: '<li class="prev"><a href="javascript:;">«</a></li>', next: '<li class="next"><a href="javascript:;">»</a></li>', last: '<li class="last"><a href="javascript:;">尾页</a></li>', page: '<li class="page"><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)
因缘际会的相遇,自当有非同寻常的结局
QQ交流群:110826636