DataTables自定义分页条数实现

xuexiangjys 发布于2019-08-22 13:48 / 1596人阅读

摘要：背景因项目需要，选择了这款表格插件做数据展示。在实际开发过程中，需要将所有的搜索条件放在页面顶部，所以我需要的搜索和分页条数多带带提出来。解决办法办法其实很简单，只需要参考的官网文档就可找到。

背景

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

解决办法

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

当时因为项目赶得紧没太多时间看英文文档，在google上搜了好久都没有找到合适的解决方案，最后只能暂时搁置。
最后项目完成后，才又去官网仔细看文档，才找到相关的解决办法~~~

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

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();
});

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

参考文档

DataTables: page.len();

DataTables: ajax.url().load()

关于我

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

云服务器 GPU云服务器自定义分页实现自定义手势自定义如何实现自定义布局怎么实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92465.html

DataTables后台分页的使用

摘要：提供了完善的前后台分页功能，现将后台分页的学习和使用过程总结如下，方便日后参考。 DataTables提供了完善的前后台分页功能，现将后台分页的学习和使用过程总结如下，方便日后参考。一、前台页面的配置 DataTables几乎可以在不改变前台代码部分即可实现前台分页到后台分页的转换，唯一需要做的就是在代码中开启DataTables后台分页功能即可： serverSide : true...

ChristmasBoy 2019-06-27 12:00 评论0 收藏0
重写yii2的数据提供器ArrayDataProvider类

摘要：再看看另一个方法，的提供的数据统计总条数的方法是的，默认计算分页总数是根据数组计算的，而的数据就是我们查询赋值给提供器的。统计总数预处理函数直接获取通过函数获取传递给数据提供器的数据总和。首先看看ArrayDataProvider官方的doc： ArrayDataProvider implements a data provider based on a data array.Ar...

xiaokai 2019-06-27 13:56 评论0 收藏0
layui数据表格使用（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）

摘要：表格展示神器之一表格前言在写后台管理系统中使用最多的就是表格数据展示了，使用表格组件能提高大量的开发效率，目前主流的数据表格组件有等博主个人比较倾向于，极简，却又不失饱满的内在，体积轻盈，组件丰盈。表格展示神器之一：layui表格前言：在写后台管理系统中使用最多的就是表格数据展示了，使用表格组件能提高大量的开发效率，目前主流的数据表格组件有bootstrap table、layui ...

番茄西红柿 2019-04-23 13:27 评论0 收藏0
Springmvc 结合 jquery插件Datatables的使用（基于java支持的服务器处理）

摘要：但是这个插件本身还是挺不错的，对于报表的支持比较好。下面应该写服务端了，这呢随机获取表格数据表格数据以格式返回，返回大概就是这样了。前言觉得Datatables的中文文档写的太差劲了，开发手册和文档都是很不友好，demo也不够完善，不适合直接想使用的人来看，需要用过一段时间之后再来看可能才会有柳暗花明的发现，不然就有点不明所以的感觉。但是这个插件本身还是挺不错的，对于报表的支持比...

dcr309duan 2019-08-22 16:00 评论0 收藏0
Springmvc 结合 jquery插件Datatables的使用（基于java支持的服务器处理）

摘要：但是这个插件本身还是挺不错的，对于报表的支持比较好。下面应该写服务端了，这呢随机获取表格数据表格数据以格式返回，返回大概就是这样了。前言觉得Datatables的中文文档写的太差劲了，开发手册和文档都是很不友好，demo也不够完善，不适合直接想使用的人来看，需要用过一段时间之后再来看可能才会有柳暗花明的发现，不然就有点不明所以的感觉。但是这个插件本身还是挺不错的，对于报表的支持比...

Snailclimb 2019-08-15 15:12 评论0 收藏0