Datatables.js选项之DOM:定义表格控件在页面的显示顺序以及language语言选项

每个控件元素在数据表都有一个关联的单个字母。
l — 每页显示行数的控件(显示选择每页显示条数的下拉框)
f — 检索条件的控件(搜索框的关联字母)
t — 表格控件(显示表格的关联字母)
i — 表信息总结的控件(比如显示 - 第 1 页 / 总 5 页和过滤总件数 _MAX_ 条等总结信息)
p — 分页控件(显示上一页12345…下一页的关联字母)
r — 处理中的控件(显示处理中…加载中…等)

还可以在控件元素外添加DIVClass,语法如下
<and> — DIV元素
<"class" and> — DIV和Class
<"#id" and> — DIV和ID

如:

"dom": 'lfrtip',//这些功能默认的位置是这样的每个字母的先后代表每个功能输出在页面上的先后

"dom": 'lrtip'  页面少了f  --- 检索条件的控件(搜索框)

例子:

var data1 = [{
    "name": "aaTiger Nixon",
    "position": "System Architect",
    "salary": "$3,120",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": "5421"
}, {
    "name": "aaGarrett Winters",
    "position": "Director",
    "salary": "$5,300",
    "start_date": "2011/07/25",
    "office": "Edinburgh",
    "extn": "8422"
}, 
];

$(document).ready(function () {
    $('#table_id').DataTable({
        //"dom": '<"bbb"lfrtip>',//这些功能默认的位置是这样的
        dom: 'B<"toolbar">frtip',
        
        "buttons": [{
            extend: 'collection',
            text: 'Export',
            buttons: [
                'copy',
                'excel',
                'csv',
                'pdf',
                'print'
            ]
        }],
        
        data: data1,
        columns: [{
                data: 'name'
            }, {
                data: 'position'
            }, /*注意这里的数据要和table<th>要一一对应*/ {
                data: 'salary'
            }, {
                data: 'office'
            }, {
                data: 'extn'
            }
        ],
        'language': {
            "emptyTable": "没有数据",
            "info": "从 _TOTAL_ 数据中显示 _START_ 到 _END_ 条数据",
            "infoEmpty": "从0条记录中显示0到0条记录",
            "infoFiltered": "(查询筛选时总共过滤 _MAX_ 条)",
            "infoPostFix": "",
            "thousands": ",",
            "lengthMenu": "每页显示 _MENU_ 记录(数据)",
            "loadingRecords": "加载中...",
            "processing": "查询中...",
            "search": "查询筛选:",
            "zeroRecords": "没有数据",
            "paginate": {
                "first": "首页",
                "last": "尾页",
                "next": "下一页",
                "previous": "上一页"
            },
            "aria": {
                "sortAscending": ": 激活列升序排序",
                "sortDescending": ": 激活列降序排序"
            },
            'info': '第 _PAGE_ 页 / 总 _PAGES_ 页', //加上这条 language里的info会被覆盖将不再显示
            'infoEmpty': '没有数据', //加上这条 language里的emptyTable会被覆盖将不再显示
            'infoFiltered': '(过滤总件数 _MAX_ 条)' //加上这条 language里的infoFiltered会被覆盖将不再显示
        }
        //paging:false,//分页
        //scrolly:400,//滚动条
        //分页和滚动条是连用的因为如果分页默认是开着的那么滚动条是无效的貌似只将分页关掉也会有滚动条出现
    });
    $("div.toolbar").html('<b style="color:red">自定义文字图片等。。。</>');
});

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值