我对DataTables的理解，以及小案例

优点：开源(选型最重要的一点)，API方法扩展比较简单,源码写的非常优美，以至于比较难看懂，需要不断调试。

缺点：功能与datagrid或者ligerui的grid等比较起来缺少很多，不过这些都可以自己扩展，需要费比较大的精力。

下面是我的一个小小案例，里面有些方法是我自己额外加的，大家可以自行删除掉，不然会报错。 本人不太喜欢通过for循环去展现表单，一切都是ajax，劲量减少html的编写，不然项目参与人多了后代码就会非常乱。JavaScript可以封装，尽量让开发人员少些代码。
DatatableHelper这个封装已经在之前的博客上贡献出来了。

关于columns中的多余属性：dataType: "dict",  dataTypeValue: 'common.is'是传递到后台进行数据转换的，需要自己改一下源码，让后台把值转换好后传回前端展现。

比如日期格式的换砖，bool值的转换，i18n的转换和数据字典的转换。

var TableDatatablesAjax = function () {
    var grid;
    var handleRecords = function () {
        grid = new DatatableHelper();
        var gridSize = Public.setGrid();
        grid.init({
            src: $("#datatable_ajax"),
            onSuccess: function (grid, response) {

            },
            onError: function (grid) {
            },
            onDataLoad: function(grid) {
                TableDatatablesAjax.getDatatableHelper().getDataTable().row(':eq(0)').select();
            },
            loadingMessage: 'Loading...',
            dataTable: {
                "scrollY": gridSize.h - 55,
                "scrollX": true,
                dom: 'Bfrtip',
                columns: [{
                    data: "id",
                    title: "编号",
                    width: 40,
                    fixed: true,
                    align: "center"
                },{
                    data: "username",
                    title: "登陆账号",
                    width: 100,
                    align: "left"
                },{
                    data: "name",
                    title: "姓名",
                    defaultContent: "",
                    width: 80,
                    align: "left"
                },{
                    data: "email",
                    title: "邮箱",
                    defaultContent: "",
                    width: 120,
                    align: "left"
                },{
                    data: "mobilePhoneNumber",
                    title: "手机号",
                    defaultContent: "",
                    width: 120,
                    align: "left"
                },{
                    data: "createDate",
                    title: "创建时间",
                    defaultContent: "",
                    width: 120,
                    align: "left",
                    dataType: 'format', dataTypeValue:'yyyy-MM-dd'
                },{
                    data: "status",
                    title: "账户状态",
                    width: 120,
                    align: "left",
                    dataType: "i18n",
                    dataTypeValue: "UserStatus"
                },{
                    data: "admin",
                    title: "管理员",
                    width: 80,
                    align: "left",
                    dataType: "dict",
                    dataTypeValue: 'common.is'
                }],
                "bStateSave": true,
                "ajax": {
                    "url": location.href,
                },
                buttons: [
                    'selectAll',
                    'selectNone'
                ],
                "order": [
                    [1, "asc"]
                ]
            }
        });

        // handle group actionsubmit button click
        grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
            e.preventDefault();
            var action = $(".table-group-action-input", grid.getTableWrapper());
            if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
                grid.setAjaxParam("customActionType", "group_action");
                grid.setAjaxParam("customActionName", action.val());
                grid.setAjaxParam("id", grid.getSelectedRows());
                grid.getDataTable().ajax.reload();
                grid.clearAjaxParams();
            } else if (action.val() == "") {
                App.alert({
                    type: 'danger',
                    icon: 'warning',
                    message: 'Please select an action',
                    container: grid.getTableWrapper(),
                    place: 'prepend'
                });
            } else if (grid.getSelectedRowsCount() === 0) {
                App.alert({
                    type: 'danger',
                    icon: 'warning',
                    message: 'No record selected',
                    container: grid.getTableWrapper(),
                    place: 'prepend'
                });
            }
        });

        //grid.setAjaxParam("customActionType", "group_action");
        //grid.getDataTable().ajax.reload();
        //grid.clearAjaxParams();
    }

    return {
        init: function () {
            handleRecords();
        },
        getDatatableHelper: function(){
            return grid;
        }
    };
}();
jQuery(document).ready(function() {
    TableDatatablesAjax.init();
    SetUI();
});


HTML代码
<div class="table-container">
     <table class="table table-striped table-bordered table-hover table-checkable dataTable no-footer" id="datatable_ajax">
     </table>
</div>

截图：