背景:项目需要做后台管理前端界面。数据展示用到datatables
问题:需求是表格展示第一列添加checkbox复选框,因为datatables生成的table是没有复选框的。而且要实现批量选择,单击行选择等操作。
参考资源:
datatables中文,datatables英文,https://chinacheng.iteye.com/blog/2105036,https://stackoverflow.com/questions/39285643/datatable-jquery-how-to-remove-sort-icon-from-first-column,https://www.bbsmax.com/A/gGdXE2Ez4m/,http://www.voidcn.com/article/p-mtakzsvo-xv.html
问题解决:
本人非前端有错误还需指正。建议英文好的还是看原版英文api,感觉很多在中文版的里面并没有介绍。
1. 如何把创建的表格汉化并在表格中添加复选框(checkbox)呢?
datatables默认创建出来的各项功能描述都是英文的。如何去汉化呢?只需要在前端js代码创建datatable对象的时候,指定language属性。
如何去添加checkbox呢?由于后台用的django模版,这一步还是比较好去实现的。在前端定义table,并分别定义thead,tbody和tfoot。在thead中定义表头内容。tbody是通过django模版包含命令将每一行数据信息包含到表格中。tfoot与thead类似。
这是是父template。
注:其中父template中复选框之前定义一个label是为了点击文字也可以做到复选框被选中。
子template中:
以上就完成了在创建的表格中添加checkbox。
2.既然已经表格中添加了复选框,如何做到点击表头复选框批量选中子复选框呢?还有如何点击表行复选框也选中呢?
以下是我看到的最nice的实现方法。
只需要在创建datatable对象的时候。加入
是不是很nice。
点击表行复选框选中只需要在创建datatable对象的时候。加入
3.第一列添加了复选框,我们如何去除它的自动排序功能?
我实验了网上挺多方法都没起作用。最后起作用的是。在创建datatable对象的时候。指定
之所以要指定order是因为datatables生成table会有默认值。
后来看英文api发现aoColumnDefs都过时了。可以写成