DataTables自定义分页条数实现
背景
因项目需要,选择了DataTables
这款表格插件做数据展示。在实际开发过程中,需要将所有的搜索条件放在页面顶部,所以我需要DataTables的搜索和分页条数单独提出来。
解决办法
办法其实很简单,只需要参考DataTables的官网文档就可找到。
当时因为项目赶得紧没太多时间看英文文档,在google上搜了好久都没有找到合适的解决方案,最后只能暂时搁置。最后项目完成后,才又去官网仔细看文档,才找到相关的解决办法~~~
- 前台页面提供选择(搜索)框
<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(); });
至此,自定义分页条数问题已解决,就是这么简单~
参考文档
关于我
文章转载自我的博客:
Heier Blog:Heier Home
相关推荐
ywy0 2018-05-05
郭贝贝编程 2017-05-24
yongyonglsy 2016-11-07
EdwardSiCong 2011-09-29
87281248 2011-08-11
Jerry 2017-02-07
csdnliuy 2017-08-22
流浪蓝 2016-05-21
xiaoge00 2020-03-01
83443560 2014-06-28
bluemengcom 2017-12-07
momode 2016-10-06
lpch0 2016-09-01
jiaojiao0 2016-07-14
83443560 2015-04-28
asdjkl 2015-03-20
SanBa 2014-11-07
LingPF 2019-06-27