datatables.js中文项目使用案例

官方下载地址

https://datatables.net/download/

中文官网：http://datatables.club/

资源引用

<link href="~/datatables/datatables.min.css" rel="stylesheet" />
<script src="~/jquery.min.js" type="text/javascript"></script>
<script src="~/datatables/datatables.min.js" type="text/javascript"></script>

汉化

注意：需在初始化之前对datatable进行扩展

//datatable汉化
// oSort是排序类型数组, 'chinese-asc'是自己定义的类型的排序(*-asc || *-desc)名称
// 插件应该会根据表格中的内容的类型(string, number, chinese)进行比较排序，
// 如果以chinese类型来排序则用oSort['chinese-asc']和oSort['chinese-desc']的方法
// oSort对应的function里面自定义比较方法
jQuery.fn.dataTableExt.oSort['chinese-asc'] = function (x, y) {//javascript自带的中文比较函数，具体用法可自行查阅了解return x.localeCompare(y);
};jQuery.fn.dataTableExt.oSort['chinese-desc'] = function (x, y) {return y.localeCompare(x);
};// aTypes是插件存放表格内容类型的数组
// reg赋值的正则表达式，用来判断是否是中文字符
// 返回值push到aTypes数组，排序时扫描该数组，'chinese'则调用上面两个方法。返回null默认是'string'
jQuery.fn.dataTableExt.aTypes.push(function (sData) {var reg = /^[\u4e00-\u9fa5]{0,}$/;if (reg.test(sData)) {return 'chinese';}return null;
});

汉化语言包 Chinese.txt：若中文乱码，则需要使用记事本等工具另存为->更改文件编码方式为UTF-8

{"processing": "处理中...","lengthMenu": "显示 _MENU_ 项结果","zeroRecords": "没有匹配结果","info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项","infoEmpty": "显示第 0 至 0 项结果，共 0 项","infoFiltered": "(由 _MAX_ 项结果过滤)","infoPostFix": "","search": "搜索:","searchPlaceholder": "搜索...","url": "","emptyTable": "表中数据为空","loadingRecords": "载入中...","infoThousands": ",","paginate": {"first": "首页","previous": "上页","next": "下页","last": "末页"},"aria": {"paginate": {"first": "首页","previous": "上页","next": "下页","last": "末页"},"sortAscending": "以升序排列此列","sortDescending": "以降序排列此列"},"thousands": "."
}

初始化

HTMl

<table class="datatable table table-stripped no-footer"><thead><tr><th>姓名</th><th>职位</th><th>国籍</th><th>服务时长</th><th>日期</th><th>薪资</th><th>操作</th></tr></thead><tbody><tr><td>姓名</td><td>职位</td><td>国籍</td><td>服务时长</td><td>日期</td><td>薪资</td><td>操作</td></tr></tbody>
</table>

JS

$(function(){//datatable初始化function initDataTable() {if ($(".datatable").length > 0) {var mytable = $(".datatable").DataTable({//汉化方式一"language": {"url": "../../lib/datatables/Chinese.txt",//汉化"charset": "utf8"//指定编码字符，若无效，参考注释一},//汉化方式二"language":{  "processing": "处理中...","lengthMenu": "显示 _MENU_ 项结果","zeroRecords": "没有匹配结果","info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项","infoEmpty": "显示第 0 至 0 项结果，共 0 项","infoFiltered": "(由 _MAX_ 项结果过滤)","infoPostFix": "","search": "搜索:","searchPlaceholder": "搜索...","url": "","emptyTable": "表中数据为空","loadingRecords": "载入中...","infoThousands": ",","paginate": {"first": "首页","previous": "上页","next": "下页","last": "末页"},"aria": {"paginate": {"first": "首页","previous": "上页","next": "下页","last": "末页"},"sortAscending": "以升序排列此列","sortDescending": "以降序排列此列"},"thousands": "."},ajax: '../../mydatatable.json',scrollX: false,bAutoWidth: true,columns: [{ data: 'name' },{ data: 'position', orderable: false },{ data: 'office', orderable: false },{ data: 'extn' },{ data: 'startDate' },{ data: 'salary' },{data: null,orderable: false,render: function (data, type, row, meta) {// row参数里面包含了本行的信息// meta 单元格的元数据， row,col的索引号//动态输出每行操作按钮var btnHtml = [], str;for (var i = 1; i < row.btn.length; i++) {str = '<li><a class="' + row.btn[i].class + '" data-myid="' + row.id + '"><i class="' + row.btn[i].icon + '"></i>' + row.btn[i].name + '</a></li>'btnHtml.push(str);}html = '<a type="button" class="dropdown-toggle btn-actions" data-toggle="dropdown" href="#">'+ '<i class="fa fa-ellipsis-vertical"></i>'+ '</a > '+ '<ul class="dropdown-menu btn-tablemore-list">'+ btnHtml.join("")+ '</ul>'return html;}}],order: [//排序[0, 'asc']]});}}
});

mydatatable.json

