当前位置: > > > jQuery - 第三方表格插件DataTables使用详解3(文字国际化、loading图片)

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

六、文字国际化

    在前面的样例中我们可以发现不管是按钮,还是提示文字都是英文的。其实只要初始化时通过 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