jquery.datatables 分页功能

Datatables 插件的基本用法就不再介绍了，这里主要分享一下使用它实现服务器端获取数据时的分页处理。

在后端不管是使用什么技术，按下面API中的参数封装对象即可，分页，排序，搜索都不需要手动去维护这些信息，方便、方便、太方便！

官网链接：https://datatables.net/manual/server-side

有时候，从DOM读取数据的时间太慢或笨拙，特别是在处理数千或数百万的数据行时。为了解决这个DataTables的服务器端处理功能，提供了一种方法，让服务器端的数据库引擎完成所有的“繁重的操作”（对于这个用例，它们都是高度优化的），然后有在用户的网络浏览器中绘制的信息。因此，您可以轻松地显示由数百万行组成的表。

当使用服务器端处理时，DataTables将在页面上的每个绘图（即分页，排序，搜索等）时向服务器发出一个Ajax请求。DataTables将向服务器发送一些变量，以允许它执行所需的处理，然后以DataTables所需的格式返回数据。

服务器端处理通过使用该serverSide选项启用，并使用配置ajax。有关配置选项的更多信息，请参见下文。

发送参数

当使用服务器端处理向服务器发出请求时，DataTables将发送以下数据，以便服务器知道需要哪些数据：

{ draw -- int // 绘制计数器 DataTables使用它来确保服务器端处理请求的Ajax返回由DataTables依次绘制（Ajax请求是异步的，因此可以退出顺序）。这被用作draw返回参数的一部分（见下文）。 start -- int // 分页首记录指标。这是当前数据集中的起始点（基于0索引 - 即0是第一个记录）。 length -- int // 表可以在当前绘图中显示的记录数。预计返回的记录数将等于此数字，除非服务器返回的记录较少。请注意，这可以是-1，表示应该返回所有记录（尽管这取消了服务器端处理的任何好处！） search[value]-- str // 全局搜索值。为了能够适用于所有具有列searchable的true。 search[regex]-- 布尔 // true如果全局过滤器应该被视为高级搜索的正则表达式，false否则。请注意，正常情况下，服务器端处理脚本不会在大型数据集上执行正常的表达式搜索，但在技术上可以由脚本自行决定。 order[i][column] -- int // 应该应用排序的列。这是columns也提交给服务器的信息数组的索引引用。 order[i][dir] -- str // 此列的订购方向。这将是asc或desc指示升序排列或降序排序，分别。 columns[i][data] -- str // 列的数据源，由columns.data。 columns[i][name] -- str // 列的名称，由columns.name。 columns[i][searchable] -- 布尔 // 标记以指示此列是否可搜索（true）或否（false）。这是由columns.searchable。 columns[i][orderable] -- 布尔 // 标记以指示此列是否可以（true）或不（false）。这是由columns.orderable。 columns[i][search][value] -- str // 搜索值适用于此特定列。 columns[i][search][regex] -- 布尔 // 标记以指示此列的搜索项是否应被视为正则表达式（true）或不是（false）。与全局搜索一样，通常，服务器端处理脚本在大型数据集上不会执行正常的表达式搜索，但在技术上可以由脚本自行决定。 }

order[i]和columns[i]被发送到服务器的参数的信息数组：

• order[i] - 是一个定义有多少列的数组 - 即如果数组长度为1，则执行单列排序，否则正在执行多列排序。
• columns[i] - 定义表中所有列的数组。

在这两种情况下，i都是一个整数，它将改变以指示数组值。在大多数现代化的服务器端脚本环境中，这些数据将作为数组自动提供给您。

返回数据

一旦DataTables提出了数据请求，将上述参数发送到服务器，则期望将JSON数据返回给它，并设置以下参数：

{ draw -- int // 绘图计数器，该对象是对draw作为数据请求的一部分发送的参数的响应。请注意，这是强烈建议出于安全原因，你投这个参数为整数，而不是简单地回显到客户端它在发送的draw参数，以防止跨站脚本（XSS）攻击。 recordsTotal -- int // 过滤前的总记录（即数据库中的记录总数） recordsFiltered -- int // 过滤后的总记录（即应用过滤后的记录总数）不仅仅是该数据页面返回的记录数。 data -- array // 要显示在表中的数据。这是一组数据源对象，每行一个，将由DataTables使用。请注意，该参数的名称可以使用ajax选项的dataSrc属性更改。 error -- str // 可选：如果在运行服务器端处理脚本时发生错误，则可以通过传回使用此参数显示的错误消息来通知用户此错误。不包括如果没有错误。 }

除了控制整个表的上述参数之外，DataTables还可以对每个行的数据源对象使用以下可选参数，为您执行自动操作：

{ DT_RowId -- str // 将tr节点的ID属性设置为此值 DT_RowClass -- str // 将此类添加到tr节点 DT_RowData -- object // 使用jQuerydata()方法将对象中包含的数据添加到行中以设置数据，然后可以将其用于稍后检索（例如，单击事件）。 DT_RowAttr -- object // 将对象中包含的数据添加到行tr节点作为属性。对象键用作属性键，值作为对应的属性值。这是使用jQueryparam()方法执行的。请注意，此选项需要DataTables 1.10.5或更高版本。 }

下面的“示例数据”部分显示了使用这些选项的返回外观的示例。

组态

DataTables中的服务器端处理通过使用该serverSide选项启用。只需设置它true，DataTabels将在服务器端处理模式下运行。您还将使用该ajax选项来指定DataTable应从其获取Ajax数据的URL。因此，最简单的服务器端处理初始化是：

使用Javascript
$('#example').DataTable( {
    serverSide: true,
    ajax: '/data-source'
} );

通过该ajax选项配置DataTables如何配置Ajax请求。在上面的例子中，我们使用它作为一个字符串，它指示DataTables使用其默认设置进行Ajax请求。但是，您可以通过ajax作为对象传入来自定义这些设置。作为一个对象，ajax直接映射到jQueryajax配置对象，所以任何可以在jQuery请求中使用的选项，你也可以使用DataTables！例如，要发出POST请求：

使用Javascript
$('#example').DataTable( {
    serverSide: true,
    ajax: {
        url: '/data-source',
        type: 'POST'
    }
} );

有关DataTable中可用的Ajax选项的更多信息，请参阅ajax文档。

示例数据

使用数组作为表的数据源的服务器端处理返回示例（完整示例）：

使用对象的服务器端处理返回示例，DT_RowId并DT_RowData附带并作为表的数据源（完整示例）：