jQuery - 第三方表格插件DataTables使用详解12（常用的API）

2018-03-31 发布：hangge 阅读：2524

二十三、常用的API

1，获取 API 对象

要调用 DataTables 的各个接口，我们首先要取得它的 API 对象。有如下 3 种方式可以获取 API 对象：

//方法1
var table = $(selector).DataTable();

//方法2
var table = $(selector).dataTable().api();

//方法3
var table = new $.fn.dataTable.Api(selector);

2，调用搜索接口

这里我在表格下方添加一个文本输入框，输入时会自动根据输入内容搜索过滤表格数据。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.1.1.js"  type="text/javascript"></script>
    <script src="media/js/jquery.dataTables.js"  type="text/javascript"></script>
    <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
    <script type="text/javascript">
      $(document).ready(function() {
        //获取表格Api对象
        var table = $('#myTable').DataTable({
          "ajax": "data.txt"
        });

        //当输入框文字改变是自动对表格数据进行搜索
        $('#myFilter').on('keyup', function () {
            table.search(this.value).draw(); //搜索完记得调用draw重绘
        });
      });
    </script>
  </head>
  <body>
    <table id="myTable">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>出生日期</th>
            </tr>
        </thead>
    </table>
    <br>
    这个是我添加的输入框：<input id="myFilter" type="text">
  </body>
</html>

3，调用排序接口

//按第1列数据降序排列
table.order([[0, 'desc']]).draw();

4，调用翻页接口

//翻到下一页
table.page('next').draw('page');

5，获取表格数据

（1）直接使用 data() 方法获取全部数据

注意：data() 方法获取到的是全表数据。比如当客户端分页时，所有页面的数据也都会得到的。

//获取全部数据，并遍历输出每一条数据
table.data().each(function (item) {
    console.log(item);
});

（2）使用 column().data() 获取列数据

cloumn 参数说明：

（1）第一个参数可以是序号（0 表示第一列，-1 表示最后一列），也可以是 jquery 支持的选择器。

（2）第二个参数是一个 selector-modifier 对象，取值如下：

order: 'current', // 'current', 'applied', 'index', 'original'
page: 'all', // 'all', 'current'
search: 'none', // 'none', 'applied', 'removed'
focused: undefined, // true, false,undefined
selected: undefined // true, false, undefined

//获取第一列数据（按当前排序），并遍历输出每一条数据
table.column(0, { order: 'current' }).data().each(function (item) {
    console.log(item);
});

（3）使用 row().data() 获取行数据。

row 参数和上面的 column 一样：

（1）第一个参数可以是序号（0 表示第一列，-1 表示最后一列），也可以是 jquery 支持的选择器。

（2）第二个参数是一个 selector-modifier 对象，取值如下：

order: 'current', // 'current', 'applied', 'index', 'original'
page: 'all', // 'all', 'current'
search: 'none', // 'none', 'applied', 'removed'
focused: undefined, // true, false,undefined
selected: undefined // true, false, undefined

//当点击某一行时，输出该行的数据
$('#myTable tbody').on('click', 'tr', function () {
    console.log(table.row(this).data());
});

6，对行进行操作（对数据进行操作）

（1）使用 row().node() 可以获取行 dom 对象。

//给第3行增加一个important的class
$(table.row(2).node()).addClass('important');

（2）使用 row().remove() 可以删除某一行。（行删除后对应的 data 数据也会被删除）

//删除点击行
$('#myTable tbody').on('click', 'tr', function () {
  table.row(this).remove().draw();
});

（3）使用 row.add() 可以新增一行数据。

table.row.add(["000", "隐藏人物", '8888']).draw();

（4）使用 rows.add() 也可以新增多行数据。

table.rows.add([["X01", "隐藏人物1", '8888'],
                   ["X02", "隐藏人物2", '8888'],
                   ["X03", "隐藏人物3", '8888']]).draw();

（5）要重新设置全部数据（刷新数据），可以先清空表格，再重新设置。

table.clear();
table.rows.add(newData).draw();

7，对列进行操作

下面代码每次执行后交替改变第二列的显示状态。

//获取第二列
var column = table.column(1);
//如果第二列当前为显示状态则将其隐藏，否则则将其显示
column.visible( ! column.visible() );

8，其他DOM对象的获取

（1）下面是几个常用 dom 对象的获取方法：

table().node()：获取 table dom 对象
table().body()：获取 tbody dom 对象
table().header()：获取 theader dom 对象
table().footer()：获取 tfooter dom 对象

（2）使用样例：

//输出tbody的dom对象
console.log(table.table().body());

9，销毁整个 table

注意：destroy() 参数设为 true 可以连同 html 一起销毁。

//连同html一起销毁整个销毁table
table.destroy(true);

10，设置每页显示的记录数

//每页只显示2条数据
table.page.len(2).draw();