Datatables实现表格行内编辑功能

表格行内编辑功能通过操作DOM来实现,最终实现效果如下代代码

html

<table class="table table-striped table-bordered table-hover tb_listTable" id="apply_listTable">
        <thead>
        <tr>
{#            <th>编号</th>#}
            <th>系统名称</th>
            <th>申请人</th>
            <th>申请人联系方式</th>
            <th>申请人单位</th>
            <th>申请时间</th>
            <th>推荐人</th>
            <th>授权状态</th>
            <th>授权截止日期</th>
{#            <th>最后一次登录时间</th>#}
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>

js

columnDefs: [
                {
                    "targets": 7,
      
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 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 实现表格自动滚动了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值