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