我现在的位置:

微知识 - 知识分享 - 电脑网络 - 编程开发
知识分享
  1. Datatables 表格插件参数设置实例详解。

    完善时间: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>


联系方式:

南京贝加达电子科技有限公司

  • 地址:南京市江北新区柳州北路21号涤太太科技大楼2F
  • 联系人:焦倩华(先生)
  • 手机:13813916308
  • 邮箱:Ser@bekda.com
  • 服务专线:400-8282-116
©2010-2024 Bekda Electronic Technology Co., Ltd. All right reserved.

苏公网安备 32011102010041号

320111201705278429

苏ICP备12027725号