背景

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

解决办法

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

• 前台页面提供选择（搜索）框

<select class="input w100 select-init" name="length" id="length" init="10">
    <option value="0">单页条数</option>
    <option selected value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
</select>
<!-- more code here -->
<button type="button" class="btn" id="btn-search">查询</button>

• 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": '<"toolbar">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();
});

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

参考文档

1. DataTables: page.len();
2. DataTables: ajax.url().load()

关于我

文章转载自我的博客：
Heier Blog:Heier Home