datables DataTable 参数和中文

2023年3月25日 525点热度 0人点赞 0条评论

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":    "<<"
        }
    }
} );

 

管理员

这个人很懒,什么都没留下

文章评论