datatables .fnDraw is not a function
Datatables中文网:http://dt.thxopen.com/manual/api.html
API
DataTables 提供的可以操作表格数据的API，有下面六个关键部分:
- 表格（tables）
- 列（Columns）
- 行（Rows）
- 单元格（Cells）
- 核心方法（Core）
- 工具类（Utilities）
Datatables完整的API方法列表，请参考API
术语(Terminology)
为了API文档的简约型，下面定义了一些术语:
- 实例（Instance） --就是指DataTables初始化后的表格(i.e. 是
new Api()的结果). - 结果集（Result set） --本质上就像一个jQuery的数组，拥有和数组相同的方法(
sort()API和push()API)。 - 环境、容器、上下文（Context） --这个解释比较模糊，简单来说就是DataTables在运行是时所处环境.
API调用(Accessing the API)
一个DataTables实例可以通过下面三个方法实现:
- $( selector ).DataTable();
- $( selector ).dataTable().api();
- new $.fn.dataTable.Api( selector );
主要是要注意$( selector ).DataTable()与$( selector ).dataTable()两者之间的区别.前者返回一个datatable中API实例,而后者返回一个jQuery对象.一个api()方法添加到jQuery对象,这样你可以很轻松地访问API. 但是jQuery对象可以用于操纵表节点,与任何其他jQuery实例一样(像addClass()).
更新提示：
Datatables API的V1.9及更早的版本使用$().dataTable().method()进行访问,这样被用于通过datatables API方法扩展jQuery对象.
旧的API仍旧可用于Datatables V1.10,向后兼容,但是新的API(见左图)现在是首选,因为它提供了更大的灵活性和功能的改善.
连锁(Chaining)
你可以像使用jquery那样连锁，
|
1
2
|
var table = $('#example').DataTable();table.search( 'Fiona' ).draw(); |
它同样可以写成这样：
|
1
2
3
|
var table = $('#example').DataTable();table.search( 'Fiona' );table.draw(); |
在这种情况下的功能是相同的,但是连锁可以让代码更加简洁和易懂.
Datatables API从jQuery的链接中分离的方法是Datatables中利用嵌套的方法和属性.例如ajax.json()方法允许您从一个Ajax调用datatable中访问到最新 的JSON数据--在这种情况下,JSON()方法是Ajax特性的一个子类属性.同样的,columns()方法(以及其他数据操作方法)提供自己的链接子方法.例如 columns().visible()方法.这允许API非常富有表现力的依据你如何访问数据,提供有关之前被定义的方法.
API的所有顶级方法将永远可用,在各级嵌套的API.例如draw()是一个顶级的方法,但它可以被定义，当一行从表中被移除以后:table.row( selector ).remove().draw();
请注意,并不是所有的方法将返回一个API实例链接.有时候,返回API实例链接不太合适,像cell().node()得到一个td / th对象.API参考文档包含每个方法的全部细节以及它将返回什么.
多个表(Multiple tables)
Datatables中API可以引用多个表的上下文实例.API在一个上下文中每个表相同的.例如：
|
1
2
3
|
var tables = $('.dataTable').DataTable();tables.page( 'next' ).draw( false ); |
这段代码通过类dataTable将选择文档中的所有表,同时跳转下一页的数据显示（使用page(）方法）.
同样的，如果需要一个API实例能引用一个单独的表,仅仅通过改变jQuery选择器创建API实例:$('#myTable').DataTable(); 将与一个表创建一个API实例的上下文.
复数/单数(Plural / Singular)
使用API时,你会发现这些方法充分利用复数和单数的术语.虽然这是在一个API相对罕见的.它是为了反映你访问数据表的方式,例如rows().data()方法,将返回一个API实例包涵所选择行的数据结果集（即像一个数组）.
而row().data()方法只返回这一行的数据.这使得使用API更加直观,你总是会得到你所期望的结果.
我们需要明确的是,在英语(国际用户):
-Singular===1
-Plural>1
所以,如果你想使用一个选择器的方法来选择多个项,使用复数形式的方法。如果你想选择一个特定的项目,使用单数形式.
例子-列过滤器(Example - column filter)
API参考文档包含一个例子对于每个API方法,以及它的详细描述,它返回什么,将接受什么参数。让我们形成上述详细概念,逐行例证如何使用Datatables API.在本例中,我们创建一个选择元素在表中的每一列的页脚单元,它包含的数据列,将用于搜索表。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var table = $('#example').DataTable();table.columns().flatten().each( function ( colIdx ) {// Create the select list and search operationvar select = $('<select />') .appendTo( table.column(colIdx).footer() ) .on( 'change', function () { table .column( colIdx ) .search( $(this).val() ) .draw(); } );// Get the search data for the first column and add to the select listtable .column( colIdx ) .cache( 'search' ) .sort() .unique() .each( function ( d ) { select.append( $('<option value="'+d+'">'+d+'</option>') ); } ); |
- 第1行：根据表的上下文中得到一个Datatables API实例对象
- 第3行：用方法columns()查找表中的所有列,flatten()方法是用来减少列的二维数组返回columns()一维数组的列索引,实用的方法each()是用于每一个选中行执行一个动作.
- 第5行：为列选择元素的创建过滤器.
- 第7行：使用column().footer()方法在页脚单元插入的一个列元素.
- 第9行：当select元素的值改变时,用方法 jQuery on()执行一个动作--在这种情况下搜索表.
- 第10-13行：用column().search()方法搜索队列,使用draw()方法链接来更新表的显示结果.
- 第17-19行：从列中获取数据,Datatables使用column().cache()方法搜索表.
- 第20-21行：实用的方法sort()和unique()被用于减少数据，使得数据成为一个良好有序列表,如你想呈现给终端用户的一样.
- 第22-24行：一个搜索词选项添加到选择列表,可以使用了.
如你所见，DataTables API非常灵活,提供了一个广泛的选项来访问和操纵表,请参阅API参考文档的完整列表的方法,它们都是可用的.此外,插件如Editor可以用自定义扩展API方法,如row().edit()和cell().edit()等选项.
