返回 导航

其他

hangge.com

jQuery - 第三方表格插件DataTables使用详解3（文字国际化、loading图片）

作者：hangge | 2018-03-13 08:32

六、文字国际化

    在前面的样例中我们可以发现不管是按钮，还是提示文字都是英文的。其实只要初始化时通过 oLanguage 配置项即可实现文字的自定义或者国际化。下面通过样例演示如何将界面文字改成中文。

1，将按钮、标签文字修改成中文

（1）样例代码 
$('#myTable').DataTable({
    "oLanguage": {
      "sSearch": "搜索",
      "sLengthMenu": "每页显示 _MENU_ 条记录",
      "sZeroRecords": "抱歉， 没有找到",
      "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
      "sInfoEmpty": "没有数据",
      "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
      "oPaginate": {
        "sFirst": "首页",
        "sPrevious": "前一页",
        "sNext": "后一页",
        "sLast": "尾页"
      },
      "sProcessing": "正在加载数据......",
      "sZeroRecords": "没有检索到数据"
    }
});

（2）有数据时的效果： 

（3）无数据时的效果：

2，加载时显示自定义的 loading 图片

（1）通过上面的修改，当我们翻页或者搜索进行数据请求时，表格中央会有一个提示文字：

（2）我们可以通过 oLanguage 配置项里的 sProcessing 属性将其修改为动态图片或者其它任意的 DOM 元素。
$('#myTable').DataTable({
    "oLanguage": {
      "sSearch": "搜索",
      "sLengthMenu": "每页显示 _MENU_ 条记录",
      "sZeroRecords": "抱歉， 没有找到",
      "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
      "sInfoEmpty": "没有数据",
      "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
      "oPaginate": {
        "sFirst": "首页",
        "sPrevious": "前一页",
        "sNext": "后一页",
        "sLast": "尾页"
      },
      "sProcessing": "<img src='./loading.gif' width='35px' height='35px' />",
      "sZeroRecords": "没有检索到数据"
    }
});
评论

全部评论（0）

回到顶部