DataTables使用记录

目录

1、列隐藏

2、自定义选择每页显示的数据

3、排序

3.1、禁用指定列的排序功能 

4、初始化

4.1、完成初始化回调initComplete

4.2、重复初始化报错

4.3、重新初始化

5、序号列

6、dom 配置基本显示数据

其他/杂项

刷新表格

---

1、列隐藏

方法1：

columns:[            
            {
                data: 'SortNO',
                visible: false
            }
        ]

方法2：

columnDefs:[{"targets":[0,1],"visible":false}] //隐藏第0、1列

2、自定义选择每页显示的数据

lengthChange: true,//默认为true
pageLength: 10,
lengthMenu: [5, 10, 25, 50, 75, 100, 200],

效果：

Datatables修改每页显示的条数_BADAO_LIUMANG_QIZHI的博客-优快云博客

3、排序

3.1、禁用指定列的排序功能 

方法一 

 columns: [
            {
                defaultContent: "详情",
                orderable : false //禁用当前列的排序功能
            },
            {data:"Name"}
          ]

如果指定的默认排序是0，而禁用的也是第0列，则需要重新指定默认排序列。

方法二

aoColumnDefs: [{ "bSortable": false, "aTargets": [0] }]

---

4、初始化

4.1、完成初始化回调initComplete

表格初始化完成后的操作可以使用initComplete

                            initComplete: function (settings) {
                                //....
                            }

或者使用drawCallback 

4.2、重复初始化报错

需要重复初始化的时候会报错“Cannot reinitialise DataTable”

搜到一种方法是加上 retrieve: true 即可 。但这种像是并不会使表格中的内容重新绑定！

 或者 ：

        ① destroy : true

        ② 在加载datatable之前,销毁$("#test").dataTable().fnDestroy();

4.3、重新初始化

在初次加载后，需要再次重新加载数据：

清空table： _table.fnClearTable();

还原初始化的table：_table.fnDestroy(); 

            var _table;
            $.getJSON("@Url.Action("GetDiffSysUsers")", function (data) {
                loading.end();
                var parseData = JSON.parse(data);
                console.log(parseData);
                if (parseData.isSuccess) {
                    if (parseData.data.length > 0) {
                        if (_table != undefined) {
                            _table.fnClearTable(); 
                            _table.fnDestroy();
                        }
                        _table=  $('#tb_ad').dataTable({
                            language: {
                                "url": "/Content/jquery.datatables/language/zh_CN.txt"
                            },
                           /* retrieve: true,*/
                           /* serverSide: false,*/
                            lengthChange: true,   //选择每页显示多少条数据，下拉选项
                            dom: '<"top"f>rt<"bottom"ipl><"clear">',
                            data: parseData.data,
                            order: [[1, 'asc']],
                            aoColumnDefs: [{ "bSortable": false, "aTargets": [0] }],
                            "columns": [
                                {
                                    data: 'ID',
                                    render: function (data, type, row, meta) {
                                        return '<input type="checkbox" class="" id="ck' + data + '" />';
                                    }
                                },
                                { data: 'LoginName' },
                                { data: 'UserName' },
                                { data: 'DeptName' }
                            ],
                            initComplete: function (settings) {
                             //初始化ICheck 
                                $('input').iCheck({
                                    checkboxClass: 'icheckbox_minimal',
                                    radioClass: 'iradio_minimal'
                                });
                            }                        
                        });
                    } 

                } else {
                    toast(parseData.msg, { type: "fail" });
                }
               
            });

---

5、序号列

 $('#tb_ad').dataTable({
    fnRowCallback: function (nRow, aData, iDisplayIndex) {
            $("td:first", nRow).html(iDisplayIndex + 1);//设置序号位于第一列，并顺次加一
            return nRow;
        }
});

---

6、dom 配置基本显示数据

用dom配置下图中的效果：

dom: '<"top"f>rt<"bottom"ipl><"clear">'

// 顶部的搜索框在左侧显示
<"pull-left"f>

cnblogs.com/dream-by-dream/p/11804149.html

7、添加复选框

dataTables——实现表单复选框全选/全不选/反选功能_冧_恣的博客-优快云博客_datatables复选框

其他/杂项

刷新表格

table.fnDraw()