JqueryTable ServerSide Ajax 数据加载及样式设置

 <script type="text/javascript">
        $(function () {
            var peopleList = $('#PeopleListTable').DataTable({
                "language": {
                    "sProcessing": "正在加载数据...",
                    "lengthMenu": "每页显示 _MENU_ 条记录 ",
                    "zeroRecords": "没有找到数据 - sorry",
                    "info": "第 _PAGE_ 页，共 _PAGES_页",
                    "infoEmpty": "没有找到数据",
                    "infoFiltered": "(filtered from _MAX_ total records)",
                    "search": "搜索",
                    "paginate": {
                        "sFirst": "第一页",
                        "sPrevious": " 上一页 ",
                        "sNext": " 下一页 ",
                        "sLast": " 最后一页 "
                    }
                },
                //JQueryUI: true,
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "pagingType": "bootstrap_extended", //"full_numbers", // 分页，一共两种样式 另一种为two_button // 是datatables默认
                //"bSortCellsTop": true,

                //select: {
                //    style: 'single'
                //},
                serverSide: true,
                //processing: true,
                ajax: {
                    type: "POST",
                    //url: "/Admin/SensorType4/GetDataTable", //
                    url: abp.appPath + "api/services/app/wMSensorType/GetTablePageList",//
                },
                columns: [
                    { "data": "Id", "title": "ID", },
                    {
                        //自定义列，checkbox 全选按钮
                        "title": ' <input type="checkbox" class="group-checkable" data-set="#PeopleListTable .checkboxes" />',//'<div class="checker"><span><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></span></div>',
                        "sortable": false,
                        "searchable": false,
                        "class": "center sorting_disabled",
                        "render": function (obj, type, full, meta) {
                            return '<input type="checkbox" class="checkboxes" value="' + full.Id + '" />'; //'<div class="checker"><span></span></div>';
                        }

                    },

                    { "data": "SensorTypeCode", "title": "传感器类型编码", "class": "center", },
                    { "data": "SensorTypeName", "title": "传感器类型名称", "class": "center", },
                    { "data": "Remarks", "title": "备注", "class": "center", },
                    {
                        //自定义列 编辑按钮
                        "title": "操作",
                        "sortable": false,
                        "searchable": false,
                        "render": function (obj, type, full, meta) {
                            return '<a class="" href=\"/admin/Article/edit?Id=' + full.Id + '\">编辑</a> ' + ' <a href=\"#\" onclick=\"DeleteArticle(' + full.Id + ')\">删除</a>';
                        }
                    }
                ],
                "columnDefs": [
                    {
                        "targets": [1],
                        "sortable": false,
                        "searchable": false,

                    },
                    {
                        "targets": [0],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [4],
                        "sortable": false
                    }
                ],
                "order": [
                    [2, "asc"]
                ],
                //select: true,
                //DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads a page, or comes back to the page after visiting a sub-page. This state saving ability is enabled by the
                //此处设置后还会记录列设置数据，修改列定义无法改变，只能重新启动程序。此处只能作为发布版本设置
                //stateSave: true,

                "drawCallback": function (settings) {
                    //数据加载完成后
                    //动态加载样式及绑定事件
                    App.init();

                }
            });
            //
            var table = $('#PeopleListTable');
            table.find('.group-checkable').change(function () {
                var set = jQuery(this).attr("data-set");
                var checked = jQuery(this).is(":checked");
                jQuery(set).each(function () {
                    if (checked) {
                        $(this).prop("checked", true);
                        $(this).parents('tr').addClass("active");
                    } else {
                        $(this).prop("checked", false);
                        $(this).parents('tr').removeClass("active");
                    }
                });
                jQuery.uniform.update(set);
            });

            table.on('change', 'tbody tr .checkboxes', function () {
                $(this).parents('tr').toggleClass("active");
            });
        });