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:;">&laquo;</a></li>',
            next: '<li class="next"><a href="javascript:;">&raquo;</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）