Jquery DataTable基本使用

女爷i 2022-04-11 11:58 340阅读 0赞

转自：[http://www.cnblogs.com/xiashengwang/p/8087181.html][http_www.cnblogs.com_xiashengwang_p_8087181.html]

# 1 、首先需要引用下面两个文件 #

# 2、DataTable支持的数据类型 #

[https://www.datatables.net/manual/data/][https_www.datatables.net_manual_data]

## 2.1 数组 ##

vardata = [ 
        [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120"],
        [ "Garrett Winters", "Director", "Edinburgh", "8422", "2011/07/25", "$5,300" ] 
    ]

## 2.2 对象 ##

[ 
        { 
            "name": "Tiger Nixon", 
            "position": "System Architect",
            "salary": "$3,120", 
            "start_date": "2011/04/25", 
            "office": "Edinburgh",
            "extn": "5421" 
        }, 
        { 
            "name": "Garrett Winters",
            "position": "Director", 
            "salary": "$5,300", 
            "start_date": "2011/07/25", 
            "office": "Edinburgh", 
            "extn": "8422" 
        } 
    ]

## 2.3 datatable的数据来源 ##

### 1）DOM ###

如果没有指定data，ajax选项，则DataTable会将当前table的html标签上内容转换成对应的数据（Array数据形式）。

### 2）Html5 ###

Data-\* 标签上可以指定不同的值，用于排序和查找，td内部标签的值对应当前单元格的数据。

<td data-search="21st November 2016 21/11/2016" data-order="1479686400">
        21st November 2016
    </td>

### 3）javascript ###

通过data配置，指定数据源。可以通过DataTables API row.add() row().remove()操作行数据。

### 4）Ajax  ###

###   通过服务器端分页的方式，取得数据。返回的数据只能是json数组或对象（上面的2.1和2.2） ###

# 3 、分页方式 #

## 3.1 客户端分页  ##

这种方式，代码最简单，整个数据量在10000条以内可以考虑。假设已经有了下面的table：

<table id="table1" class="table table-condensed">
        <thead>
    	<tr>
    	    <th>ID</th>
    	    <th>Name</th>
    	    <th>Score</th>
            </tr>
        </thead>
        <tbody>
            <tr>
    	    <td>001</td>
    	    <td>zhang</td>
    	    <td>98</td>
    	</tr>
    	<tr>
    	    <td>002</td>
    	    <td>wang</td>
    	    <td>99</td>
    	</tr>
        </tbody>
    </table>

简单调用一句话（使用默认设置），就可以使table具有排序，查找，分页的基本功能。

$(function() {
        $("#table1").DataTable({});
    });

## 3.2 服务器端分页 ##

这种方式针对大数据量的table（10万条以上），每次只读取当前的一页数据，分页在后台做。代码相对复杂，不过页面响应更快，

服务器端的分页一般要求我们先定义thead表头，tbody可以不写。

# 4、配置参数 #

这些配置参数可以通过javascript进行设置，也可以直接用HTML5标签data-\* 的方式写在table的标签中。

所有的配置选项：[https://www.datatables.net/reference/option/][https_www.datatables.net_reference_option]

$(function () {
    
            $("#table1").DataTable({
                // 是否允许检索
                "searching": false,
                // 是否允许排序
                "ordering": true,
                // 初期排序列
                //"order": [[0,'asc'],[1,'desc']],
                // 是否显示情报 就是"当前显示1/100记录"这个信息
                "info": false,
                // 是否允许翻页，设成false，翻页按钮不显示
                "paging": false,
                // 水平滚动条
                "scrollX": false,
                // 垂直滚动条
                "scrollY": false,
                // 件数选择功能 默认true
                "lengthChange": false,
                // 件数选择下拉框内容
                "lengthMenu": [10, 25, 50, 75, 100],
                // 每页的初期件数 用户可以操作lengthMenu上的值覆盖
                "pageLength": 50,
                //翻页按钮样式
                // numbers:数字
                // simple:前一页，后一页
                // simple_numbers:前一页，后一页，数字
                // full:第一页，前一页，后一页，最后页
                //full_numbers:第一页，前一页，后一页，最后页，数字
                //first_last_numbers:第一页，最后页，数字
                "pagingType": "full_numbers",
                // 行样式应用 指定多个的话，第一行tr的class为strip1，第二行为strip2，第三行为strip3.
                // 第四行以后又开始从strip1循环。。。 如果想指定成斑马条状，这里的class必须指定为2个。
                "stripeClasses": ['strip1', 'strip2', 'strip3'],
                // 自动列宽
                "autoWidth": true,
                // 是否表示 "processing" 加载中的信息，这个信息可以修改
                "processing": true,
                // 每次创建是否销毁以前的DataTable,默认false
                "destroy": false,
                // 控制表格各种信息的表示位置（比较复杂） 默认:lfrtip
                // 具体参考：https://datatables.net/reference/option/dom
                "dom": 'lrtip',
                "language": {
                    "processing": "DataTables is currently busy",
                    // 当前页显示多少条
                    "lengthMenu": "Display _MENU_ records",
                    // _START_（当前页的第一条的序号） ,_END_（当前页的最后一条的序号）,_TOTAL_（筛选后的总件数）,
                    // _MAX_(总件数),_PAGE_(当前页号),_PAGES_（总页数）
                    "info": "Showing page _PAGE_ of _PAGES_",
                    // 没有数据的显示（可选），如果没指定，会用zeroRecords的内容
                    "emptyTable": "No data available in table",
                    // 筛选后，没有数据的表示信息，注意emptyTable优先级更高
                    "zeroRecords": "No records to display",
                    // 千分位的符号，只对显示有效，默认就是","  一般不要改写
                    //"thousands": "'",
                    // 小数点位的符号，对输入解析有影响，默认就是"." 一般不要改写
                    //"decimal": "-",
                    // 翻页按钮文字控制
                    "paginate": {
                        "first": "First page",
                        "last": "Last page",
                        "next": "Next page",
                        "previous": "Previous page"
                    },
                    // Client-Side用，Server-Side不用这个属性
                    "loadingRecords": "Please wait - loading..."
                },
                // 默认是false
                // 如果设为true，将只渲染当前也的html，速度会很快，但是通过API就访问不到所有页的数据，有利有弊
                //"deferRender": false,
                // 服务器端处理方式
                "serverSide": true,
    
                // ajax选项 可以直接简单指定成请求的文件
                //"ajax": "data.json",
                // 也可以用对象来配置，更加灵活
                "ajax": {
                    // url可以直接指定远程的json文件，或是MVC的请求地址 /Controller/Action
                    url: "data.json",
                    type: 'POST',
                    // 传给服务器的数据，可以添加我们自己的查询参数
                    data: function (param) {
                        param.opportunityNO = $('#txtSearch').val();
                        return param;
                    },
                    //用于处理服务器端返回的数据。 dataSrc是DataTable特有的
                    dataSrc: function (myJson) {
                        if (myJson.timeout) {
                            return "";
                        }
                        return myJson;
                    }
                },
                //指定用于行ID的属性名 默认是：DT_RowId
                "rowId": 'staffId',
                // 列定义
                "columns": [            
                {
                    // data 可以是属性名，或嵌套属性（WORKTM1.ID）,数组ArrOne[,] 用中括号中的字符连接数组后返回。
                    "data": "WORKTM1",
                    // 这里的class会应用到td上面
                    "className": "dt-body-right",
                    // 列宽
                    "width": 40,
                    // 很灵活，描绘每个单元格
                    // data：当前cell的data，这个data和type有关
                    // type：filter,display,type,sort
                    // row:当前行数据
                    // https://datatables.net/reference/option/columns.render
                    "render": function (data, type, row, meta) {
                        return type === 'display' && data.length > 40 ?
                        '<span title="' + data + '">' + data.substr(0, 38) + '...</span>' : data;
    
                    },
                    // 是否可排序 默认值：true
                    "orderable": true,
                    // 指定当前列排序操作的时候，用哪一列（几列）的数据进行真正的排序（通常是隐藏的）
                    "orderData": [0, 1],
                    // 这个属性 和type属性相似，指定排序时候这一列该怎么转换数据,
                    //需要用到其他的插件 详细： https://datatables.net/plug-ins/sorting/
                    "orderDataType": "dom-text",
                    // 是否显示当前列 默认值：true
                    "visible": false,
                    // 是否允许搜索此列 默认值：true
                    "searchable": false,
                    //这个属性仅Client-Side有效， Server-Side在服务器端排序 
                    //主要用于排序和筛选，指定当前列作为什么类型进行解析
                    //内置值：date，num，num-fmt，html-num，html-num-fmt，html，string
                    // 还可以用其他插件提供的类型 ：详细： https://datatables.net/plug-ins/sorting/
                    // 有html开头的，都会讲html标签先移除后进行数据处理
                    "type": "html",
                    // 列头文字，如果没有指定thead，则会生成。如何指定了thead，则会覆盖当前列头文字
                    "title": "My column title",
                    // defaultContent:默认值，属性值为null或undefined就会用这个值
                    "defaultContent": "<i>Not set</i>",
                    // 单元格类型："th","td"
                    "cellType" : "td",
                    // 单元格创建完后的回调，可以作为render的补充
                    // cell:TD的dom
                    // cellData:原始的单元格数据，如何render中进行了格式化，用$(cell).html()来取格式化后的数据
                    // rowData:行数据
                    // row:行号
                    // col:列号
                    "createdCell": function (cell, cellData, rowData, row, col) {
                        if ( cellData < 1 ) {
                            $(td).css('color', 'red')
                        }
                    }
                },
                { "data": "WORKTM2", "className": "dt-body-right", "width": 40 },
                { "data": "WORKTM3", "className": "dt-body-right", "width": 40 },
                { "data": "WORKTM4", "className": "dt-body-right", "width": 40 },
                { "data": "RESTDAY1", "className": "dt-body-right", "width": 40 },
                { "data": "RESTDAY2", "className": "dt-body-right", "width": 40 },
                { "data": "RESTDAY3", "className": "dt-body-right", "width": 40 },
                { "data": "RESTDAY4", "className": "dt-body-right", "width": 40 },
                { "data": "RESTDAY5", "className": "dt-body-right", "width": 40 }
                ],
                // 和上面的columns类似，columns可以定义的属性，都可以在这里定义，
                // 另外增加targets属性用于指定列范围（可以多列）
                // 优先级：上面的columns高于columnDefs
                columnDefs: [
                {
                    targets: [0, 2],
                    render: function (data, type, row, meta) {
                        if (type === 'display') {
                            var ctemp = $(".dayinfo").children().eq(meta.col).attr("class");
                            var cname = ctemp ? ctemp : "";
                            var readonly = $(".dayinfo").children().eq(meta.col).attr("data-fixed") == "fixed" ? "readonly" : "";
                            return '<input type="input" class="form-control dt-body-center ' + cname + '" ' + readonly + ' value="' + data + '">';
                        }
                        return data;
                    },
                }],
                // 每一行创建完调用的函数
                "createdRow": function (row, data, dataIndex) {
                    // row : tr dom
                    // data: row data
                    // dataIndex:row data's index
                    if (data[4] == "A") {
                        $(row).addClass('important');
                    }
                },
                // 每一行被创建，但还没有被加载到document中，这个函数优先于createdRow
                // 个人觉得用createdRow更好
                "rowCallback": function (row, data, index) {
                    // row : tr dom
                    // data: row data
                    // index:row data's index
                    if ( data[4] == "A" ) {
                        $('td:eq(4)', row).html( '<b>A</b>' );
                    }
                },
                //thead被描画后调用
                "headerCallback": function (thead, data, start, end, display) {
                    //thead:dom， data:原始的datatable数据，display：当前显示排序好的datatable数据（有可能经过排序）
                    // start end ：当前dispaly数据的开始结束序号
                    $(thead).find('th').eq(0).html( 'Displaying '+(end-start)+' records' );
                },
                // tfoot被描画后调用，通常可用于计算合计值
                "footerCallback": function (tfoot, data, start, end, display) {
                    //tfoot:dom， data:原始的datatable数据，display：当前显示排序好的datatable数据（有可能经过排序）
                    // start end ：当前dispaly数据的开始结束序号
                    var api = this.api();
                    $( api.column( 5 ).footer() ).html(
                        api.column( 5 ).data().reduce( function ( a, b ) {
                            return a + b;
                        }, 0 )
                    );
                },
                // 初始化，描画都已经完成，常用于ajax
                "initComplete": function( settings, json ) {
                    $('div.loading').remove();
                },
                // 每次DataTable描画后都要调用，调用这个函数时，table可能没有描画完成，
                // 所以不要在里面操作table的dom，要操作dom应放在initComplete
                "drawCallback": function( settings ) {
                    var api = this.api();
     
                    // Output the data for the visible rows to the browser's console
                    console.log( api.rows( {page:'current'} ).data() );
                },
                // 这个函数可以改写数字的格式化方式
                // 默认DataTable用 language.thousands来解析数字，“，”
                "formatNumber": function ( toFormat ) {
                    return toFormat.toString().replace(
                      /\B(?=(\d{3})+(?!\d))/g, "'"
                    );
                }
            });
        });

# 5、服务器端的参数 #

// 发送到服务器端的数据
        // draw：计数器，返回数据的时候用这个值设定
        // start:开始记录（0 besed index）
        // length:每页条数
        // search[value]：检索文字
        // order[i][column]：int 排序列的序号 例如：2，代表第3列排序 i代表有几个排序，一个的话服务器端这样写“order[0][column]”
        // order[i][dir]：排序的方式"desc","asc"
        // 下面comuns中的i取值从0~columns.length，所有的columns信息都发送到了服务器
        // columns[i][data]：columns上定义的data属性值
        // columns[i][name]：columns上定义的name属性值
        // columns[i][searchable]：列能不能检索
        // columns[i][orderable]：列能不能排序
        // columns[i][search][value]：列的检索值 string
    
        // 服务器返回的数据
        // draw：和Request的draw设定成一样的值
        // recordsTotal：所有的总件数
        // recordsFiltered：筛选后的总件数
        // data：返回的数据
        //   每一行数据上面，可以包含这几个可选项
        //   DT_RowId：加在行上的ID值
        //   DT_RowClass：加在行上的Class
        //   DT_RowData：加在行上的额外数据（object）
        //   DT_RowAttr：加在行上的属性（object）
        // error:如果有错误，就设定这个值，没有错误，不要包含这个值

# 6、DataTable常用事件 #

//常用事件
        // init：初始化和数据都加载完成，和 initComplete配置等价
        $('#example')
        .on('init.dt', function () {
            console.log('Table initialisation complete: ' + new Date().getTime());
        })
        .dataTable();
    
        // error：处理数据出错 errMode必须为“none”，才会触发error事件
        $.fn.dataTable.ext.errMode = 'none'; // alert,throw,none, a function
        $('#example')
            .on('error.dt', function (e, settings, techNote, message) {
                console.log('An error has been reported by DataTables: ', message);
            })
            .DataTable();
    
        // xhr：ajax加载数据完成后调用，这时数据并没有被描画，等价于 ajax.dataSrc
        $('#example')
        .on('xhr.dt', function (e, settings, json, xhr) {
            for (var i = 0, ien = json.aaData.length ; i < ien ; i++) {
                json.aaData[i].sum = json.aaData[i].one + json.aaData[i].two;
            }
            // Note no return - manipulate the data directly in the JSON object.
        })
        .dataTable({
            ajax: "data.json"
        });

# 7、Datatable常用Api #

//全部参考 https://datatables.net/reference/api/
        // 1，获取API的方式
        // 注意 $(selector).dataTable()得到的是table的jquery对象
        // 而api对象只能通过：api.$(select) 返回查找到的jquery对象。
        $(selector).DataTable();
        $(selector).dataTable().api();
        new $.fn.dataTable.Api(selector);
    
        // 2，得到一个api对象
        var table = $('#example').DataTable();
    
        //3，描画 draw( [paging] ) 取值：true 全部重画，false 全部重画（保持当前的页面），
       // "page" 不重取数据，只描画当前页
        $('#myFilter').on('keyup', function () {
            table.search(this.value).draw();
        });
    
        // Sort by column 1 and then re-draw
        table.order([[1, 'asc']]).draw(false);
        table.page('next').draw('page');
    
        // data() 获取全表数据
        // Increment a counter for each row
        table.data().each(function (d) {
            d.counter++;
        });
    
        // 4，column().data() 获取列数据
        // cloumn的第一个参数 可以是序号，或jquery支持的选择器
        // cloumn的第二个参数 是一个 selector-modifier  对象，取值如下
        //{
        //    // DataTables core
        //    order:  'current',  // 'current', 'applied', 'index',  'original'
        //    page:   'all',      // 'all',     'current'
        //    search: 'none',     // 'none',    'applied', 'removed'
    
        //    // Extension - KeyTable (v2.1+) - cells only
        //    focused: undefined, // true, false, undefined
    
        //    // Extension - Select (v1.0+)
        //    selected: undefined // true, false, undefined
        //}
        table.column(3, { order: 'current' }).data();
    
        //5，row().data() 获取行数据
        $('#example tbody').on('click', 'tr', function () {
            console.log(table.row(this).data());
        });
    
        // 6，row().node() 获取行dom对象
        $(table.row('#row-4').node()).addClass('ready');
    
        // 7，row().remove(); 删除当前行
        table.row('#row-4').remove();
    
        // 8， row.add() 加一行数据
        // rows.add() 加多行数据
        table.row.add({id:"1",name:"li"});
    
        // 9， table().body() 获取tbody dom 对象 
        // table().header() 获取theader dom 对象 
        // table().footer() 获取tfooter dom 对象 
        // table().node() 获取table dom 对象 
        $(table.table().footer()).addClass('highlight');
    
        // 10，destroy() 销毁table true：连同html一起销毁
        table.destroy(false)
    
        // 11，on 绑定table的事件
        table.on('xhr', function (e, settings, json) {
            console.log('Ajax event occurred. Returned data: ', json);
        });
        // 12，page.len(10) 设置一页显示的条数
        $('#_10').on('click', function () {
            table.page.len(10).draw();
        });

# 8、其他 #

## 8.1   重新加载数据 ##

第二个参数为false的话，会保持当前的选中页。

vartable = $('#example').DataTable();
    
    table.ajax.reload( function( json ) {
    
        $('#myInput').val( json.lastInput );
    
    } , true);

## 8.2  改变url，再加载 ##

table.ajax.url( 'newData.json').load();

## 8.3  获取服务器返回的json数据 ##

vartable = $('#example').DataTable();
    
    table.on( 'xhr', function() {
    
        varjson = table.ajax.json();
    
        alert( json.data.length +' row(s) were loaded');
    
    } );

[http_www.cnblogs.com_xiashengwang_p_8087181.html]: http://www.cnblogs.com/xiashengwang/p/8087181.html
[https_www.datatables.net_manual_data]: https://www.datatables.net/manual/data/
[https_www.datatables.net_reference_option]: https://www.datatables.net/reference/option/