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

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

本文关键字：jQuery DataTables API Chrome 开发工具      更新时间：2023-09-26

我正在努力掌握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();，但仍然无法实现。你知道如何做到这一点吗？

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

控制台将响应：

[]

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

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

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

相关文章：