seo做得好的企业网站,网站水印设置作教程,做网站怎样快速收录,手机网站开发人员选项本文用于自己记录#xff0c;忘记时可以用来回顾。点击这里进入JQuerydatatable官网API地址 JQuery Datatables初始化
个人比较喜欢JQueryDatatables的Bootstrap4风格#xff0c;所以文章以Bootstrap4风格为例。
JQueryDatatable的初始化很简单#xff0c;按照官网的举例说… 本文用于自己记录忘记时可以用来回顾。点击这里进入JQuerydatatable官网API地址 JQuery Datatables初始化
个人比较喜欢JQueryDatatables的Bootstrap4风格所以文章以Bootstrap4风格为例。
JQueryDatatable的初始化很简单按照官网的举例说明只要如下几个JS和CSS文件即可
1、jquery-3.3.1.min.js当然高版本的JS也是可以的
2、jquery.dataTables.min.js
3、dataTables.bootstrap4.min.js
4、bootstrap.min.css
5、dataTables.bootstrap4.min.css
注意JS文件的引用顺序很重要JQuery必须放在第一位然后dataTables.min.js是第二位JQuery不能重复引用
既然使用了bootstrap.min.css那我加入了bootstrap.min.js了就用Bootstrap框架。忽略文件路径代码如下图所示
script src~/Scripts/jquery-3.4.1.min.js/script
script src~/Scripts/datatables/jquery.dataTables.min.js/script
script src~/Scripts/datatables/dataTables.bootstrap4.min.js/script
link href~/Content/bootstrap.min.css relstylesheet /
link href~/Scripts/datatables/dataTables.bootstrap4.min.css relstylesheet /
script src~/Scripts/bootstrap.min.js/script 再加入官网复制来的HTML代码(因为太长所以这里只列举了一部分)如下图所示
table idexample classtable table-striped table-bordered stylewhite-space: nowrap;width:100%;cursor:pointer cellspacing0theadtrth/ththName/ththPosition/ththOffice/ththAge/ththSalary/th/tr/theadtbodytrtd/tdtdTiger Nixon/tdtdSystem Architect/tdtdEdinburgh/tdtd61/tdtd$320,800/td/tr............./tbody/table
再加入一段基本的JS代码如下图所示
script typetext/javascriptvar dtsLanguage /Scripts/datatables/datatables_zh-cn.txtvar mytable;$(document).ready(function () {mytable $(#example).DataTable({pagingType: full_numbers,language: {url: dtsLanguage}});mytable.on(order.dt search.dt, function () {mytable.column(0, { search: applied, order: applied }).nodes().each(function (cell, i) {cell.innerHTML i 1;});}).draw();});
/script
变量dtsLanguage存放了一个配置文件地址配置文件用于更换默认英文的语言配置为中文配置配置文件的内容如下
{buttons: {pageLength: 显示 %d 行,excel:i classfa fa-file-excel-o/inbsp;导出Excel},decimal: ,emptyTable: 表中数据为空,info: 显示第 _START_ 至 _END_ 项结果共 _TOTAL_ 项,infoEmpty: 显示第 0 至 0 项结果共 0 项,infoFiltered: (由 _MAX_ 项结果过滤),InfoPostFix: ,thousands: ,,lengthMenu: 显示 _MENU_ 项结果,loadingRecords: 载入中...,processing: 处理中...,search: 搜索:,zeroRecords: 没有匹配结果,oPaginate: {sFirst: 首页,sPrevious: 上一页,sNext: 下一页,sLast: 尾页},Aria: {sSortAscending: : 以升序排列此列,sSortDescending: : 以降序排列此列}
}
pagingType属性是分页类型用“full_numbers”就可以了 显示首页尾页上一页下一页当前页默认用这个就可以了。 以下这段JS代码的目的是显示行号非必须。具体说明参考官方说明datatables行号实现 mytable.on(order.dt search.dt, function () {mytable.column(0, { search: applied, order: applied }).nodes().each(function (cell, i) {cell.innerHTML i 1;});}).draw();
完成上述代码后就可以看到初步样子了如下图所示 扩展功能之Buttons JQuery datatables自带一些常用的功能按钮比如导出EXCEL等。也支持自定义按钮。具体API参考官网Button相关介绍 默认的按钮样式在datatable初始化的JS和CSS基础上再加两个JS和CSS文件即可
1、dataTables.buttons.min.js
2、buttons.dataTables.min.css
注意datatable.buttons.min.js必须放在第一位。
因为要跟初始化一样的风格所以在再引用Bootstrap4风格的JS和CSS文件
3、buttons.bootstrap4.min.js
4、buttons.bootstrap4.min.css
忽略文件引用路径代码如下图所示
*基础buttons相关*
script src~/Scripts/buttons/dataTables.buttons.min.js/script
script src~/Scripts/buttons/buttons.bootstrap4.min.js/script
link href~/Scripts/buttons/buttons.bootstrap4.min.css relstylesheet /
link href~/Scripts/buttons/buttons.dataTables.min.css relstylesheet /
可见列
支持手动选择表格中哪些列是显示的哪些列是不可显示的。
引用的JS文件如下图所示
5、buttons.colVis.min.js 打印
支持用浏览器端直接打印页面功能。
引用的JS文件如下图所示
6、buttons.print.min.js 复制
支持复制表格中的数据功能。
引用JS文件如下图所示
7、buttons.html5.min.js 导出PDF
支持导出PDF功能。
引用JS文件如下图所示
8、pdfmake.min.js
9、vfs_fonts.js 导出EXCEL功能
支持导出Excel功能。
引用JS文件如下图所示
10、jszip.min.js 自定义按钮
支持自定义功能按钮。引入基础Buttons的JS和CSS即可。 所有JS引用如下图所示
*基础buttons相关*
script src~/Scripts/buttons/dataTables.buttons.min.js/script
script src~/Scripts/buttons/buttons.bootstrap4.min.js/script
link href~/Scripts/buttons/buttons.bootstrap4.min.css relstylesheet /
link href~/Scripts/buttons/buttons.dataTables.min.css relstylesheet /*复制相关*
script src~/Scripts/buttons/buttons.html5.min.js/script
*excel导出相关*
script src~/Scripts/buttons/jszip.min.js/script
*打印相关*
script src~/Scripts/buttons/buttons.print.min.js/script
*可见列相关*
script src~/Scripts/buttons/buttons.colVis.min.js/script
*导出PDF相关*
script src~/Scripts/buttons/pdfmake.min.js/script
script src~/Scripts/buttons/vfs_fonts.js/script
将datables相关的JS代码修改下如下图所示 mytable $(#example).DataTable({dom: Bfrtip,lengthChange: false,pagingType: full_numbers,buttons: [pageLength,colvis,copy,print,pdf,excel,{text: 自定义按钮一,className: btn,action: function (e, table, node, config) {}},],language: {url: dtsLanguage}});
此时再次运行程序如下图所示 扩展功能之Select 到目前为止表格中任意行是不能被选中点亮的。也无法触发任何点击事件。扩展功能Select提供对这个操作的支持。具体API参考官网Select介绍 默认选中样式只要引用两个JS和CSS文件就可以了 1、dataTables.select.min.js 2、select.dataTables.min.css
因为要用Booststrap4风格就必须再引用一个CSS文件
3、select.bootstrap4.min.css 忽略文件引用路径如下图所示
*select相关*
script src~/Scripts/select/dataTables.select.min.js/script
link href~/Scripts/select/select.dataTables.min.css relstylesheet /
link href~/Scripts/select/select.bootstrap4.min.css relstylesheet / select的初始化很简单只需要加一句代码就可以了selecttrue。修改datatable相关的JS代码如下图所示 mytable $(#example).DataTable({dom: Bfrtip,select:true,pagingType: full_numbers,buttons: [pageLength,colvis,copy,print,pdf,excel,{text: 自定义按钮一,className: btn,action: function (e, table, node, config) {}},],language: {url: dtsLanguage}});
这时运行程序效果如下图所示 如需要多行选择修改代码如下图所示 select: {style: multi},运行效果如下图所示 如果需要在把第一列变成选择框可以修改代码如下图所示 mytable $(#example).DataTable({dom: Bfrtip,columnDefs: [{orderable: false,className: select-checkbox,targets: 0}],select: {style: multi,selector: td:first-child},pagingType: full_numbers,buttons: [pageLength,colvis,copy,print,pdf,excel,{text: 自定义按钮一,className: btn,action: function (e, table, node, config) {}},],language: {url: dtsLanguage}});
使用效果如下图所示 配置select的中文提示在配置文件中修改关于select的提示此时配置文件中的内容如下图所示 再次运行可以看到已经变成中文提示 表格全选和全部取消
select提供跟button先关的全选和全部取消功能修改datatable相关的JS代码如下
mytable $(#example).DataTable({dom: Bfrtip,columnDefs: [{orderable: false,className: select-checkbox,targets: 0}],select: {style: multi,selector: td:first-child},pagingType: full_numbers,buttons: [pageLength,colvis,copy,print,pdf,excel,{text: 自定义按钮一,className: btn,action: function (e, table, node, config) {}},selectAll,//全选selectNone,//全部取消],language: {url: dtsLanguage}});
运行效果如下图所示 扩展功能之ColReorder datatables可以手动对列进行移动排序。具体API请查看官网对ColReorder的介绍 Bootstrap风格的ColReorder样式只需要引用两个JS和CSS文件就可以了
1、dataTables.colReorder.min.js
2、colReorder.bootstrap4.min.css
忽略文件引用路径如下图所示
*ColReorder相关*
script src~/Scripts/ColReorder/dataTables.colReorder.min.js/script
link href~/Scripts/ColReorder/colReorder.bootstrap4.min.css relstylesheet /
ColReorder的初始化也很简单只要加一句代码就可以了colReorder: true 。
修改datatables相关的JS代码如下图所示
mytable $(#example).DataTable({dom: Bfrtip,colReorder: true,//初始化ColReordercolumnDefs: [{orderable: false,className: select-checkbox,targets: 0}],select: {style: multi,selector: td:first-child},pagingType: full_numbers,buttons: [pageLength,colvis,copy,print,pdf,excel,{text: 自定义按钮一,className: btn,action: function (e, table, node, config) {}},selectAll,selectNone,],language: {url: dtsLanguage}});
此刻便可以用鼠标点击拖动任何一列到任何位置 拖动后的效果 扩展功能之FixedColumns datatables提供对固定列的支持。具体API参考官网对fixedcolumns详细说明 Bootstrap风格的FixedColumns只需要引用两个JS和CSS文件即可
1、dataTables.fixedColumns.min.js
2、fixedColumns.bootstrap4.min.css
忽略文件路径如下图所示
*fixdeCol*
script src~/Scripts/fixedcol/dataTables.fixedColumns.min.js/script
link href~/Scripts/fixedcol/fixedColumns.bootstrap4.min.css relstylesheet / FixedColumns的初始化也是很多简单的只需要一句代码即可fixedColumns: true
修改datatable的JS代码如下这里为了显示固定效果将datatable的长和宽缩小了并去掉了Select相关功能从目前的结果来看select 和 fixedColumns有一定程度上的不兼容。 mytable $(#example).DataTable({dom: Bfrtip,colReorder: true,scrollY: 300px,scrollX: true,scrollCollapse: true,fixedColumns: true,pagingType: full_numbers,buttons: [pageLength,colvis,copy,print,pdf,excel,{text: 自定义按钮一,className: btn,action: function (e, table, node, config) {}},selectAll,selectNone,],language: {url: dtsLanguage}});
运行效果如下图所示,可以看到第一列已经固定了 本文将会持续更新。。。。。
