Jquery DataTable基本使用
原文:https://www.cnblogs.com/xiashengwang/p/8087181.html
1、首先需要引用下面两个文件
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
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');
} );
例：
{% extends 'starter.html' %} {% block self_title %} <title>补票明细</title> {% endblock %} {% block self_css %} <style> th { width: auto; white-space: nowrap; {#overflow: visible;#} word-break: keep-all; text-align: center; } td { width: auto; white-space: nowrap; {#overflow: visible;#} word-break: keep-all; text-align: center; } </style> {% endblock %} {% block self_body %} <div class="col-md-10 display" style="width: 83%"> <table class="table table-condensed table-hover" style="margin-bottom: 0px" id="id_td"> <thead> <tr> {# <th>序号</th>#} <th>乘务组</th> {# <th>票据</th>#} <th>票号</th> <th>上车站</th> <th>下车站</th> <th>车次</th> <th>乘车日期</th> {# <th>全车次</th>#} <th>补票时间</th> <th>状态</th> <th>票来源</th> <th>支付</th> <th>票种</th> <th>席别</th> {# <th>铺别</th>#} <th>事由</th> <th>票价</th> <th>车厢</th> <th>席位</th> {# <th>原票号</th>#} <th>原车次</th> <th>原席别</th> {# <th>原铺</th>#} <th>原到站</th> {# <th>客票申请号</th>#} <th>证件号</th> {# <th>人数</th>#} <th>结账日期</th> </tr> </thead> <tbody> {% for bill in page_queryset %} <tr> {# <td>{{ forloop.counter|add:id_count }}</td>#} <td>{{ bill.crew_id }}</td> {# <td>{{ bill.bill }}</td>#} <td>{{ bill.ticket_id }}</td> <td>{{ bill.start_site_id }}</td> <td>{{ bill.end_site_id }}</td> <td>{{ bill.train_id }}</td> <td>{{ bill.take_train_date }}</td> {# <td>{{ bill.r_train_id }}</td>#} <td>{{ bill.sale_ticket_date }}</td> <td>{{ bill.state }}</td> <td>{{ bill.way }}</td> <td>{{ bill.payment }}</td> <td>{{ bill.ticket_type }}</td> <td>{{ bill.seat_id }}</td> {# <td>{{ bill.SleepID }}</td>#} <td>{{ bill.reason }}</td> <td>{{ bill.total_price }}</td> <td>{{ bill.car_num }}</td> <td>{{ bill.seat_num }}</td> {# <td>{{ bill.old_ticket_id }}</td>#} <td>{{ bill.OldTrainID }}</td> <td>{{ bill.old_seat_id }}</td> {# <td>{{ bill.OldSleepID }}</td>#} <td>{{ bill.old_end_site_id }}</td> {# <td>{{ bill.TicketApplication }}</td>#} <td>{{ bill.card_num }}</td> {# <td>{{ bill.people_num }}</td>#} <td>{{ bill.closing_date }}</td> </tr> {% endfor %} </tbody> </table> {{ page_obj.page_html|safe }} </div> {% endblock %} {% block self_script %} <script> $(document).ready(function () { $('#id_td').DataTable({ {#"sScrollX" : 820,#} 'aLengthMenu': [20, 40, 60], 'iDisplayLength': 20, 'bAutoWidth': false, oLanguage: { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": {"sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页"}, "oAria": {"sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列"} } }); }); </script> {% endblock %}
