datatables日常使用集合

datatables CDN链接地址：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js"></script>

1.datatables初始化

开发中许多页面都需要datatables，很多设置都是重复的，所以对其默认值做了统一设置。

默认值设置：

//默认错误模式是alert出异常信息，非常不友好，改成none后将不显示alert窗口
$.fn.dataTable.ext.errMode = 'none';
// 覆盖默认设置
$.extend($.fn.dataTable.defaults, {
    paging : true, // 分页
    lengthChange : false, // 长度
    searching : false, // 是否显示默认搜索
    info : true, // 是否显示列表信息
    autoWidth : true, // 是否自动宽度
    processing : true, // 是否显示'处理中'
    serverSide : true, // 是否是服务端处理
    ordering : true, // 是否支持排序
    ajax : {
        dataSrc : 'list', // 重置返回的JSON消息数据头，datatables默认是'data'
        type : 'POST', // 默认是post提交
        data : function(data) {
            // 自动获得form 表单的数据，并设置到data中提交查询
            var arrayInput = $("form :input");
            if (arrayInput != undefined && arrayInput.length > 0) {
                for (var i = 0; i < arrayInput.length; i++) {
                    data[arrayInput[i].id] = arrayInput[i].value;
                }
            }
            // 获得orderby条件，设置到orderby中提交查询
            var orderBy = '';
            for (var i = 0; i < data.order.length; i++) {
                order = data.order[i];
                column = data.columns[order.column];
                orderBy += ',' + column.data + " " + order.dir;
            }
            if (orderBy != '') {
                orderBy = orderBy.substr(1);
            }
            data.orderBy = orderBy;
            // 删除内置的列信息，排序信息，搜索信息
            // 不删除会全部提交到后台，数据量很大
            delete (data.columns);
            delete (data.order);
            delete (data.search);
        }
    },
    language : {
        decimal : "",
        emptyTable : "查无数据",
        info : "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
        infoEmpty : "当前显示第 0 至 0 项，共 0 项",
        infoFiltered : "(由 _MAX_ 项结果过滤)",
        infoPostFix : "",
        thousands : ",",
        lengthMenu : "每页 _MENU_ 项",
        loadingRecords : "载入中...",
        processing : "处理中...",
        search : "搜索:",
        zeroRecords : "没有匹配结果",
        paginate : {
            "first" : "首页",
            "previous" : "上页",
            "next" : "下页",
            "last" : "末页"
        },
        aria : {
            "sortAscending" : ": 以升序排列此列",
            "sortDescending" : ": 以降序排列此列"
        }
    },
    drawCallback : function() {
        // 表格绘画完成后，自动添加第一个行“序号”列
        var api = this.api();
        var startIndex = api.context[0]._iDisplayStart;
        var columns = api.context[0].aoColumns;
        var columnIndex = -1;
        for (var i = 0; i < columns.length; i++) {
            if (columns[i].title == '序号') {
                columnIndex = i;
                break;
            }
        }
        if (columnIndex != -1) {
            api.column(columnIndex).nodes().each(function(cell, i) {
                cell.innerHTML = startIndex + i + 1;
            });
        }
    }
});

调用：

// 初始化表格
function initTable() {
    var i = -1;
    table = $('#dataTable').DataTable(
            {
                ajax : {
                    url : prefix + "/list2/"
                },
                columnDefs : [
                        {
                            targets : ++i,
                            title : '',
                            data : null,
                            render : function(data, type, row, meta) {
                                var result = '<input type="checkbox" value="'
                                        + row.dictID + '" />';
                                return result;
                            },
                            orderable : false
                        }, {

                            //默认值设置JS中会判断此列是否存在
                            title : "序号",
                            "searchable" : false,
                            "orderable" : false,
                            "targets" : ++i,
                            data : null,
                        }, {
                            title : "字典ID",
                            "searchable" : false,
                            "orderable" : false,
                            "targets" : ++i,
                            data : "dictID",
                        }, {
                            title : "数据字典名称",
                            "searchable" : false,
                            "orderable" : true,
                            "targets" : ++i,
                            data : "dictName",
                        }, {
                            title : "数据字典值",
                            "searchable" : false,
                            "orderable" : true,
                            "targets" : ++i,
                            data : "dictValue",
                        }],
                order : [ [ 5, 'asc' ] ]
            });
}

2.即时搜索

我的列表原来没有即时搜索效果，后来考虑把搜索条件做统一获得和提交，不要在各自的JS中每次提交。

就给搜索表单加一个id,且名字为search。这个时候发现就产生了即时搜索的效果，只要表单获得焦点或有输入。

列表就会自动带上条件查询。

3.刷新表格，保持在当前页

ajax.reload(null, false); //刷新后还保持在当前页面
ajax.reload(); //刷新后自动到第一页

官方链接：https://datatables.net/reference/api/ajax.reload()

4.列隐藏

通过列属性：className

示例代码：

columnDefs : [
    {
        targets : ++i,
        title : '',
        data : null,
        orderable : false,
        className : $('isValid').val() == '2' ? ''
                : 'hidden',
        render : function(data, type, row, meta) {
            var result = '<input type="checkbox" value="'
                    + row.detailID + '" />';
            return result;
        }
    }, {
        title : "序号",
        "searchable" : false,
        "orderable" : false,
        "targets" : ++i,
        data : null,
    }]

5.销毁table

table.destroy(); // table是datatable的实例变量
$('#dataTable').empty(); // 清空table的html，这一步必须要有，否则会清除不干净