datatables的基本用法

id	name	score
001	zhang	98
002	wang	99

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

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

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

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

配置参数

$(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 
                    '' + data.substr(0, 38) + '...' : 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": "not set",
                // 单元格类型："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( 'a' );
                }
            },
            //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 ) {
                $('p.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, "'"
                );
            }
        });
    });

服务器端的参数

// 发送到服务器端的数据
    // 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:如果有错误，就设定这个值，没有错误，不要包含这个值

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"
    });

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();
    });

转载自 https://www.cnblogs.com/xiashengwang/p/8087181.html

如对本文有疑问， 点击进行留言回复！！