javascript - 如何在 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

您必须单独注入(inject)每个脚本，初始化数据表，然后您可以使用 $_作为 dataTable API 的引用:

1. 注入(inject) 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>​

注入(inject)数据表:

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

控制台将响应:

[]

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

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

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