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": "没有检索到数据" } });