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

Question

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

假设您有一个简单的 table，标题为 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 :

注入 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>

注入数据表：

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>

初始化你的 table :
```
jQuery('.dataTable').DataTable();
```

控制台将响应：

[]

您现在可以使用 $_ 为初始化的数据表玩 API :

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

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

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

How to use the jQuery DataTables API in Chrome Developer Tools?

javascript

jquery

datatables

google-chrome-devtools