datatables java 分页_DataTables自定义分页条数实现

背景

因项目需要，选择了DataTables这款表格插件做数据展示。在实际开发过程中，需要将所有的搜索条件放在页面顶部，所以我需要DataTables的搜索和分页条数单独提出来。

解决办法

办法其实很简单，只需要参考DataTables的官网文档就可找到。

当时因为项目赶得紧没太多时间看英文文档，在google上搜了好久都没有找到合适的解决方案，最后只能暂时搁置。

最后项目完成后，才又去官网仔细看文档，才找到相关的解决办法~~~

前台页面提供选择(搜索)框

单页条数

10

20

50

查询

js处理查看逻辑

var orderTable = $('#order_list').DataTable({

"processing": true,

"serverSide": true,

// 去掉过滤

"bFilter": false,

// 禁止选择分页

// "paging": false,

"ajax": url,

"ordering": false,

"language": {

"url": "/static/commonsell/lib/datatable/lang/Chinese.lang"

},

"drawCallback": function (settings) {

console.info('DataTables has redrawn the table');

},

"dom": 'frtip',

});

// 点击查询时，重新加载数据

$("#btn-search").click(function () {

// 获取其它数据

var url = getSearchUrl();

// 设置分页参数

// @link https://datatables.net/reference/api/page.len()

// 获取前台选择的单页条数

var length = $("#length").val();

// 使用DataTables Api设置传递参数

// 注：orderTable 为DataTables的一个实例

orderTable.page.len(length);

// 使用新搜索条件链接重新加载DataTables表格

// @link https://datatables.net/reference/api/ajax.url().load()

orderTable.ajax.url(url).load();

});

至此，自定义分页条数问题已解决，就是这么简单~

参考文档

关于我