dataTaDataTable 详细教程
DataTable 选项说明
-
特性
jQueryUI:true/false:控制是否使用jqueryUI样式，需要引入jQueryUI的CSSautoWidth:true/false:控制Datatables是否自适应宽度,建议宽度可以确定的时候尽量自行确定，自适应宽度会导致表格加载速度变慢info:true/false:控制是否显示表格左下角的信息lengthChange:true/false:是否允许用户改变表格每页显示的记录数ordering:true/false:是否允许Datatables开启排序paging:true/false:是否开启本地分页processing:true/false:是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)scrollX:数值:设置水平滚动scrollY:数值:设置垂直滚动scrollCollapse:true/false:是否开启垂直滚动条serverSide:true/false:是否开启服务器模式deferRender:true/false:d控制Datatables的延迟渲染，可以提高初始化的速度
-
数据
ajax:异步数据:增加或修改通过Ajax提交到服务端的请求数据如果当做一个对象
data:本地数据:用来显示表格的数据data的数据可以是二维数组，也可以是对象数组
- 二维数组
$('#example').dataTable( { "data": [ [ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ], [ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ], // ... ] } ); - 对象数组
$('#example').dataTable( { "data": [ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": 5421 }, { "name": "Garrett Winters", "position": "Director", "salary": "5300", "start_date": "2011/07/25", "office": "Edinburgh", "extn": "8422" }, // ... ], "columns": [ { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "extn" }, { "data": "start_date" }, { "data": "salary" } ] } );
- 二维数组
-
配置
deferLoading:Integer/Array:延迟请求加载服务端的数据，直到表格第二次绘制当给定一个整数，表示延迟加载，并且告诉DT有多少条数据在完整的结果集里
$('#example').DataTable( { "serverSide": true, "ajax": "scripts/server_processing.php",//表格中总共显示57条记录 "deferLoading": 57 } );当给定一个数组，也表示延迟加载，第一个元素表示告诉dataTable多有少过滤后的记录数，第二个元素表示告诉DT总共有多少记录
$('#example').dataTable( { "serverSide": true, "ajax": "scripts/server_processing.php", "deferLoading": [ 57, 100 ],//过滤后57条记录，100条不过滤 "search": { "search": "my_filter" } } );destroy:true/false:初始化一个新的Datatables，如果已经存在，则销毁（配置和数据），成为一个全新的Datatables实例$('#example').dataTable({ "srollY": "200px" }); // 先用上面的初始化Datatables，然后在用下面的初始化Datatables，滚动条会消失 $('#example').dataTable({ "filter": false, "destroy": true });displayStart:数值:初始化显示的时候从第几条数据开始显示(一开始显示第几页)lengthMenu:数组:定义在每页显示记录数的select中显示的选项$('#example').DataTable( { "lengthMenu": [ 10, 25, 50, 75, 100 ] } );orderCellsTop:true/false/default/:允许控制 DataTables 唯一的单元格来找到单个的列附加默认的排序监听器。 这个在复杂表头的应用中非常有用orderClasses:true/false:高亮显示表格中排序的列需要注意的是，特别是在低版本的浏览器下，一页显示很多数据，然后需要操作大批量的dom元素，这个特性会影响性能。 因此，当你使用的是低版本的浏览器或者有大量数据的时候，你可以使用这个选项来关闭此特性。
pageLength:数值: 改变初始化页长度orderMulti:true/false: 多列排序控制当排序功能（
ordering为true ）打开的时候，DataTables 默认是允许用户按住shift点击表头，多列排序。 虽然这个操作对用户来说是比较有用的，但同时也增加了表格处理数据的时间。因此，可以通过此选项来关闭多列排序的功能。order:[[列索引, 'asc']，[列索引, 'desc'],.......]: 表格在初始化的时候的排序renderer:特定字符串: 显示组件渲染器类型DataTables提供了扩展的能力，DataTables提供集成选项来支持目前几种流行的CSS框架，比如 Bootstrap ，Foundation 和 jQuery UI。
此参数可以告诉 DataTables 使用那种渲染器，前提是指定的渲染器是已经存在的，否则使用默认的渲染器。可以通过插件添加其他渲染器。
DataTables当前支持两种不同渲染器类型：
header头单元格渲染器pageButton分页按钮
$('#example').DataTable( { renderer: "bootstrap" } ); $('#example').DataTable( { renderer: { "header": "jqueryui", "pageButton": "bootstrap" } } );rowId:数值: 给每行（tr）自动绑定上唯一id示例数据
{ data:[ {"id":341,"name":"张三","DT_RowId":341}, {"id":"a","name":"李四","DT_RowId":"a"} ] } $('#myTable').DataTable( { ajax: '/api/staff' rowId: 'id' } );最后效果
<tr id="341"> <td>341</td> <td>张三</td> </tr> <tr id="a"> <td>a</td> <td>李四</td> </tr>scrollCollapse:true/false:当显示更少的记录时，是否允许表格减少高度pagingType:特定字符串: 改变分页按钮显示样式DataTables默认情况下会在表格下面显示一个分页控件（可以使用dom选项和额外的css更改其位置），用户可以使用这个导航按钮来操作表格翻页。
number只显示数字simple只有上一页和下一页两个按钮simple_numbers上一页和下一页两个按钮，加上页数按钮full首页，尾页，上一页和下一页四个按钮full_numbers首页，尾页，上一页和下一页四个按钮,加上数字按钮first_last_numbers首页，尾页两个按钮,加上数字按钮
stripeClasses:特定字符串数组:给表格行设置条纹样式默认情况下，Datatables就已经把行和行区分开了，使用的是
$.fn.dataTable.ext.classes.stripe*选项，值为odd和evenvar table = $('#example').DataTable( { "stripeClasses": [ 'strip1', 'strip2', 'strip3' ] } );stateDuration:true/false:状态保存有效期在有效期时间内，状态一直有效，过了这个时间之后，恢复到默认状态。 这个选项还可以用来指明是使用
localStorage还是sessionStorage，当为-1的时候使用sessionStorage，当为0或者更大的数字的时候使用 localStoragesessionStorage仅保留当前会话的数据（ie.当前的浏览器窗口）请注意，该值以秒为单位。0 是一个特殊的值，表示可以无限期的储存和检索已经存在的对象。
$('#example').DataTable( { "stateSave": true, "stateDuration": 60 * 60 * 24 } );
-
搜索
search:true/false:设置一个全局的过滤条件caseInsensitive:true/false:大小写敏感regex:true/false:是否支持正则匹配regex:true/false:允许或者禁止DataTables的只能过滤（搜索）功能
searchDelay:数值:设置搜索延迟时间searchCols:数组:给每一列定义一个初始的搜索条件和
search.search类似，只是这个不是全局的， 而是针对于某个列，这个参数接受一个对象数组，对象里有两个属性search和escapeRegex。search代表过滤的条件，escapeRegex代表是否支持正则，这个参数是可选的。需要注意的是，这个对象数组需要和列数匹配。
var table = $('#example').DataTable( { "searchCols": [ null, //第二列初始化过滤条件为 My filter { "search": "My filter" }, null, //第四列初始化过滤条件为 使用正则表达是 ^[0-9] 来过滤 { "search": "^[0-9]", "escapeRegex": false } ] } );
-
布局：DOM
DataTable dom 元素介绍
l:代表 length，左上角的改变每页显示条数控件f:代表 filtering，右上角的过滤搜索框控件t:代表 table，表格本身i:代表 info，左下角的表格信息显示控件p:代表 pagination，右下角的分页控件r:代表 processing，表格中间的数据加载等待提示框控件B:代表 button，Datatables可以提供的按钮控件，默认显示在左上角
DOM 定位
< >:这个尖括号就代表 html标签里的 <div></div><"className" >:代表添加了class的div <div class="className"></div><"#id" >:代表添加了id的div < <div id="id"></div>
DOM 实例
var table = $("#example").DataTable({ "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>" });最终显示为这样
< div id="example_wrapper" class="dataTables_wrapper form-inline"> <div class="row"> <div class="col-sm-6"> <div class="dataTables_length" id="example_length"> <label><select name="example_length" aria-controls="example" class="form-control input-sm"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> records per page</label> </div> </div> <div class="col-sm-6"> <div id="example_filter" class="dataTables_filter"> <label>Search:<input type="search" class="form-control input-sm" placeholder="" aria-controls="example"/></label> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <table id="example" class="table table-striped table-bordered dataTable" role="grid" aria-describedby="example_info" style="width: 1304px;"> <thead> <tr role="row"> <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label=": activate to sort column descending" aria-sort="ascending" style="width: 27px;"></th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="序号: activate to sort column ascending" style="width: 77px;">序号 </th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="标题: activate to sort column ascending" style="width: 570px;">标题 </th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="连接: activate to sort column ascending" style="width: 481px;">连接 </th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td class="sorting_1">1</td> <td>1</td> <td><a href="Online Program knowledge share and study platform" target="_blank">Online Program knowledge share and study platform</a></td> <td>http://www.gbtags.com/gb/index.htm</td> </tr> <tr role="row" class="even"> <td class="sorting_1">2</td> <td>2</td> <td><a href="Share Code Gbtags" target="_blank">Share Code Gbtags</a></td> <td>http://www.gbtags.com/gb/listcodereplay.htm</td> </tr> <tr role="row" class="odd"> <td class="sorting_1">3</td> <td>3</td> <td><a href="Online live Gbtags" target="_blank">Online live Gbtags</a></td> <td>http://www.gbtags.com/gb/gbliveclass.htm</td> </tr> </tbody> <tfoot> <tr> <th rowspan="1" colspan="1"></th> <th rowspan="1" colspan="1">序号</th> <th rowspan="1" colspan="1">标题</th> <th rowspan="1" colspan="1">连接</th> </tr> </tfoot> </table> </div> </div> <div class="row"> <div class="col-sm-5"> <div class="dataTables_info" id="example_info" role="status" aria-live="polite"> Showing 1 to 3 of 4 entries </div> </div> <div class="col-sm-7"> <div class="dataTables_paginate paging_simple_numbers" id="example_paginate"> <ul class="pagination"> <li class="paginate_button previous disabled" aria-controls="example" tabindex="0" id="example_previous"><a href="#">Previous</a></li> <li class="paginate_button active" aria-controls="example" tabindex="0"><a href="#">1</a></li> <li class="paginate_button " aria-controls="example" tabindex="0"><a href="#">2</a></li> <li class="paginate_button next" aria-controls="example" tabindex="0" id="example_next"><a href="#">Next</a></li> </ul> </div> </div> </div> </div> -
列
columnDefs:设置列定义初始化属性和
columns参数很像，这个参数允许你给指定列设置选项，应用到一个或这多个列。而不像columns需要每列都要定义 这个参数是一个列定义对象数组，通过使用columnDefs.targets选项，告诉Datatables是定义的是那一列，他可以是下列情况：- 0或者正整数-列从左到右是从0开始
- 一个负数-列从右到左的索引(-1代表最后一列)
- 一个字符串-将字符串和类名匹配列
- 字符串"_all"-所有列
- 另外，
targets可以同时指定多列，接受一个数组（比如 targets: [ -1, -2 ] ）
$('#example').dataTable( { "columnDefs": [ { "targets": 0, "searchable": false //第一列禁止参与搜索 } ] } ); $('#example').dataTable( { "columnDefs": [ { "targets": [ 0, 2 ], "orderable": false //第一三列不能排序 } ] } ); $('#example').dataTable( { "columnDefs": [ { "targets": 'nosort', "orderable": false //列包含‘nosort’列名的不排序 } ] } );columns:设置列特殊的初始化属性在初始化的时候可以使用本参数来定义列
data::设置列的数据源，即如何从整个Table的数据源(object / array)中获得name::给列设置一个描述名称当时使用 DataTables API 时，你也许希望能够处理各个列（比如总计一列的数字总和），DataTables 有 两种基本的方法来标记列：
- 列索引（当表格初始化的时候索引会自动分配）
- 使用名称标记（当你使用 columns.name 参数的时候
使用
columns.name配置，可以使 API 操作列变得非常方便。比如访问一列的数据，你可以这样使用table.column( 'location:name' ).data()这里有两个关键点：location是标准前缀，用来告诉DataTables使用名称来操作列而不是索引:name追加冒号和具体的名称表明DataTables应该使用 name 去做选择器操作
$('#example').DataTable( { "columnDefs": [ { "name": "engine", "targets": 0 }, { "name": "browser", "targets": 1 }, { "name": "platform", "targets": 2 }, { "name": "version", "targets": 3 }, { "name": "grade", "targets": 4 } ] } ); $('#example').DataTable( { "columns": [ { "name": "engine" }, { "name": "browser" }, { "name": "platform" }, { "name": "version" }, { "name": "grade" } ] } );orderable:true/false:开启/禁用这列是否排序title:true/false:设置列的标题searchable:true/false:该列是否可搜索visiable:true/false:允许或者禁止列的显示width:true/false:设定列宽orderSequence:[ 'asc', 'desc' ]:设置列的点击排序顺序$('#example').DataTable( { "columns": [ null, { "orderSequence": [ "asc" ] }, { "orderSequence": [ "desc", "asc", "asc" ] }, { "orderSequence": [ "desc" ] }, null ] } ); $('#example').DataTable( { "columnDefs": [ { "orderSequence": [ "asc" ], "targets": [ 1 ] }, { "orderSequence": [ "desc", "asc", "asc" ], "targets": [ 2 ] }, { "orderSequence": [ "desc" ], "targets": [ 3 ] } ] } );defaultContent:自定义字符串:设定该列的默认、静态的内容className:自定义字符串:给列中每个单元格指定一个或多个class$('#example').DataTable( { "columnDefs": [ { className: "my_class", "targets": [ 0 ] } ] } ); $('#example').DataTable( { "columns": [ { className: "my_class my_class2" }, null, null, null, null ] } );createdCell:自定义字符串:单元格创建回调以允许操作DOMfunction createdCell( cell, cellData, rowData, rowIndex, colIndex )参数 描述 cell 已经创建的 td 节点 cellData 单元格的数据,如果你使用了 columns.render去修改数据，使用$(cell).html()得到渲染后的数据。这里的数据是来自数据源里没有修改过的原始数据rowData 整行的数据对象，可能是object或者array rowIndex DataTables内部的行索引 colIndex DataTables内部的列索引 cellData 已经创建的 td 节点 cellData 已经创建的 td 节点 $('#example').DataTable( { "columnDefs": [ { "targets": 3, "createdCell": function (td, cellData, rowData, row, col) { if ( cellData < 1 ) { $(td).css('color', 'red') } } } ] } );orderDataType:自定义字符串:给列分配实时DOM排序类型$('#example').DataTable( { "columns": [ null, null, { "orderDataType": "dom-text" },//按照text排序 { "orderDataType": "dom-text", "type": "numeric" }, { "orderDataType": "dom-select" }, //按照select排序 { "orderDataType": "dom-checkbox" } //按照checkbox排序 ] } );render::渲染(处理)数据显示在表格中function render( data, type, row, meta )
参数 描述 data 当前cell的值（基于 columns.data）type 数据类型 - 有这些值：filter、display、type、sort row 整个row的数据（不基于 columns.dataOption ） meta 从 1.10.1版开始: 一个对象包含了单元格的附加信息. 对象包含如下属性: row:被请求的单元格行的索引col: 被请求的单元格列的索引settings:DataTables.Settings
首列添加checkbox
var table = $("#tableid").DataTable({ ajax: { url: "data.json", type: "POST" }, columns: [{ data: null, title: "" }, { data: "name", title: "名称" }, { data: "age", title: "年龄" }], columnDefs: [{ // 指定第一列，从0开始，0表示第一列，1表示第二列…… targets: 0, render: function(data, type, row, meta) { return '' } }] });
-
回调函数
footerCallback:tfoot显示回调方法一个标准的表格分为thead，tbody和tfoot，一般我们可能只使用了thead和tbody，在开发过程中偶尔也会在表头做一些特殊处理，DataTables 提供了表头的回调处理 基本语法：
function footerCallback( tfoot, data, start, end, display )
参数 描述 tfoot table的表脚 data table的所有数据对象 star 当前表格中显示的数据的第一条记录索引 end 当前表格中显示的数据的最后一条记录索引 display 使用reduce()方法实现合计功能
$('#example').dataTable( { "footerCallback": function( tfoot, data, start, end, display ) { var api = this.api(); $( api.column( 5 ).footer() ).html( api.column( 5 ).data().reduce( function ( a, b ) { return a + b; } ) ); } } );drawCallback:Datatables每次重绘后执行的方法function drawCallback( settings )
参数 描述 settingst Datatables的设置对象 $('#example').dataTable( { "drawCallback": function( settings ) { alert( '表格重绘了' ); } } ); $('#example').dataTable( { "drawCallback": function( settings ) { var api = this.api(); // 输出当前页的数据到浏览器控制台 console.log( api.rows( {page:'current'} ).data() ); } } );createdRow:tr元素被创建时候的回调函数function createdRow( row, data, dataIndex )
参数 描述 row 已经被创建的tr元素 data 包含这行的数据对象 dataIndex Datatables内部存储的数据索引 $('#example').dataTable( { "createdRow": function( row, data, dataIndex ) { if ( data[4] == "A" ) { $(row).addClass( 'important' ); } } } );formatNumber: 数字格式化function ( toFormat )
参数 描述 toFormat 被格式化的数据 $('#example').DataTable( { "formatNumber": function ( toFormat ) { //使用正则表达式匹配，替换数字 return toFormat.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "'"); }; } );initComplete: 当表格完成加载绘制完成后执行此方法。function initComplete( settings, json )
参数 描述 settings datatables的设置对象 json 如果使用ajax选项来获取数据，则得到服务器返回的数据，否则是 undefined $('#example').dataTable( { "initComplete": function(settings, json) { alert( 'DataTables has finished its initialisation.' ); } } );rowCallback: 行绘制回调函数。这个回调一般用来给行添加 class 名称，或者直接操作 TR 元素，但请注意，初始化操作中，
createdRow操作行的效率要更高function( row, data, index )
参数 描述 row 当前行对象 data 本行的原始数据 index 本行索引 //高亮显示单元格值为A的（对象类型数据源） $('#example').DataTable( { "rowCallback": function( row, data, index ) { if ( data.grade == "A" ) { $('td:eq(4)', row).html( 'A' ); } } } ); //高亮显示单元格值为A的（数组类型数据源） $('#example').DataTable( { "rowCallback": function( row, data, index ) { if ( data[4] == "A" ) { $('td:eq(4)', row).html( 'A' ); } } } );
