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();`

它同样可以写成这样：

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在一个上下文中每个表相同的.例如：

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.在本例中,我们创建一个选择元素在表中的每一列的页脚单元,它包含的数据列,将用于搜索表。

var table = $('#example').DataTable();

table.columns().flatten().each( function ( colIdx ) {

// Create the select list and search operation

var 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 list

table

.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()等选项.