完善时间:2020-03-26 12:15:55会员:bekda目录:电脑网络 - 编程开发浏览:1959 次
Datatables 表格插件功能强大,无需改变表格原有结构,简单设置就能实现:数据筛选、隐藏/显示数据列、数据分页,Excel数据导出、数据打印、数据复制、数据排序等功能,下面给出一个Datatables初始化时的参数设置实例,供大家参考:
//******表格插件Datatables,处理数据量:34385条****** //******table class样式:'class=dataTable:不显示格式化前的原始数据,class=display:显示默认奇偶行、悬停等样式****** var TableTitle=$("#TableTitle").val(), //标题(打印、导出、复制) DefSortIndex=typeof($(".defsort").html())=="undefined"?"0":$("#dataTable thead tr th").index($(".defsort")), //自定义缺省排序列:class='defsort',未定义按0列排序 MyDateTable=$("#dataTable").DataTable({ "paging":true, //是否分页 "autoWidth":true, //宽度自适应 "info":true, //是否显示左下角信息 "lengthChange":true, //记录数控制(左上角) "ordering":true, //开启排序 "processing":true, //是否显示正在处理 "scrollY":false, //是否重直滚动:false|"100px" "scrollCollapse": true, //记录少时,是否允许减少高度 "searching":true, //开启搜索过滤 "stateSave":true, //状态保存,包含分页,过滤、排序 "stateDuration":0, //状态保存时间(秒),-1不保存|0无限期|60*60*24 "deferRender":true, //延迟渲染,提升初始化速度 "destroy":true, //销毁已存在的Datatables实例 "displayStart":0, //从第几条数据开始显示(0开始) "dom": 'Bftr', //样式:Blftrip,B:按钮 | l:每页数量 | f:过滤 | t:表格 | i:信息 | p:分页 | r:加载 | <"#id.class" > 指定id或class的div "lengthMenu": [50,100,200,500,1000], //自定义分页数量 "pageLength": 1000, //每页显示数量(默认10),隐藏lengthMenu时设置 "orderClasses":false, //高亮排序列:CSS sorting_1、sorting_2、sorting_3 "stripeClasses":['stripe1','stripe2'], //设置奇偶行class,数量任意,自动循环,表格设置class=display时有效 "orderFixed":{"post":[2,'desc']}, //固定排序,始终作用于表格:asc升序,desc降序(0开始),pre|post在标准排序之前|之后,中文排序不正确 "pagingType": "full_numbers", //分页按钮选项 "search": {"caseInsensitive":true}, //搜索是否区分大小写,默认true不区分 "order": [[DefSortIndex,'asc']], //设置class='defsort'的列为缺省排序列,默认0列 "columnDefs":[ {"targets":'nosearch',"searchable":false}, //禁止class='nosearch'的列参与搜索,也可用[0,1] {"targets":'nosort',"orderable": false} //禁止class='nosort'的列参与排序,也可用[0,1] ], "buttons": [ //按钮:["colvis","copy","excel","print","csv"],因中文乱码,去除pdf格式, {extend:'colvis',columns:':gt(0)'}, //显示隐藏多列,不包括0列 {extend:'copy',title:TableTitle}, {extend:'excel',title:TableTitle}, {extend:'print',title:TableTitle,autoPrint:false} {extend:'collection',text:'打印',buttons:[ {extend:'print',title:TableTitle,text:"打印当前页",exportOptions:{modifier:{page:"current"}},autoPrint:false}, {extend:'print',title:TableTitle,text:"打印所有页",autoPrint:false} //autoPrint:false, ]} ], language:{ "decimal": "", "emptyTable": "暂时没有数据。", "info": "当前 _TOTAL_ 条记录,第 _START_ - _END_ 条。", //"第 _PAGE_ 页 / 总 _PAGES_ 页" "infoEmpty": "当前 0 条记录。", "infoFiltered": "(共 _MAX_ 条)", "infoPostFix": "", "thousands": ",", "lengthMenu": "每页 _MENU_ 条", "loadingRecords": "加载中...", "processing": "处理中...", //可用图片,例:<img src='../image/loading.gif' width='220px' height='220px' /> "search": "当前页检索:", "zeroRecords": "没有匹配的记录。", "paginate": { "first": "首页", "last": "末页", "next": "下一页", "previous": "上一页" }, "aria": { "sortAscending": ": 升序", "sortDescending": ": 倒序" }, "buttons": { "colvis":"显示/隐藏列", "copy": "复制", "excel":"Excel", "print":"打印", "copyTitle":"复制成功", "copySuccess":"共复制 %d 条数据,请进行粘贴。" } } }); //增加按钮提示 $(".buttons-colvis").attr("title","显示、隐藏数据列"); $(".buttons-copy").attr("title","复制当前页"); $(".buttons-excel").attr("title","将当前页导出为Excel"); $(".buttons-print").attr("title","打印当前页");
HTML页面部份:
/*标题(打印、导出、复制时显示)*/ <input id='TableTitle' type='hidden' value='标题字符'> /*dataTable:不显示格式化前数据,display:显示奇偶行样式*/ <table id='dataTable' class='dataTable display'> /*表头(标题)*/ <thead> <tr> <th class='nosort nosearch'>不参与搜索(筛选)列</th> <th class='nosearch defsort'>缺省排序列</th> <th>普通标题列</th> </tr> </thead> /*表格主体(正文)*/ <tbody></tbody> /*表尾(页脚)*/ <tfoot></tfoot>
发布日期:2020/01/15
发布日期:2019/07/22
发布日期:2019/03/17
苏公网安备 32011102010041号
320111201705278429
苏ICP备12027725号