datatables数据表入门


备注

主要特点

  • 可变长度分页
  • 即时过滤
  • 具有数据类型检测的多列排序
  • 智能处理色谱柱宽度
  • 显示几乎所有数据源的数据
  • DOM,JavaScript数组,Ajax文件和服务器端处理
  • 表视口的滚动选项
  • 完全国际化
  • jQuery UI ThemeRoller支持
  • 各种各样的插件
  • 免费

资源

版本

发行说明发布日期
1.9及更早版本(遗产) https://datatables.net/forums/discussion/8332/datatables-1-9-0-released 2014年2月1日
1.10及以后 https://datatables.net/new/1.10 2015年8月12日

DataTables API

DataTables附带了一个广泛的API,用于操作或获取有关页面上DataTable的信息。

可以通过3种方式访问​​API:

var table = $('#tableid').DataTable(); //DataTable() returns an API instance immediately
var table = $('#tableid').dataTable().api(); //dataTable() returns a jQuery object
var table = new $.fn.dataTable.Api('#tableid');
 

设置对象后,可以调用该对象上的任何API函数。

var columns = table.columns();
 

更复杂的示例是表中添加一些行

table.rows.add( [ {
        "name":       "John Doe",
        "employee_id":   "15135",
        "department":     "development",
    }, {
        "name":       "Jane Smith",
        "employee_id":   "57432",
        "department":     "quality assurance",
    } ] )
    .draw();
 

可以在此处找到API函数的完整列表。

功能启用/禁用(DataTables选项)

DataTables能够启用或禁用其许多功能,例如分页或搜索。要选择这些选项,只需在初始化中选择它们:

$(document).ready(function() {
    $('#tableid').DataTable( {
        "paging":   false, //Turn off paging, all records on one page
        "ordering": false, //Turn off ordering of records
        "info":     false  //Turn off table information
    } );
} );
 

请注意,选项名称周围的引号是可选的:

paging: false,
ordering: false,
info: false
 

也完全有效。

可以在此处找到完整的选项列表,以及每个选项的使用说明。

初始化表时,这些选项只能设置一次。但是,您可以通过添加以下内容来解决此限制:

 destroy: true
 

初始化最小的DataTables:

下面的代码将使用tableid 的id将表转换为DataTable,并返回DataTables API实例:

$(document).ready(function() {
    $('#tableid').DataTable();
});
 

将此与下面的代码进行比较,后者将表格转换为DataTable,但不会返回DataTables API实例:

$(document).ready(function() {
    $('#tableid').dataTable();
});
 

有关可以使用DataTables API实例执行的操作的更多详细信息,请参阅DataTables API文档部分。

安装

需要在index.html 包含JavaScriptCSS 文件。您可以使用以下路径中可用的CDN文件来执行此操作:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
 

或者通过下载单个本地文件并自己托管它们。要获得所需的JavaScriptCSS 文件的综合包,请访问DataTables 下载构建器 ,该构建器允许您选择所需的功能并将它们压缩到单个包中(或提供单个文件)。按照页面底部显示的顺序包含这些内容。

DataTables依赖于jQuery ,所以在jquery.dataTables.js 之前包含它:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 

DataTables也可通过NPM获得

npm install datatables.net    # Core library
npm install datatables.net-dt # Styling
 

和鲍尔

bower install --save datatables.net
bower install --save datatables.net-dt