Datatables修改每页显示的条数

矫情吗；* 2023-10-18 16:09 3阅读 0赞

## 场景 ##

修改Datatables默认显示的条数

![2019032610571744.jpg][]

![Image 1][]![20190326105719406.jpg][]

## 实现 ##

在表格数据初始化时添加如下

"pageLength": 5,
            "lengthMenu": [ 5,10, 25, 50, 75, 100 ],

完整示例：

function dataTableInit(){
        return $('#wmsReceiveOrder_table_id').DataTable({
          "language": {
            "processing": "处理中...",
            "lengthMenu": "显示 _MENU_ 项结果",
            "zeroRecords": "没有匹配结果",
            "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "infoFiltered": "(由 _MAX_ 项结果过滤)",
            "infoPostFix": "",
            "search": "搜索:",
            "searchPlaceholder": "搜索...",
            "url": "",
            "emptyTable": "表中数据为空",
            "loadingRecords": "载入中...",
            "infoThousands": ",",
            "paginate": {
              "first": "首页",
              "previous": "上页",
              "next": "下页",
              "last": "末页"
            },
            "aria": {
              paginate: {
                first: '首页',
                previous: '上页',
                next: '下页',
                last: '末页'
              },
              "sortAscending": ": 以升序排列此列",
              "sortDescending": ": 以降序排列此列"
            },
            "decimal": "-",
            "thousands": "."
          },
          "processing": true,
          "searching" : false,
          "serverSide": true,
            "stateSave": true,
            "pageLength": 5,
            "lengthMenu": [ 5,10, 25, 50, 75, 100 ],
          "dom": '<"top">rt<"bottom"flpi><"clear">',
          "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": 0
          }],
          columns: [
            { data: 'id' },
            { data: 'purchaseCode' },
              { data: 'deliveryTime',
                  render: function (data, type, full, meta ) {
                      return moment(data).format("YYYY-MM-DD HH:mm:ss");
                  } },
              { data: 'createrName' },
              { data: 'deliveryCode' },
              { data: 'gmtCreat',
                  render: function (data, type, full, meta ) {
                      return moment(data).format("YYYY-MM-DD HH:mm:ss");
                  } },
              { data: 'createrName' },
              { data: 'status',
                  render: function (data, type, full, meta ) {
                      if(data.trim()=="1"){
                          return '未提交'
                      }else if(data.trim()=="2"){
                          return '已提交'
                      }else if(data.trim()=="3"){
                          return '已打印'
                      }else{
                          return '未知状态'
                      }
                  }  },
          ],
          "ajax": function (data, callback, setting) {
              $.each(data.columns,function (index,value) {
                  //匹配所有input
                  $("#searchCondition").find('input[type="text"]').each(function () {
                      if(value.data === $(this).attr('id')){
                          value.search.value = $(this).val();
                      }
                  });
                  //匹配所有select
                  debugger
                  $("#searchCondition select").each(function () {
                      debugger
                      if(value.data === $(this).attr('id')){
                          value.search.value = $(this).val();
                      }
                  });
              })
            $.ajax({
              type: 'POST',
              url: "/wmsReceiveOrder/doPageForReceiveOrderTable",
              cache: false,  //禁用缓存
              data: JSON.stringify(data),  //传入组装的参数
              contentType: "application/json",
              dataType: "json",
              success: function (result) {
                debugger
                callback(result);
              }
            })
          }
        })
      }

[2019032610571744.jpg]: https://img-blog.csdnimg.cn/2019032610571744.jpg
[Image 1]: 
[20190326105719406.jpg]: https://img-blog.csdnimg.cn/20190326105719406.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui数据表格自定义每页条数limit设置

layui数据表格自定义每页条数limit设置 table.render({ elem: 'data_grid' //,width:

柔情只为你懂/ 2024年03月22日 13:39/ 0 赞/ 44 阅读

相关 Oracle创建视图实现获取当前数据所在的页数，这里以每页2条数据分页

摘要：Oracle创建视图实现获取当前数据所在的页数，这里以每页2条数据分页，详细请看：一： DROP VIEW MIP.TB_CMS_FLGTINFO_D_VI

客官°小女子只卖身不卖艺/ 2024年02月17日 15:24/ 0 赞/ 12 阅读

相关 idea修改全局查询时的最大显示条数

idea2019版本以上，2020.2版本及以下，可以使用Ctrl+shift+alt+/ 快键键然后选择Registry（注册表）找到并修改ide.usages.pag

浅浅的花香味﹌/ 2024年02月05日 19:15/ 0 赞/ 19 阅读

相关 Datatables修改每页显示的条数

场景修改Datatables默认显示的条数 ![2019032610571744.jpg][] ![Image 1][]![20190326105719406.jp

矫情吗；*/ 2023年10月18日 16:09/ 0 赞/ 4 阅读

相关 Lodop分页打印每页显示页头页尾

Lodop分页打印页头页尾问题 1. Lodop页头页尾打印标签 1.1 caption标签:caption标签的内容只显示在首页 1.2 thead标签: 页头

比眉伴天荒/ 2023年10月06日 15:14/ 0 赞/ 13 阅读

相关 thinkphp5框架分页默认条数修改

thinkphp5框架分页默认条数修改修改配置文件修改配置文件在thinkphpwu/application目录下的config.php文件中，

分手后的思念是犯贱/ 2022年12月29日 04:54/ 0 赞/ 364 阅读

相关 saas-export项目-dept记录列表的每页显示条数切换

功能效果描述 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

叁歲伎倆/ 2022年12月19日 13:12/ 0 赞/ 133 阅读

相关分组查询显示每一组的第一条

select \ from (select ALARMID,BRNUMBER,STATUS,ALARMTYPE,RECIVETIME,ALARMTIME,ROW\_NUMBER

绝地灬酷狼/ 2022年07月18日 06:17/ 0 赞/ 197 阅读

相关分页计算总页数算法：总页数=（总数-1）/每页数量+1----总页数=（总数+每页数量-1）/每页数量

分页计算总页数算法：总页数=（总数-1）/每页数量+1 总页数=（总数+每页数量-1）/每页数量

拼搏现实的明天。/ 2022年06月07日 07:08/ 0 赞/ 228 阅读

相关 js调用ajax根据后台返回的总数前端设置每页的条数实现分页功能

有时候前端需要实现分页功能，但是后台只给我们返回来总数，每页显示多少条数据需要我们前端来设置，貌似这个有点欺负人，哈哈哈。。话不多说直接上代码： (这里需要用到layui插件，

阳光穿透心脏的1/2处/ 2022年05月05日 09:34/ 0 赞/ 114 阅读