//总页数 当前页 可见页 参数 翻页执行后处理的函数function PageTable(totalPages, currentPage, tableobj, url, where, columns) { function PageTableAjax() { initT ...
//总页数 当前页 可见页 参数 翻页执行后处理的函数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:;">«</a></li>', next: '<li ><a href="javascript:;">»</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); }}
原标题:Jquery制作可以绑定的表格
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。