{"data": [{"name": "张高级","id": "1","position": "区域主任","office": "洛杉矶","extn": "5421","startDate": "2011/04/25","salary": "$320,800","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "fas fa-eye","name": "查看","class": "btn-detail text-warning"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "张三","id": "2","position": "营销设计师","office": "东京","extn": "8422","startDate": "2011/07/25","salary": "$170,750","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "傅慎行","id": "3","position": "Javascript 软件工程师","office": "洛杉矶","extn": "1562","startDate": "2009/01/12","salary": "$86,000","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "欧茉莉","id": "4","position": "软件工程师","office": "爱丁堡","extn": "6224","startDate": "2012/03/29","salary": "$433,060","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "乔钻石","id": "5","position": "区域主任","office": "伦敦","extn": "5407","startDate": "2008/11/28","salary": "$162,700","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "蓉貌好","id": "6","position": "首席营销官","office": "纽约","extn": "4804","startDate": "2012/12/02","salary": "$372,000","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "白读书","id": "7","position": "系统架构师","office": "洛杉矶","extn": "9608","startDate": "2012/08/06","salary": "$137,500","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "戚折","id": "8","position": "人事主管","office": "伦敦","extn": "6200","startDate": "2010/10/14","salary": "$327,900","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "何呵呵","id": "9","position": "首席运营官","office": "伦敦","extn": "2360","startDate": "2009/09/15","salary": "$205,500","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "蒲渔","id": "10","position": "开发人员","office": "伦敦","extn": "1667","startDate": "2008/12/13","salary": "$103,600","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "赵默笙","id": "11","position": "摄影师","office": "纽约","extn": "3814","startDate": "2008/12/19","salary": "$90,560","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "何以琛","id": "12","position": "律师","office": "旧金山","extn": "9497","startDate": "2013/03/03","salary": "$342,000","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "甄可以","id": "13","position": "高级营销设计师","office": "伦敦","extn": "6741","startDate": "2008/10/16","salary": "$470,600","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "高启兰","id": "14","position": "医生","office": "爱丁堡","extn": "3597","startDate": "2012/12/18","salary": "$313,500","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "撒挨踢","id": "15","position": "开发主管","office": "纽约","extn": "1965","startDate": "2010/03/17","salary": "$385,750","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "大天师","id": "16","position": "首席运营官","office": "纽约","extn": "1581","startDate": "2012/11/27","salary": "$198,500","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "安欣","id": "17","position": "售前支持","office": "纽约","extn": "3059","startDate": "2010/06/09","salary": "$725,000","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "fas fa-eye","name": "查看详情","class": "btn-detail text-warning"},{"icon": "fas fa-share","name": "转发","class": "btn-share"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "李承鄞","id": "18","position": "集成专家","office": "悉尼","extn": "1721","startDate": "2009/04/10","salary": "$237,500","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "王八卦","id": "19","position": "首席执行官","office": "伦敦","extn": "2558","startDate": "2012/10/13","salary": "$132,000","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "大膜王","id": "20","position": "软件工程师","office": "爱丁堡","extn": "2290","startDate": "2012/09/26","salary": "$217,500","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "李泽言","id": "21","position": "初级技术作者","office": "加拿大","extn": "1937","startDate": "2011/09/03","salary": "$345,000","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "魏什么","id": "22","position": "售前支持","office": "洛杉矶","extn": "6154","startDate": "2009/06/25","salary": "$675,000","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "欧活泼","id": "23","position": "软件工程师","office": "洛杉矶","extn": "8330","startDate": "2011/12/12","salary": "$106,450","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "买辣椒也用券","id": "24","position": "售前支持","office": "东京","extn": "3023","startDate": "2010/09/20","salary": "$85,600","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "要不要买菜","id": "25","position": "会计","office": "东京","extn": "5797","startDate": "2009/10/09","salary": "$20,000","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete btn-red"}]},{"name": "勋悟空","id": "26","position": "首席执行官","office": "伦敦","extn": "8822","startDate": "2010/12/22","salary": "$92,575","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "何猜想","id": "27","position": "初级技术作者","office": "旧金山","extn": "9239","startDate": "2010/11/14","salary": "$357,650","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "撒德巴","id": "28","position": "软件工程师","office": "旧金山","extn": "1314","startDate": "2011/06/07","salary": "$206,850","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "撒微笑","id": "29","position": "代言人","office": "旧金山","extn": "2947","startDate": "2010/03/11","salary": "$850,000","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]},{"name": "许红豆","id": "30","position": "区域经理","office": "上海","extn": "8899","startDate": "2011/08/14","salary": "$163,000","btn": [{"icon": "fa fa-edit","name": "","class": "btn-edit text-success"},{"icon": "fa fa-edit","name": "编辑","class": "btn-edit text-success"},{"icon": "far fa-trash-alt","name": "删除","class": "btn-delete text-danger"}]}]
}

可能遇到的问题

1. json文件中文乱码，可通过指定编码字符集为utf8修复，若无效，则需检查文件编码，方式参考记事本更改文件编码

2. 汉化语言包需要在datatable初始化之前进行扩展

3. 当某一列既含有中文又含有英文时，排序规则为中文翻译为英文后的首字母顺序，这个bug目前除了统一语言，没有找到好的解决方案，欢迎私信交流

4. 表头坍塌参考https://www.freesion.com/article/18301382656/

5. 比较完整的属性汇总案例参考

• https://www.shuzhiduo.com/A/MAzA34ln59/

• https://blog.csdn.net/CSxiaoyuhan/article/details/77866178