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

川长思鸟来 2021-06-26 16:06 207阅读 0赞

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

还可以在控件元素外添加`DIV`和`Class`，语法如下  
`<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 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue选项/DOM

Vue选项/DOM * el * template * render * renderError el * 类型：`string | El...

以你之姓@/ 2024年04月17日 05:54/ 0 赞/ 60 阅读

相关 c中tabpage控件上显示的文本_隐藏C#的TabControl控件的选项卡TabPage

在使用TabControl控件时，希望隐藏其中某个选项卡(即TabPage)。TabPage类明明提供了一个Hide方法，用在代码中却没有任何效果，甚是奇怪。无奈之余，只好考虑

亦凉/ 2023年01月08日 07:29/ 0 赞/ 427 阅读

相关 WPF自定义TabControl选项滚动条显示

WPF自定义TabControl选项滚动条显示一、TabControl简介二、自定义TabControl控件三、自定义TabControl选项滚动

梦里梦外;/ 2022年12月11日 15:07/ 0 赞/ 911 阅读

相关 html tab选项卡控件,tab选项卡插件

这是一款使用十分方便的、为移动设备定制的、可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件。在你要显示很多不同的内容时，tab选项卡导航方式是十分有用

阳光穿透心脏的1/2处/ 2022年10月06日 01:50/ 0 赞/ 280 阅读

相关使用Spinner控件实现选项选择

动画样式文件： <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schem

布满荆棘的人生/ 2022年09月24日 05:28/ 0 赞/ 249 阅读

相关 swift之自定义表格控件（UITableView）

1，效果图 ![Center][] 2、控件 storyboard上的控件就2个：UIButton。 3、为按钮添加点击事件通过辅助编辑器为这2个

比眉伴天荒/ 2022年08月20日 15:28/ 0 赞/ 264 阅读

相关 MFC选项卡控件的使用

1.新建一个TabControlTest，选择Dialog based, 然后Finish。 2. 在对话框上添加Tab控件，然后，在控件上右键添加变量，变量名为m\_Tab

悠悠/ 2022年08月18日 02:42/ 0 赞/ 235 阅读

相关使用RadioGroup控件实现选项选择功能

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="ap

分手后的思念是犯贱/ 2022年07月20日 12:13/ 0 赞/ 216 阅读

相关 Tab选项页面的切换

开发工具与关键技术：Visual Studio 作者：肖广斌撰写时间：2019年6月16日你们的项目中是否有一个页面里面需要放多个不同页面，不同

今天药忘吃喽~/ 2022年01月13日 12:17/ 0 赞/ 303 阅读

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

每个控件元素在数据表都有一个关联的单个字母。 `l` — 每页显示行数的控件（显示选择每页显示条数的下拉框） `f` — 检索条件的控件（搜索框的关联字母） `t`

川长思鸟来/ 2021年06月26日 16:06/ 0 赞/ 208 阅读