datatables是一款基于JQuery的插件用来优化table,支持表格分页、搜索、排序、显示条数、异步加载等功能
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
datatables是一款基于JQuery的表格插件,主要用来优化table,支持表格分页、搜索、排序、显示条数、异步加载等众多好用的功能 基本使用需要用到的JS和CSS文件位于项目代码下的media目录中,需要将这个目录中的对应文件放入你的项目里,这一步不赘述
<!-- 加载 Jquery --><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><!-- 加载 Datatables --><link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" /><script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="myTable" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Ops Coffee</td> <td>System Architect</td> <td>Edinburgh</td> <td>18</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <!-- 中间省略一些tr数据 --> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot></table> $(document).ready( function () { $('#myTable').DataTable(); });
功能开启/关闭默认界面下除了原始的table外,还为table额外增加了搜索、列排序、分页及信息显示这些内容,如果不需要其中一个或多个可以通过以下设置隐藏 $('#myTable').DataTable({ "paging": false, "ordering": false, "info": false, "searching": false, }); paging: 控制分页是否开启,默认开启,开启后会显示表格左上角的每页行数选择和右下角的页码跳转 ordering: 控制是否进行排序,默认开启,且默认会对第一列数据进行排序 info: 控制是否显示表格左下角的信息,默认开启 searching: 控制是否显示表格右上角的搜索,默认开启 排序配置单列排序可以通过 "order": [[ 3, "desc" ]], 列号默认从0开始算起,这里的3实际上对应的是第4列,这点要注意,以下所有用到列号的地方都是从0开始 注意:开启 多列排序当然也可以在order里边配置同时按多列排序 "order": [[ 3, "desc" ], [ 0, "desc" ]], 如上配置的意思是先按照3列进行排序,如果3列相同,则再按照0列进行排序 搜索框提示设置"fnPreDrawCallback": function( oSettings ) { $('.dataTables_filter input').attr({'name':'search','placeholder': '按名称搜索'});//提示}, 屏蔽错误提示和自定义错误提示官方参考:https://datatables.net/reference/event/error //初始化之前设置$.fn.dataTable.ext.errMode = 'none'; //屏蔽掉报错弹窗 $('#Table')//初始化的datatables .on( 'error.dt', function ( e, settings, techNote, message ) { //接收并打印错误信息,也可自行添加相应处理方法 console.log( 'An error has been reported by DataTables: ', message ); } ).DataTable({ //其他配置 }); 隐藏列可以通过 "columnDefs": [ { "targets": [ 2 ], "visible": false, "searchable": false }, { "targets": [ 3 ], "visible": false, }] targets: 指定列 visible: 是否可显示 searchable: 是否可搜索,当仅设置 注意:开启 动态隐藏列/** * #tagTable 表格id * column(5) 第6列 * visible(false) true 显示 false不显示 */$('#tagTable').DataTable().column(5).visible(false); 语言配置默认提示语都是英文,可以通过 "language": { "decimal": "", "emptyTable": "表中数据为空", "info": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", "infoEmpty": "显示第 0 至 0 项结果,共 0 项", "infoFiltered": "(由 _MAX_ 项结果过滤)", "InfoPostFix": "", "thousands": ",", "lengthMenu": "显示 _MENU_ 项结果", "loadingRecords": "载入中...", "processing": "处理中...", "search": "搜索:", "zeroRecords": "没有匹配结果", "Paginate": { "sFirst": "首页", "sPrevious": "上一页", "sNext": "下一页", "sLast": "尾页" }, "Aria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } } 状态保持可以通过 "stateSave": true, 分页类型可以通过 "pagingType": "simple_numbers", simple_numbers: 类型会显示上一页、下一页按钮和页码,这也是默认的分页类型 其他几种分页类型如下: numbers: 仅显示页码 simple: 仅显示上一页、下一页按钮 full: 仅显示首页、尾页、上一页和下一页按钮 full_numbers: 显示首页、尾页、上一页、下一页按钮和页码 first_last_numbers: 显示首页、尾页按钮和页码 滚动配置当table的宽、高超过页面设置大小时,可以通过以下配置来添加滚动条 "scrollX": "true","scrollY": "200px","scrollCollapse": true, scrollX: 允许水平滚动条 scrollY: 设置垂直body的高度,当超过这个这个高度时出现垂直滚动条 scrollCollapse: 设置当数据占用高度小于 数据加载上篇文章中的所有数据都是直接渲染的html中的table数据,datatables还支持其他几种数据源,以方便实现更灵活的控制 从数组中获取<table id="myTable-x" class="display" style="width:100%"></table> $(document).ready(function() { var dataSet = [ ["3","https://ops-coffee.cn","2018-07-03"], ["9","https://demo.ops-coffee.cn", "2019-08-06"], ]; $('#myTable-x').DataTable({ "data": dataSet, "columns": [ { title: "Id" }, { title: "Site" }, { title: "Date" }, ] }) }); data: 指定数组 columns: 配置每一列的title 注意:从数组中获取数据一定要有表头,如果没有则可能会报下边的错: Uncaught TypeError: Cannot read property 'aDataSort' of undefined 解决方法就是datatables添加 <table id="myTable-x" class="display" style="width:100%"> <thead> <tr> <th>ID</th> <th>Site</th> <th>Date</th> </tr> </thead></table> 从对象中获取<table id="myTable-x" class="display" style="width:100%"></table> $(document).ready(function() { var dataSet = [ {"Id":"3","Site":"https://ops-coffee.cn","Date":"2018-07-03"}, {"Id":"9","Site":"https://demo.ops-coffee.cn","Date":"2019-08-06"}, ]; $('#myTable-x').DataTable({ "data": dataSet, "columns": [ {"data": "Id", "title": "Id"}, {"data": "Site", "title": "Site"}, {"data": "Date", "title": "Date"}, ] }) }); 使用对象数组,一定要配置columns的 从实例中获取$(document).ready(function() { function dataSet(id, site, date) { this.id = id; this.site = site; this.date = date; }; $('#myTable-x').dataTable({ data: [ new dataSet("3", "https://ops-coffee.cn", "2018-07-03"), new dataSet("9", "https://demo.ops-coffee.cn", "2019-08-06"), ], columns: [ {"data": "id", "title":"Id"}, {"data": "site", "title":"Site"}, {"data": "date", "title":"Date"} ] }); }); Ajax异步获取Datatables还支持Ajax的方式异步加载数据,简单的方式是直接配置一个url地址即可 $(document).ready(function() { $('#myTable-x').dataTable({ "ajax": 'sdata.json' }); }); ajax接收的数据可以是数组或者对象,注意 Ajax异步刷新$('#tagTable').DataTable().reload() 直接刷新 $('#tagTable').DataTable().ajax.url() 支持新的url异步刷新 $('#tagTable').DataTable().ajax.url('{:url("index/material/listAll")}?seachClassId='+id).load(); 表格重载var table = $('#example').DataTable(); table.ajax.reload(); 或者 $('#example').DataTable().ajax.reload(); 当前页面重载//重新加载当前页,且保持当前页码不变$('#'+tableId).DataTable().draw(false);true:重置表格的初始状态,回到第一页,false:只是重新加载当前页,且保持当前页码不变。 列数据处理上边的table可以发现有个site列的内容是一个网址,如果我们想让网址能够点击该如何实现呢?可以利用 $(document).ready(function() { $('#myTable-x').dataTable({ "ajax": 'sdata.json', "columns": [ {"data": "id", "title":"Id"}, { "data": "site", "title":"Site", "render": function (data, type, row) { return '<a href='+data+' target="_blank">'+data+'</a>' } }, {"data": "date", "title":"Date"} ] }); }); render后边跟了个函数,每当数据表需要获取列中某个单元格的数据时 data: 单元格的具体数据,例如 type: 标识了这一次调用的请求类型,会有 row: 这一行的完整数据源,如果像Demo示例传了对象数据,那么可以通过 拿到参数进行一系列的处理后可以通过 当然也可以通过 "columns": [ {"data": "id", "title":"Id"}, { "data": "site", "title":"Site", "render": function (data, type, row) { return '<a href='+data+' target="_blank">'+data+'</a>' } }, {"data": "date", "title":"Date"}, { "data": "id", "title": "操作", "render": function (data, type, row) { return '<a href="#update/'+row.id+'/" class="btn btn-warning btn-sm">编辑</a> ' + '<a href="#delete/'+row.id+'/" class="btn btn-danger btn-sm">删除</a>' } } ] 最终呈现结果如下图 Dom操作如果我不需要datatables显示左上角的每页显示条数信息,而要换成一个添加按钮改怎么做呢?这里可以借助datatables的dom来实现 默认情况下表格都会有左上角的每页显示条数、右上角的搜索、左下角的表格信息、右下角的分页、中间的数据加载等待以及表格本身,这些都是datatables的DOM,它们实际上就是一个div包裹起来的select、input之类的html标签,datatables中的每个DOM都与一个字母相对应,他们的对应关系如下: l: length,代表左上角的每页显示条数控件 f: filtering,代表右上角的搜索控件 t: table,代表表格本身 i: information,代表左下角的表格信息控件 p: pagination,代表右下角的分页控件 r: processing,代表中间数据加载等待提示控件 这些控件在datatables里可以通过配置 $('#myTable-x').dataTable({ "dom": 'lfrtip'}) 你如果不想显示某个控件,可以通过去掉
我们想把右上角的每页显示条数控件换成添加按钮的话可以这样写 $('#myTable-x').dataTable({ "dom": '<"#add-btn.toolbar">frtip'}) $("#add-btn.toolbar").html( '<button href="#add" class="btn btn-success btn-sm"> + 添加</button>') 遇到样式问题,需要添加css <style type="text/css"> .toolbar {float:left}</style> 这样就完美实现了 服务器端处理Datatables支持使用服务端进行数据处理,当开启服务端数据处理后,Datatables将在页面执行分页、排序、搜索等操作时向服务端发出Ajax请求,Ajax请求会传递许多变量给服务端,服务端接收到请求后根据变量的值对数据进行处理,处理完成按照固定的格式返回给前端页面,页面对返回的数据进行渲染提供给用户查看 开启服务器模式只需要两个设置项 $('#myTable-x').dataTable({ "serverSide": true, "processing": true, "ajax": '/api/site/data'}) serverSide: 为true时表示开启服务端处理模式 processing: 为true时会开启数据处理中的提示,非必须 ajax: 指定服务器端的地址,可以像上边一样是个字符串,也可以像jQuery.ajax一样作为一个对象使用,例如我想传递额外的参数(datatables默认会给后端传递许多的参数,下边有讲)给后端服务器的话,可以这样用 $('#myTable-x').dataTable({ "serverSide": true, "processing": true, "ajax": { "url": "/api/site/data", "data": function (d) { d.type = 'ops-coffee'; } } }) data: 可以在发送请求给后端时额外增加 发送到服务器端的参数当开启服务端数据处理后,默认会给服务端传递许多参数,大概如下: draw:绘制计数器,主要用来确保Ajax从服务器端接收到的数据是对应同一次请求的 start:第一条数据的起始位置 length:每页显示的条数 search[value]:全局的检索关键字order[i][column]:告诉服务器哪些列是需要排序的,i为排序列的序号,下边的i相同含义,注意i是从0开始的order[i][dir]:告诉服务器排序的方式"desc","asc"columns[i][data]:columns上定义的data属性值columns[i][name]:columns上定义的name属性值columns[i][searchable]:告诉服务器哪些列可以被搜索columns[i][orderable]:告诉服务器哪些列可以进行排序columns[i][search][value]:告诉服务器某些列的具体搜索条件 如果需要后台分页,那么需要拿到 如果有搜索的内容,那么需要拿到 服务端返回数据的格式服务端需要返回datatables可以处理的数据格式,具体数据格式如下: { "draw": 1, "recordsTotal": 7, "recordsFiltered": 7, "data": [ { "id": 3, "site": "https://ops-coffee.cn", "date": "2018-07-03" }, { "id": 9, "site": "https://demo.ops-coffee.cn", "date": "2019-08-06" } // 省略其他结果 ]} draw: 客户端调用服务端次数标识,客户端传过来是什么原样返回回去即可,无需修改 recordsTotal: 数据总条数,没有过滤的数据总条数 recordsFiltered: 过滤后符合要求的条数,如果没有搜索参数那么这个值与 data: 需要显示的具体数据,json格式 API调用Datatables提供了强大的API来处理表格上的数据,可以通过API添加数据到已经存在的表格,或者对已经存在的数据进行操作,API的类型非常丰富,详细的信息可以查阅官网,使用方法如下: 跳转到页跳转到第3页: var table = $('#myTable').DataTable() table.page(2).draw(false) page(2): page为分页方法,后边的2表示跳转到第几页,可以是一个数字,也可以是 draw(false): 对表格进行重绘以实现表格更新的显示,大多数的api操作都不会直接更新在页面上,所以需要调用下 搜索某列搜索第2列包含 var tablx = $('#myTable').dataTable() tablx.api().column(1).search('https://ops-coffee.cn').draw() 首先需要注意这个例子中的API调用使用了 重新设置ajax data属性var api = $('#tagTable').dataTable().api(); //初始化的ajax data选项 $data = api.settings()[0].ajax.data; //重新设置 $data.type = '12321321'; //重载表格 api.draw(); 导出https://datatables.net/download 官方下载 导出Excel<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tableTools</title> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!--datatables 的样式和导出excel的js--> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.js"></script> <script> $(document).ready(function () { $('#myTable').DataTable({ dom: 'Bfrtip', buttons: [ 'excelHtml5', ] }); }); </script></head><body><div class="col-md-12 col-sm-12"> <!-- BEGIN EXAMPLE TABLE PORTLET--> <div class="portlet box blue-hoki"> <div class="portlet-title"> <div class="caption"> <i class="fa fa-list"></i>数据列表 </div> <div class="tools"> </div> </div> <div class="portlet-body"> <table id="myTable" class="table table-striped table-bordered table-hover" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> <tr> <th>Name111</th> <th>Position111</th> <th>Office111</th> <th>Age111</th> <th>Start date111</th> <th>Salary111</th> </tr> </thead> <tbody> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>Jonas Alexander</td> <td>Developer</td> <td>San Francisco</td> <td>30</td> <td>2010/07/14</td> <td>$86,500</td> </tr> <tr> <td>Shad Decker</td> <td>Regional Director</td> <td>Edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$183,000</td> </tr> <tr> <td>Michael Bruce</td> <td>Javascript Developer</td> <td>Singapore</td> <td>29</td> <td>2011/06/27</td> <td>$183,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> </div> </div></div></body></html> 运行结果 导出PDFpdf是不支持中文的暂时无解决方案 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tableTools</title> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!--datatables 的样式和导出excel的js--> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.js"></script> <!--PDF--> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.21/b-1.6.2/b-html5-1.6.2/datatables.min.js"></script> <script> $(document).ready(function () { $('#myTable').DataTable({ dom: 'Bfrtip', buttons: [ 'excelHtml5', 'pdfHtml5', ] }); }); </script></head><body><div class="col-md-12 col-sm-12"> <!-- BEGIN EXAMPLE TABLE PORTLET--> <div class="portlet box blue-hoki"> <div class="portlet-title"> <div class="caption"> <i class="fa fa-list"></i>数据列表 </div> <div class="tools"> </div> </div> <div class="portlet-body"> <table id="myTable" class="table table-striped table-bordered table-hover" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> <tr> <th>Name111</th> <th>Position111</th> <th>Office111</th> <th>Age111</th> <th>Start date111</th> <th>Salary111</th> </tr> </thead> <tbody> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>Jonas Alexander</td> <td>Developer</td> <td>San Francisco</td> <td>30</td> <td>2010/07/14</td> <td>$86,500</td> </tr> <tr> <td>Shad Decker</td> <td>Regional Director</td> <td>Edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$183,000</td> </tr> <tr> <td>Michael Bruce</td> <td>Javascript Developer</td> <td>Singapore</td> <td>29</td> <td>2011/06/27</td> <td>$183,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> </div> </div></div></body></html> 运行效果 导出按钮的配置例: dom: 'Bfrtip',buttons: [ { //按钮 extend: "copy", //按钮名称 text: '复制', //按钮的class名称 className : 'export-btn'}, { extend: "excelHtml5", text: '导出excel', className : 'export-btn'}, { extend: "copy", text: '导出pdf', className : 'export-btn' }, //'copy', 'excelHtml5','pdfHtml5'], 所有配置选项 https://datatables.net/reference/option/buttons.buttons
导出设置https://datatables.net/extensions/buttons/examples/html5/outputFormat-function.html 参考文章:https://ops-coffee.cn/s/mx2gjLmO7jHKagGsWF6eJw 事件相关http://datatables.club/reference/event/ Datatables对自己所触发的事件都有监听,我们可以监听这些动作做相应的处理,比如表格重绘的时候,我需要做一些操作 Datatables的事件监听使用 $('#myTable').on('draw.dt',function() { alert('Table redrawn'); }); 事件(Events)
该文章在 2023/5/25 15:07:06 编辑过 |
关键字查询
相关文章
正在查询... |