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

您必须单独注入每个脚本，初始化dataTable，然后您可以使用$_作为dataTable 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>

注入dataTables：

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>

初始化您的表格：
```
jQuery('.dataTable').DataTable();
```

控制台将回复：

[]

您现在可以使用$_为初始化的dataTable使用API：

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

....等等。但不知何故，我觉得小提琴比游乐场更方便 - ＆gt; http://jsfiddle.net/j92jh4fo/ ：）

如何在Chrome Developer Tools中使用jQuery DataTables API？

1 个答案: