datatables日常使用集合

datatables CDN链接地址：

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，这一步必须要有，否则会清除不干净

巴特西

datatables日常使用集合

最新文章

热门文章