DataTables-jQuery插件

构造jQuery.DataTable

方式一: 服务端数据初始化

var table = $('#table_id').DataTable({
    "paging": true,
    "lengthChange": false,
    "autoWidth": false,
    "pageLength": 15,
    "serverSide": true,
    "destroy": true,
    "pagingType": "full_numbers",
    "ordering": false,
    "searching": false,
    "info": true,
    "ajax": {
        "url": "/System/StaffingNeedsList",
        "type": "POST",
        "data": _data
    },
    columns: [
        { "data": "CompanyName" },
        { "data": "PositionName" },
        { "data": "Contacts" },
        { "data": "ContactsMobile" },
        { "data": "SubmitRemark" },
        { "data": "ReadStateName" },
        { "data": "CreatedTime" }
    ],
    columnDefs: [
        {
            "render": function (data, type, row) {
                if (row.CreatedTime !== null) {
                    var date = new Date(parseInt(row.CreatedTime.substr(6)));
                    var month = date.getMonth() + 1;
                    return (date.getFullYear() + '/' + month + '/' + date.getDate())
                }
                return data;
            },
            "targets": 6
        },
        {
            "render": function (data, type, row) {
                var tmp = "<a data-ID="" + row["StaffingNeedsID"] + "" onclick="openStaffingNeedsDetail(this)"><i class="fa fa-search" title="查看"></i></a>";
                return tmp;
            },
            "targets": 7
        }
    ]
});

方式二:动态表头

function createTable() {
    var _data = {};
    _data.roleCode = $("#MenuModule").val();
    $.ajax({
        "url": "/Menu/GetMenuTableHead",
        "success": function (data) {
            var tableData = JSON.parse(data);//jquery.DataTable预定义的对象结构参数
            iniDataTable(tableData);
            tableData.columns.push(
                { data: null, title: "操作" });

            tableData.columnDefs = [
                {
                    "render": function (data, type, row) {
                        return '<a href="/Admin/Menu/Edit/' + row["MenuId"] + '" title="编辑"><i class="fa fa-edit"></i></a>';
                    },
                    "targets": -1
                }
            ];
            tableData.ajax = {
                "url": "/Menu/GetMenuTableList",
                "type": "POST",
                "data": _data
            }
            return $("#table_id").DataTable(tableData);
        }
    });
}

function iniDataTable(tableData) {
    if (tableData !== null) {
        tableData.lengthChange = false;
        tableData.searching = false;
        tableData.ordering = false;
        tableData.info = true;
        tableData.autoWidth = false;
        tableData.pageLength = 15;
        tableData.serverSide = true;
        tableData.destroy = true;
    }
}

public string GetMenuTableHead()
{
    IDictionary info = new Hashtable();
    ArrayList headers = new ArrayList() { };
    headers.Add(new ColumnModels() { data = "MenuId", title = "ID" });
    headers.Add(new ColumnModels() { data = "ModuleName", title = "模块名" });
    headers.Add(new ColumnModels() { data = "MenuName", title = "菜单名" });
    headers.Add(new ColumnModels() { data = "URL", title = "URL" });
    headers.Add(new ColumnModels() { data = "MenuIcon", title = "样式" });
    headers.Add(new ColumnModels() { data = "RoleCode", title = "RoleCode" });
    headers.Add(new ColumnModels() { data = "Level", title = "层级" });
    headers.Add(new ColumnModels() { data = "OrderId", title = "排序号" });
    info.Add("columns", headers); //columns DataTable预定义,数组结构
    return JsonConvert.SerializeObject(info);
}

参考

row选中时间并获取数据

table.on('select', function (e, dt, type, indexes) {
    if (type === 'row') {
        var currentRowData = table.rows(indexes, { order: 'index' }).data();
        $("#categoryId").html(currentRowData[0].Id);
        $("#pcategoryName").html(currentRowData[0].PCategoryName);
        $("#hdCategoryId").val(currentRowData[0].Id);
        $("#category").val(currentRowData[0].CategoryName);
        $("#order").val(currentRowData[0].Order);
    }
});

serverSide: false 客户端方式

数据有其它方式获取,保存在变量dataSet中

bindDataTable = function () {
    $('#example').DataTable({
        paging: false,
        lengthChange: false,
        autoWidth: false,
        ordering: false,
        serverSide: false,//必须设置成false,默认值false,By default DataTables operates in client-side processing mode,过滤、分页和排序计算都在web浏览器中执行
        destroy: true,
        searching: false,
        info: false,
        responsive: true,
        data: dataSet,
        columns :[
            { "data": "staff_no", title: "Staff NO",  "3%" },
            { "data": "staff_name", title: "Staff Name",  "7%" },
            { "data": "dept_no", title: "Dept NO",  "7%" },
            { "data": "dept_name", title: "Dept Name",  "9%" },
            { "data": "team_no", title: "Team NO",  "7%" },
            { "data": "team_name", title: "Team Name",  "9%" }
        ]
    });
};

dataSet数据结构

{
    "result": true,
    "message": "",
    "data": [{
        "staff_no": "3004",
        "staff_name": "李DD",
        "role": null,
        "dept_no": "021305",
        "dept_name": "中区",
        "team_no": "021305",
        "team_name": "中区"
    }, {
        "staff_no": "3005",
        "staff_name": "陈CC",
        "role": null,
        "dept_no": "021305",
        "dept_name": "中区",
        "team_no": "021305",
        "team_name": "中区"
    }, {
        "staff_no": "3006",
        "staff_name": "鲍EE",
        "role": null,
        "dept_no": "021305",
        "dept_name": "中区",
        "team_no": "021305",
        "team_name": "中区"
    }]
}

汉化方法 实践版本 DataTables 1.10.13

var oLanguage = {
    "oAria": {
        "sSortAscending": ": 升序排列",
        "sSortDescending": ": 降序排列"
    },
    "oPaginate": {
        "sFirst": "首页",
        "sLast": "末页",
        "sNext": "下页",
        "sPrevious": "上页"
    },
    "sEmptyTable": "没有相关记录",
    "sInfo": "第 _START_ 到 _END_ 条记录，共 _TOTAL_ 条",
    "sInfoEmpty": "第 0 到 0 条记录，共 0 条",
    "sInfoFiltered": "(从 _MAX_ 条记录中检索)",
    "sInfoPostFix": "",
    "sDecimal": "",
    "sThousands": ",",
    "sLengthMenu": "每页显示条数: _MENU_",
    "sLoadingRecords": "正在载入...",
    "sProcessing": "正在载入...",
    "sSearch": "搜索:",
    "sSearchPlaceholder": "",
    "sUrl": "",
    "sZeroRecords": "没有相关记录"
}
$.extend($.fn.dataTable.defaults.oLanguage, oLanguage);