1. 初始化DataTable
DataTable使用方便,快捷。但有时候用户需求对分页有需求,例如输入页数进行分页跳转。
这样就需要扩展功能了,datatable也支持自定义扩展,下面以使用DataTable bootstrap分页为例
var $table = $('#listTable');
var listTable = $table.DataTable({
language: { url: path + '/resources/js/bootstrap/dtChinese.json' },
searching: false, //搜索栏
ordering: true, //排序
scrollX: true,
scrollY: scrollY, //表格滚动区高度
columns: columns,
serverSide: true, //打开后台分页
processing: true, //打开数据加载时的等待效果
lengthChange: false, //禁用每页显示的记录数
sPaginationType: "bootstrap", //bootstrap / full_numbers
// lengthMenu: [
// [20, 50, 100, -1],
// [20, 50, 100, "All"]
// ],
pageLength: 20,
ajax: path + '/searchBase?name=' + sqlStr + '&type=getSqlValues&dataBase=' + opt.dataBase
});
sPaginationType 类型
simple_numbers: 类型会显示上一页、下一页按钮和页码,这也是默认的分页类型
其他几种分页类型如下:
numbers: 仅显示页码
simple: 仅显示上一页、下一页按钮
full: 仅显示首页、尾页、上一页和下一页按钮
full_numbers: 显示首页、尾页、上一页、下一页按钮和页码
first_last_numbers: 显示首页、尾页按钮和页码
DataTable自定义分页(bootstrap分页)中文设置
/* Set the defaults for DataTables initialisation */
$.extend( true, $.fn.dataTable.defaults, {
// "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sSearch": "快速搜索:",
"bAutoWidth": true,
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "Nothing found - 没有记录",
"sInfo": "_START_ 到 _END_ 条,共 _TOTAL_ 条",
"sInfoEmpty": "显示0条记录",
"sInfoFiltered": "(从 _MAX_ 条中过滤)",
// "sProcessing":"<div style=''><img src='../static/img/loader.gif'><span>加载中...</span></div>",
"oPaginate": {
"sPrevious": "",
"sNext": "",
"sLast": ">>",
"sFirst": "<<"
}
}
} );
文章评论