datatables入门demo

本文档介绍了DataTables的基本使用方法,从环境准备到创建最简单的表格,再到汉化、响应式、按钮功能和操作区的配置。通过实例演示了如何自定义表格,包括获取数据、修改功能和各种配置选项的详细说明。
摘要由CSDN通过智能技术生成

 

1、环境准备

首先准备需要的js和css,在官网的页面可以定制,https://datatables.net/download/

1.1 Choose a styling framework 选择需要样式骨架

1.2 Select packages 选择jQuery3或1和Data Tables,如果需要支持IE9之前的版本需要选择jQuery1

1.3 Extensions 提供的拓展包 比如自适应,导出成为excel,pdf等等 

1.4 选择引用方式,当你选择后需要的文件和拓展后,官方会提供一个cdn的引用,或者可以选择下载下来(文件结合的方式or单个文件的方式)

2 写一个最简单demo

2.1  写一个最简单的表格

<table id="table_id" class="display">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>Start date</th>
        <th>Salary</th>
        <!--<th>note</th>-->
       </tr>
    </thead>
</table>

2.2 初始化数据表

$(document).ready( function () {
    $('#table_id').DataTable({
        ajax: "resultDemo.txt"
});
} );

    上面第一行代码的意思就是页面加载完成后执行初始化表格的操作。默认情况下,数据表将向您的表添加排序搜索分页和信息,使您的最终用户能够尽快找到他们想要的信息。

2.3 成果截图

如果要自定义数据表,可以通过在传递给dataTable()函数的对象中指定配置参数来实现。有关如何使用这些配置参数的信息,请参阅选项手册页。下面介绍一些常用的配置参数

3 常用功能介绍

3.1 汉化

根据官网提供的参数进行手动翻译;提供的参数地址是:https://datatables.net/reference/option/language

$(document).ready( function () {
    $('#table_id').DataTable({
    //汉化
                language: {
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起,查询不到任何相关数据",
                    "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_条记录",
                    "sInfoEmpty": "找不到相关数据",
                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
                    "sProcessing": "正在加载中...",
                    "sSearch": "搜索",
                    "oPaginate": {
                        "sFirst": "第一页",
                        "sPrevious": " 上一页 ",
                        "sNext": " 下一页 ",
                        "sLast": " 最后一页 "
                    },
                    "select": {
                        "rows": {
                            _: "选中了 %d 行",
                            0: "点击一行去选中",
                            1: "选择了 1 行"
                        }
                    }
                }
});
} );

第二种方式是使用外部的汉化包

$('#example').dataTable( {
  "language": {
    "url": "/dataTables/i18n/de_de.lang"
  }
} );

3.2 响应式(需要引入相关js,具体步骤按照上面提示)

在表格参数中加入responsive: true即可,当屏幕尺寸渐渐缩小的时候,后面的列就会自动隐藏到+号里面。那么能不能定义优先级,让我去定义哪些列优先隐藏,哪些列后隐藏。当然可以,在columns中定义responsivePriority属性即可。如下:(引用网络提供的例子)

columns: [
    { "data": null, sortable: false, defaultContent: '' , responsivePriority:  2},
    { "data": "id" },
    { "data": "name", responsivePriority:  1},
    { "data": "price" , responsivePriority:  3},
    { "data": "column1" },
    { 'data': "column2" },
    { "data": "column3" },
    { "data": "column4" },
    { "data": null , defaultContent: '' ,responsivePriority: 4}
],

 值越小,显示优先级越高,没有设置值的地方,按照列的先后顺序依次隐藏。

最后看结果:

3.3 按钮功能(同样需要引入相关js)

你可以添加复制表格,导出成为excel,导出成为pdf的功能

$(document).ready( function () {
    $('#table_id').DataTable({
//需要同时设置dom和buttons,不然buttons容易把“每页显示X条记录”给覆盖
        dom: '<lfB<t>ip>',
        buttons: [
            'copy', 'excel', 'pdf'
        ],
});
} );

结果截图

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值