jQuery DataTables的国际化i18n

简介

jQuery DataTables增强一个HTML table时，会向 HTML 文档 (document)增加很多控件(control),这些控件使用了很多语言字符串。这些语言字符串缺省情况下使用英语,但也可以是其他语言，甚至可以根据你的表格的样式量身定制。

jQuery DataTables社区提供了50多种语言字符串翻译。具体都支持哪些语言，可以参考这里 :
jQuery DataTables的国际化插件
从这个页面里的语言列表里我们可以看到，简体中文和繁体中文都被支持。

配置语言字符串

基本使用方法

jQuery DataTables使用什么样的语言字符串通过其语言选项 language option 配置选项来设置。language option 其实是一个JSON对象，作为 jQuery DataTables 的配置参数传入，具体使用方法如下例子所示 :

$('#example').DataTable( {
    language: {
        search: "Search in table:"
    }
} );

上面的例子中，只提到了 language option 中的一项 search, 事实上 language option 不止这一项，当 language option 被作为参数传入时，对于那些没有明确指定值的项， jQuery DataTables 会使用其缺省值。

使用这种方式，开发者需要先判断出要使用何种语言，然后向语言选项中设置相应的语言字符串。这种情况下，如果需要切换语言，就需要在目标DOM上，使用新的语言选项重新执行一遍上述逻辑。

主要语言配置项

通过以下例子展示主要语言配置项，该例子是一个英文的例子，//后面是注释

{
    "decimal":        "",
    "emptyTable":     "No data available in table",//表格没有数据时展示的文字
    "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
    "infoEmpty":      "Showing 0 to 0 of 0 entries",
    "infoFiltered":   "(filtered from _MAX_ total entries)",
    "infoPostFix":    "",
    "thousands":      ",",// thousands separator, 千位数字分隔符
    "lengthMenu":     "Show _MENU_ entries",
    "loadingRecords": "Loading...",// 加载数据过程中展示的文字
    "processing":     "Processing...",// 处理过程中展示的文字
    "search":         "Search:",// 搜索框提示文字
    "zeroRecords":    "No matching records found", // 没有找到匹配数据时的提示文字
    "paginate": { // 分页功能按钮提示文字 
        "first":      "First",// 第一页
        "last":       "Last", // 最后一页 
        "next":       "Next", // 下一页
        "previous":   "Previous" //  上一页
    },
    "aria": {
        "sortAscending":  ": activate to sort column ascending",//按列升序排序
        "sortDescending": ": activate to sort column descending"//按列降序排序
    }
}

上面的例子里面展示了一些主要的语言配置项。从 jQuery DataTables 1.10.7开始，插件开发者可以使用新的 i18n() API 方法获取 languange option 对象中的语言信息。因此，这里所列出的选项并不是所有选项。如果想了解可以使用的语言参数的所有信息，可以参考 i8n() API方法的文档 :
i18n API

下面列出 jQuery DataTables 社区提供的简体中文的版本 :

{
    "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": ": 以降序排列此列"
    }
}

注意 : 在上面的两个例子中，选项名称是大小写区分的,并且支持等价的两种用法,如下举例讲解 :

• 用法1 : sEmptyTable
• 用法2 : emptyTable
• sEmptyTable,emptyTable 均存在时，优先使用 sEmptyTable

内容来源 :
jQuery DataTables Chinese

AJAX方式设置语言选项

除了上述为言选项直接指定所需值的方式，jQuery DataTables还支持AJAX方式异步从远程文件加载语言选项的值。使用方法如下 :

$('#example').DataTable( {
    language: {
        url: '/localisation/zh_CN.json'
    }
} );

通过这种用法,我们可以把包含语言选项值的内容放在远端服务器，文件名命名中体现出使用了何种语言，这样在浏览器端，就可以根据用户(或者浏览器)所选择的语言来加载相应语言的语言选项。