jquery datatable的详细用法

  • By
  • JS
  • 2020-05-14 15:09:34

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


<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>


2,DataTable支持的数据类型

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 自定义实例(本质和2.2一样) 


functionEmployee(name, position, salary, office) {
    this.name = name;
    this.position = position;
    this.salary = salary;
    this._office = office;
    this.office = function() {
        returnthis._office;
    }
};

$('#example').DataTable({
    data: [
        newEmployee("Tiger Nixon", "System Architect", "$3,120", "Edinburgh"),
        newEmployee("Garrett Winters", "Director", "$5,300", "Edinburgh")
    ],
    columns: [
        { data: 'name' },
        { data: 'salary' },
        { data: 'office' },
        { data: 'position' }
    ]
});


2.4 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/


$(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:如果有错误,就设定这个值,没有错误,不要包含这个值


例子:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using AppBlock;
using System.Data.SqlClient;
using Newtonsoft.Json;

namespace alfest.Ajax
{
  public partial class Category : System.Web.UI.Page
  {
    string mode, option, user, limit, start, searchKey, orderByColumn, orderByDir, estMstSrno, pnlsrno, draw, jsonString;
    CommonClass cmnCls = new CommonClass();
    protected void Page_Load(object sender, EventArgs e)
    {
      mode = Request.QueryString["mode"] == null ? "" : Request.QueryString["mode"].ToString();
      option = Request.QueryString["option"] == null ? "" : Request.QueryString["option"].ToString();
      limit = Request.QueryString["length"] == null ? "" : Request.QueryString["length"].ToString();
      start = Request.QueryString["start"] == null ? "" : Request.QueryString["start"].ToString();
      user = Request.QueryString["user"] == null ? "" : Request.QueryString["user"].ToString();
      searchKey = Request.QueryString["search[value]"] == null ? "" : Request.QueryString["search[value]"].ToString();
      orderByColumn = Request.QueryString["order[0][column]"] == null ? "" : Request.QueryString["order[0][column]"].ToString();
      orderByDir = Request.QueryString["order[0][dir]"] == null ? "" : Request.QueryString["order[0][dir]"].ToString();
      estMstSrno = Request.QueryString["estMstSrno"] == null ? "" : Request.QueryString["estMstSrno"].ToString();
      pnlsrno = Request.QueryString["pnlsrno"] == null ? "" : Request.QueryString["pnlsrno"].ToString();
      draw = Request.QueryString["draw"] == null ? "" : Request.QueryString["draw"].ToString();

      if (option == "GetAllAdminCategory")
      {

       // Cls_Category CatgObj = new Cls_Category();
       // CatgObj.orderColumn = Convert.ToInt32(orderByColumn);
       // CatgObj.limit = Convert.ToInt32(limit);
       // CatgObj.orderDir = orderByDir;
       // CatgObj.start = Convert.ToInt32(start);
       // CatgObj.searchKey = searchKey;
       // CatgObj.option = "GetAllAdminCategory";

      // or user your own method to get data (just fill the dataset)

      //  DataSet ds = cmnCls.PRC_category(CatgObj);

        dynamic newtonresult = new
          {
            status = "success",
            draw = Convert.ToInt32(draw == "" ? "0" : draw),
            recordsTotal = ds.Tables[1].Rows[0][0],
            recordsFiltered = ds.Tables[1].Rows[0][0],
            data = ds.Tables[0]
          };
        jsonString = JsonConvert.SerializeObject(newtonresult);

        Response.Clear();
        Response.ContentType = "application/json";
        Response.Write(jsonString);

      }
    }
  }
}




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