如何在 Chrome 开发者工具中使用 jQuery DataTables API？

Question

我正在尝试了解 DataTables API 的工作原理。因此，我想在 Chrome 开发工具中执行一些简单的调用并实时查看结果。

假设您有一个带有标题 Foo 和 Bar 的简单表格：

---------
|Foo|Bar|
---------
|1  |a  |
---------
|2  |b  |
---------

在 Chrome 开发工具中，我想执行以下操作：

var table = $('.datatable').DataTable();
table.search('a').draw();

之后应该只出现第一行。但是，这不起作用。我也尝试使用$('.datatable').dataTable().api(); 而不是$('.datatable').DataTable();，但仍然无法正常工作。知道如何实现吗？

Answer 1

您必须单独注入每个脚本，初始化数据表，然后您可以使用$_ 作为数据表 API 的参考：

1. 注入 jQuery ：

   var s = document.createElement('script');
   s.src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
   document.getElementsByTagName('head')[0].appendChild(s);
   

等到控制台响应：

<script src=​"/​/​ajax.googleapis.com/​ajax/​libs/​jquery/​2.1.4/​jquery.min.js">​</script>​

1. 注入数据表：

   var s = document.createElement('script');
   s.src ="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js";
   document.getElementsByTagName('head')[0].appendChild(s);
   

等到控制台响应：

<script src=​"https:​/​/​cdn.datatables.net/​1.10.9/​js/​jquery.dataTables.js">​</script>​

1. 初始化你的表：

   jQuery('.dataTable').DataTable();
   

控制台将响应：

[]

4. 您现在可以使用$_ 来使用初始化数据表的 API：

   $_.search('a').draw();
   $_.search('').draw();
   $_.column(1).visible(false);
   

....等等。但不知何故，我认为小提琴作为游乐场更方便 -> http://jsfiddle.net/j92jh4fo/ :)