jQuery Datatable 获取数据数组 - Javascript

介绍

jQuery Datatable 是一个开源的 Javascript 库，用于创建高度可定制的数据表。它使用 Ajax 技术获取数据并显示在表格中。在使用 Datatabel 时，有时我们需要获取表格中的数据数组来进行其他操作，本文将介绍如何使用 jQuery Datatable 获取数据数组。

步骤

1. 引入 jQuery 和 Datatable 库

首先，需要在页面中引入 jQuery 和 Datatable 库，可以从官网下载或使用CDN。

<!-- 引入 jQuery 库 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<!-- 引入 Datatable 库 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>

2. 初始化 Datatable 表格

使用 Datatable 创建表格，并初始化它。

<table id="myTable">
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
        <tr>
            <td>数据3</td>
            <td>数据4</td>
        </tr>
    </tbody>
</table>

<script>
    $(document).ready(function() {
        $('#myTable').DataTable();
    });
</script>

3. 获取数据数组

使用 Datatable 提供的 API 方法 rows().data() 获取数据数组，该方法返回的是一个二维数组，每个元素表示一行数据，每个元素包含所有列的值。

var table = $('#myTable').DataTable();
var dataArray = table.rows().data().toArray();
console.log(dataArray);

4. 处理数据数组

得到数据数组后，我们可以对它进行进一步处理，比如遍历数组、筛选特定的数据等操作。

// 遍历数组
$.each(dataArray, function(index, value) {
    console.log(value[0]); // 列1的值
    console.log(value[1]); // 列2的值
});

// 筛选含有特定字符串的行
var filteredArray = dataArray.filter(row => row.includes('数据1'));
console.log(filteredArray);

结论

在本文中，我们介绍了如何使用 Datatable 获取数据数组，并对其进行处理。使用 Datatable 创建表格后，可以方便地操作数据数组，这将为开发人员提供更多选择和灵活性。