datatables 实现表格汉化，第一列添加复选框checkbox及相关操作实现

背景：项目需要做后台管理前端界面。数据展示用到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属性。

var $('#excample').dataTable(   {
         language : {
			sProcessing : "处理中...",
			sLengthMenu : "显示 _MENU_ 项结果",
			sZeroRecords : "没有匹配结果",
			sInfo : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
			sInfoEmpty : "显示第 0 至 0 项结果，共 0 项",
			sInfoFiltered : "(由 _MAX_ 项结果过滤)",
			sInfoPostFix : "",
			sSearch : "搜索:",
			sUrl : "",
			sEmptyTable : "表中数据为空",
			sLoadingRecords : "载入中...",
			sInfoThousands : ",",
			oPaginate : {
				sFirst : "首页",
				sPrevious : "上页",
				sNext : "下页",
				sLast : "末页"
			},
			"oAria" : {
				"sSortAscending" : ": 以升序排列此列",
				"sSortDescending" : ": 以降序排列此列"
			}
		},
    }
)

如何去添加checkbox呢？由于后台用的django模版，这一步还是比较好去实现的。在前端定义table，并分别定义thead，tbody和tfoot。在thead中定义表头内容。tbody是通过django模版包含命令将每一行数据信息包含到表格中。tfoot与thead类似。

这是是父template。

<table id='example'>
    <thead>
        <tr>
            <th>
                <label for ="group_checkbox">复选框</label>
                <input type="checkbox" class ="checkall" id="group_checkbox"/>
            </th>
            <th>
                列2
            </th>
        </tr>
    </thead>
    <tbody>
        {%for item in data%}
            {%include ***.html %}
        {%endfor%}
    </tbody>
    <tfoot>
            <th>
                <label for ="group_checkbox">复选框</label>
                <input type="checkbox" class ="checkall" id="group_checkbox"/>
            </th>
            <th>
                列2
            </th>
    </tfoot>
</table>

注：其中父template中复选框之前定义一个label是为了点击文字也可以做到复选框被选中。

子template中：

<tr >
    <td><input  class="checkchild" type="checkbox"></td>
    <td>{{item.data}}</td>
</tr>

    以上就完成了在创建的表格中添加checkbox。

2.既然已经表格中添加了复选框，如何做到点击表头复选框批量选中子复选框呢？还有如何点击表行复选框也选中呢？

以下是我看到的最nice的实现方法。

只需要在创建datatable对象的时候。加入

$(".checkall").on('click',function () {
           var check = $(this).prop("checked");
           $(".checkchild").prop("checked", check);
});

是不是很nice。

点击表行复选框选中只需要在创建datatable对象的时候。加入

$("#example tbody").on("click","tr",function(){
         var check = $(this).find(".checkchild").prop("checked");
         if(check && check==true){
             $(this).find('.checkchild').prop("checked",false);
         }else{
             $(this).find('.checkchild').prop("checked",true);
         }
 });

3.第一列添加了复选框，我们如何去除它的自动排序功能？

我实验了网上挺多方法都没起作用。最后起作用的是。在创建datatable对象的时候。指定

"order": [],
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }]，

之所以要指定order是因为datatables生成table会有默认值。

后来看英文api发现aoColumnDefs都过时了。可以写成

"columnDefs": [ { "orderable": false, "targets": [ 0 ] }],