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

[
    {
        "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"
    }
]

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‘}
    ]
} );

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

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

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

 $(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、 "‘"
                );
            }
        });
    });

    // 发送到服务器端的数据
    // 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);

      }
    }
  }
}

    //常用事件
    // 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"
    });

    //全部参考 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();
    });

vartable = $(‘#example‘).DataTable();

table.ajax.reload( function( json ) {

    $(‘#myInput‘).val( json.lastInput );

} 、 true);

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

vartable = $(‘#example‘).DataTable();

table.on( ‘xhr‘、 function() {

    varjson = table.ajax.json();

    alert( json.data.length +‘ row(s) were loaded‘);

} );