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

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

} );

巴特西

Jquery DataTable基本使用