dataTables自增序号的实现

项目当中表格均采用datatables这个插件,踩了不少坑,这里不做参数配置的介绍,只介绍自增序号在前端分页以及后端分页时的实现方式,亲测都是可用的,官网所使用的方法我没实验成功。

  • 前端分页
    首先设置一个空列,然后配置fnDrawCallback这个参数,代码如下:
fnDrawCallback : function () {
        let api = this.api();
        api.column(0).nodes().each(function(cell, i) {
            cell.innerHTML = i + 1;
        });
    };
  • 后端分页
    实现方式一:依然是配置fnDrawCallback这个参数,代码如下
fnDrawCallback : function () {
        let api = this.api();
        let startIndex = api.context[0]._iDisplayStart;//获取本页开始的条数
        api.column(0).nodes().each(function(cell, i) {
            cell.innerHTML = startIndex + i + 1;
        });
    };

实现方式二:在aoColumns参数中配置,代码如下

        {
            sTitle: '序号',
            data: null,
            className: 'text-center whiteSpace',
            render:function(data,type,row,meta) {
                return meta.row + 1 +
                meta.settings._iDisplayStart;
            }
        }
  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
使用 DataTables 实现表格自动滚动可以通过以下步骤完成: 1. 引入 DataTables 的 CSS 和 JavaScript 文件。您可以从官网下载或使用 CDN 引入。 ```html <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script> ``` 2. 在 HTML 中创建一个表格,并将其 ID 设置为 "myTable"。 ```html <table id="myTable"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> ... </tbody> </table> ``` 3. 初始化 DataTables 并启用自动滚动功能。您可以使用以下代码: ```javascript $(document).ready(function() { $('#myTable').DataTable({ "scrollY": "200px", // 表格高度 "scrollCollapse": true, // 自动隐藏滚动条 "paging": false, // 禁用分页 "info": false, // 禁用信息 "order": [[ 0, "desc" ]], // 按照第一列倒序排列 "scrollX": true, // 水平滚动 "autoWidth": false, // 禁用自动宽度 "scrollCollapse": true, // 自动隐藏滚动条 "searching": false, // 禁用搜索 "deferRender": true, // 延迟渲染 "fnDrawCallback": function() { // 每次绘制表格时滚动到底部 $('#myTable').scrollTop($('#myTable')[0].scrollHeight); } }); }); ``` 上述代码中,我们首先使用 `DataTable()` 方法初始化表格,并指定表格高度、禁用分页、信息和搜索,按照第一列倒序排列等设置。然后在 `fnDrawCallback` 回调函数中,我们在每次绘制表格时滚动到表格底部。 通过以上步骤,您就可以使用 DataTables 实现表格自动滚动了。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值