使用Datatable插件时遇到的奇葩问题(一)

1.我想展示贼多的列,可是它自动给我收缩了起来,例如下图。

点击绿色加号,变成了下面这样。

这不是我要的效果啊。。。

最后发现是有个属性误设置了。那就是这里。

 设置成false就可以了。

并且记得,把 scrollX 属性,设置为 true 。不然的话就显示不开,后面的看不见了。

这样就好了! 

 

2.Datatable有三种加载数据的方式,我想用JS的对象进行加载数据,而不是Ajax。

但是我设置 data 属性为JS对象,浏览器却一直报 属性data为空length方法无法调用 的错误。

最后究其原因,发现,需要将这个属性设置为 false,否则它只会去访问Ajax里面的URL。如下图。

 

3.在设置了 responsive 属性为 true ,即自适应之后,可能会出现表头和下面的数据发生错位,出现不对齐的问题。

这里需要关闭 autoWidth 自动设置宽度 属性。总之我设置了之后就好了。。。如下图。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 Bootstrap 插件 DataTable,首先需要在 HTML 文件中引入相关的 CSS 和 JS 文件。可以在 Bootstrap 的官网上下载最新版的 DataTable,也可以通过 CDN 引入。 ```html <!-- 引入 DataTable 的 CSS 文件 --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"> <!-- 引入 jQuery 和 DataTable 的 JS 文件 --> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script> <!-- DataTable 的 HTML 代码 --> <table id="example" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <!-- 更多数据 --> </tbody> </table> ``` 然后在 JavaScript 中,使用以下代码初始化 DataTable: ```javascript $(document).ready(function() { $('#example').DataTable(); } ); ``` 这样就可以将表格转换为 DataTable,添加搜索、排序、分页等功能。需要注意的是,表格必须使用 `id` 属性,并且在 JavaScript 中使用该 `id` 来初始化 DataTable。如果你想自定义 DataTable 的配置,可以在初始化传入一个配置对象,例如: ```javascript $(document).ready(function() { $('#example').DataTable({ "paging": true, "ordering": true, "info": true }); }); ``` 这里只是简单地介绍了 DataTable使用方法,更多高级功能可以参考官方文档。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值