Datatables中文API——基本参数
Datatables学习文档
Datatables学习⽂档Data sources 数据源DataTables可以从四种基本形式的数据源获取数据:HTML document (DOM)Javascript (array / objects)Ajax sourced data with client-side processingAjax sourced data with server-side processing1、在html表格数据上应⽤DateTables$(document).ready(function() {$('#example').dataTable();} );2、ajax数据$(document).ready(function() {$('#example').dataTable( {"ajax": '../ajax/data/arrays.txt'} );} );3、js数据,例⼦是⽤⼀个js数组初始化dt数据var dataSet = [['Trident','Internet Explorer 4.0','Win 95+','4','X'],['Trident','Internet Explorer 5.0','Win 95+','5','C'],['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],['Trident','Internet Explorer 6','Win 98+','6','A'],['Trident','Internet Explorer 7','Win XP SP2+','7','A'],['Trident','AOL browser (AOL desktop)','Win XP','6','A'],['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],['Gecko','Camino 1.0','OSX.2+','1.8','A'],['Gecko','Camino 1.5','OSX.3+','1.8','A'],['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],['Gecko','Epiphany 2.20','Gnome','1.8','A'],['Webkit','Safari 1.2','OSX.3','125.5','A'],['Webkit','Safari 1.3','OSX.3','312.8','A'],['Webkit','Safari 2.0','OSX.4+','419.3','A'],['Webkit','Safari 3.0','OSX.4+','522.1','A'],['Webkit','OmniWeb 5.5','OSX.4+','420','A'],['Webkit','iPod Touch / iPhone','iPod','420.1','A'],['Webkit','S60','S60','413','A'],['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],['Presto','Opera for Wii','Wii','-','A'],['Presto','Nokia N800','N800','-','A'],['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],['Misc','NetFront 3.1','Embedded devices','-','C'],['Misc','NetFront 3.4','Embedded devices','-','A'],['Misc','Dillo 0.8','Embedded devices','-','X'],['Misc','Links','Text only','-','X'],['Misc','Lynx','Text only','-','X'],['Misc','IE Mobile','Windows Mobile 6','-','C'],['Misc','PSP browser','PSP','-','C'],['Other browsers','All others','-','-','U']];$(document).ready(function() {$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );$('#example').dataTable( {"data": dataSet,"columns": [{ "title": "Engine" },{ "title": "Browser" },{ "title": "Platform" },{ "title": "Version", "class": "center" },{ "title": "Grade", "class": "center" }]} );} );4、服务器端过程有很多⽅法可以把数据装进dataTables⾥,如果你正在使⽤⼀个很庞⼤的数据库进⾏⼯作,你可以考虑使⽤dataTables提供的服务器端选项,开启服务器端进程后,所有的分页、搜索、排序⾏为都会被服务器端接⼿,服务器端的sql引擎(类似这么个意思)就可以在⼤量数据上进⾏这些操作(毕竟数据库引擎才是为这项⼯作⽽⽣的)。
跟我学JQuery DataTables表格控件及应用实例——DataTables插件API相关的选项参数及应用示例(第1部分)
1.1跟我学JQuery DataTables表格控件及应用实例——DataTables插件API相关的选项参数及应用示例(第1部分)1.1.1DataTable API相关的选项参数的定义1、在DataTables中的参数名称的定义规则在DataTables中的参数名称的前缀用来说明参数的数据类型,在DataTables中的参数名称的定义规则如下:1)n –代表节点2)o –代表对象3)a–代表数组4)s –代表字符串5)b –代表布尔类型6)f –代表浮点类型7)i –代表整形8)fn –代表函数因此,一旦了解了DataTables中的参数名称前缀的含义,将有助于理解DataTables中的参数的数据类型。
2、DataTables的核心属性配置选项的功能及设置(1)启用翻页功能"bPaginate": true(2)启用改变每页显示数据数量的功能"bLengthChange": true(3)启用过滤功能"bFilter": true(4)启用排序功能"bSort": false(5)显示页脚信息"bInfo": true(6)启用数据表格宽度自动适应显示设备的宽度"bAutoWidth": true1.1.2DataTable中的各个选项参数的功能说明及应用示例1、属性名称bAutoWidth(1)该属性的取值范围为true 或false,默认值为true(2)主要的功能含义是否自动计算表格各列宽度。
(3)代码示例$(document).ready( function () {$('#dataTableTagID').dataTable( {"bAutoWidth": false} );} );如果关闭bAutoWidth("bAutoWidth": false)后,DataTable将不会自动计算数据表格的宽度大小,此时如果浏览器显示宽度缩小时,数据表格将会挤在一坨。
datatables简介
分页
客户端分页: 请求所有数据,由前端分页。 查询:只查询表格内当前的数据。 排序:只排序表格内当前的数据。 服务端分页: 请求哪也的数据,就返回那一页的数据。 参数设置: ajax : XXX, //请求设置 serverSide: true,//如果是服务器方式,必须要设置为true 查询:由服务端来做。 排序:由服务端来做。
简介
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何 HTML表格添加高级的交互功能。 特性: (1)分页,即时搜索和排序 (2)几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 (3)支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation (4)各式各样的扩展: Editor, TableTools, FixedColumns …… (5)丰富多样的option和强大的API (6)支持国际化 (7)超过2900+个单元测试 (8)免费开源 ( MIT license )! 商业支持 更多特性请到官网查看
基本用法
3.js写法: $('#example').dataTable({ "autoWidth": true, "info": true, "ordering": true, "columns" : [ {"data" : "bill_code"}, {"data" : "send_check_code"}, {"data" : "type_box_val"}, ... ] });
dataTables使用的详细说明整理
dataTables使⽤的详细说明整理本⽂共三个部分:官⽹|基本使⽤|遇到的问题⼀、官⽅⽹站:⼆、基本使⽤:1、dataTables的引⼊及初始化<!--第⼀步:引⼊Javascript / CSS (CDN)--><!-- DataTables CSS --><link rel="stylesheet" type="text/css" href="/1.10.15/css/jquery.dataTables.css"><!-- jQuery --><script type="text/javascript" charset="utf8" src="/jquery-1.10.2.min.js"></script><!-- DataTables --><script type="text/javascript" charset="utf8" src="/1.10.15/js/jquery.dataTables.js"></script><!--第三步:初始化Datatables-->$(document).ready( function () {$('#example').DataTable();} );2、dataTables的基础属性配置"bPaginate": true, //翻页功能"bLengthChange": true, //改变每页显⽰数据数量"bFilter": true, //过滤功能"bSort": false, //排序功能"bInfo": true,//页脚信息"bAutoWidth": true//⾃动宽度View Code3、关于排序的四个属性区分bSort : 初始化的时候可以定义整个表格是否需要进⾏排序$(document).ready( function () {$('#example').dataTable( {"bSort": false} );} );aaSorting : 初始化的时候可以⽤来定义表格根据哪⼀列进⾏排序$(document).ready( function() {$('#example').dataTable( {//先对第⼆列降序排列,在对第四列升序排列"aaSorting": [[1,'desc'], [3,'asc']]} );} );bSortable : 初始化的时候可以⽤来定义哪⼀列可以进⾏排序$(document).ready( function() {$('#example').dataTable( {"aoColumns": [{ "bSortable": false },null,null,null,null] } );} );asSorting : 可以⽤来设置某⼀⾏的排序规则$(document).ready( function() {$('#example').dataTable( {"aoColumns": [null,{ "asSorting": [ "asc" ] },{ "asSorting": [ "desc", "asc", "asc" ] },{ "asSorting": [ "desc" ] },null]} );} );4、展⽰⼀个表格的基本配置$('#myTable').dataTable({"bJQueryUI": true,//是否使⽤jquery中的ui theme"bProcessing": true, //DataTables载⼊数据时,是否显⽰‘进度’提⽰"bServerSide": false, //是否启动服务器端数据导⼊,也就是调⽤后台数据的时候"bStateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态"sPaginationType": "full_numbers",//详细分页组,可以⽀持直接跳转到某页"bScrollInfinite": false, //是否启动初始化滚动条"bScrollCollapse": false, //是否开启DataTables的⾼度⾃适应,当数据条数不够分页数据条数的时候,插件⾼度是否随数据条数⽽改变"bPaginate": true, //翻页功能"aLengthMenu": [5, 10, 15], //更改显⽰记录数选项"iDisplayLength": 9, //默认显⽰的记录数"sScrollY": 300,//规定表格⾼度,出现滚动条"sScrollX": "50%",////是否开启⽔平滚动,以及指定滚动区域⼤⼩,可设值:'disabled','2000%'"bLengthChange": true, //改变每页显⽰数据数量"bFilter": true, //过滤功能"bSort": false, //排序功能,初始化的时候定义整个表格是否进⾏排序"bInfo": true,//页脚信息,即表格左下⾓显⽰多少条数据的提⽰"bAutoWidth": true,//⾃动宽度,false为禁⽌⾃动计算列宽// 'aaSorting': [[2, 'asc']],//bSort失效"aaData": [{"Office": "IJD","Show": "X"},{"Id": "002","Name": "张三","Salary": "450,800", "Date": "2012-3-19", "Office": "DPD","Show": "X"},{"Id": "003","Name": "李四","Salary": "120,800", "Date": "2013-3-21", "Office": "ICD","Show": "C"},{"Id": "004","Name": "王五","Salary": "50,800", "Date": "2011-11-11", "Office": "ISD","Show": "X"},{"Id": "005","Name": "张张","Salary": "780,800", "Date": "2013-2-22", "Office": "ADM","Show": "X"},{"Id": "006","Name": "ni","Salary": "320,800", "Date": "2012-10-10", "Office": "IJD","Show": "X"},{"Id": "007","Name": "张三","Salary": "450,800", "Date": "2012-3-19", "Office": "DPD","Show": "X"},{"Id": "008","Name": "李四","Salary": "120,800", "Date": "2013-3-21", "Office": "ICD","Show": "C"},{"Id": "009","Name": "王五","Salary": "50,800", "Date": "2011-11-11", "Office": "ISD","Show": "X"},{"Id": "010","Name": "张张","Salary": "780,800", "Date": "2013-2-22", "Office": "ADM","Show": "X"},{"Id": "011","Name": "wo","Salary": "320,800", "Date": "2012-10-10", "Office": "IJD","Show": "X"},{"Id": "012","Name": "张三","Salary": "450,800", "Date": "2012-3-19", "Office": "DPD","Show": "X"},{"Id": "013","Name": "李四","Salary": "120,800", "Date": "2013-3-21", "Office": "ICD","Show": "C"},{"Id": "014","Name": "王五","Salary": "50,800", "Date": "2011-11-11", "Office": "ISD","Show": "X"},{"Office": "ADM","Show": "X"}],"aoColumns": [//sClass设置列的class属性值,bSearchable设置列的数据是否过滤,bVisible设置列是否显⽰,sTitle设置列的标题{"data": "Id", 'sTitle': 'Id', 'sWidth': '100px', 'sClass': 'center', "bVisible": false,},{"data": "Name", 'sTitle': '姓名', 'sWidth': '20%', 'sClass': 'center', "sDefaultContent": "", //此列默认值为"",以防数据中没有此值,DataTables加载数据的时候报错 },{ "data": "Salary", 'sTitle': '⼯资', 'sWidth': '20%', 'sClass': 'center' },{ "data": "Date", 'sTitle': '⼊职⽇期', 'sWidth': '20%', 'sClass': 'center' },{"data": "Office", 'sTitle': '所属部门', 'sWidth': '20%', 'sClass': 'center'},{"data": "Show", 'sTitle': '是否显⽰ID', 'sWidth': '20%', 'sClass': 'center', "bSearchable": false,"mRender": function (data, type, full) {//data表⽰该列的数据// return '<input type="text" class="userName" value="' + full + '"/>';if (data === 'X') {return '不显⽰'} else {return '显⽰'}}}],"oLanguage": {//国际化配置"sProcessing": "正在加载中......","sLengthMenu": "每页显⽰ _MENU_ 条记录","sZeroRecords": "对不起,查询不到相关数据!","sEmptyTable": "表中⽆数据存在!","sInfo": "当前显⽰ _START_ 到 _END_ 条,共 _TOTAL_ 条记录","sInfoFiltered": "数据表中共为 _MAX_ 条记录","sSearch": "搜索","oPaginate": {"sFirst": "⾸页","sPrevious": "上⼀页","sNext": "下⼀页","sLast": "末页"}}});View Code5、使⽤Ajax与后台交互数据时,将bServerSide属性置为true,涉及属性fnServerData"sAjaxSource": "url",//接⼝路径"fnServerData": function (sUrl, aoData, fnCallback) {$.ajax({"url": sUrl,"type": 'POST',"dataType": 'json',"contentType": "application/x-www-form-urlencoded; charset=utf-8","cache": false,"data": aoData,"success": (res) => {//console.log(res.data.data)fnCallback(res.data.data)}})}View Code三、实例展⽰1、引⼊⽂件2、创建js⽂件var iDisplayStart = 0;var iDisplayLength = 6;$('#tableList').dataTable({"bJQueryUI": true,//是否使⽤jquery中的ui theme"bProcessing": true, //DataTables载⼊数据时,是否显⽰‘进度’提⽰"bServerSide": true, //是否启动服务器端数据导⼊,也就是调⽤后台数据的时候"bStateSave": false, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态"sPaginationType": "full_numbers",//详细分页组,可以⽀持直接跳转到某页"bScrollInfinite": false, //是否启动初始化滚动条"bScrollCollapse": false, //是否开启DataTables的⾼度⾃适应,当数据条数不够分页数据条数的时候,插件⾼度是否随数据条数⽽改变"bPaginate": true, //翻页功能// "aLengthMenu": [5, 10, 15], //更改显⽰记录数选项// "iDisplayLength": 9, //默认显⽰的记录数// "sScrollY": 100,//规定表格⾼度,出现滚动条// "sScrollX": "50%",////是否开启⽔平滚动,以及指定滚动区域⼤⼩,可设值:'disabled','2000%'// "bLengthChange": true, //改变每页显⽰数据数量"bFilter": false, //过滤功能"bSort": false, //排序功能,初始化的时候定义整个表格是否进⾏排序"bInfo": false,//页脚信息,即表格左下⾓显⽰多少条数据的提⽰"bAutoWidth": true,//⾃动宽度,false为禁⽌⾃动计算列宽// 'aaSorting': [[2, 'asc']],//bSort失效"iDisplayStart": iDisplayStart,"iDisplayLength": iDisplayLength,//默认显⽰的记录数// "aaData": [// {// }// ],"columns": [//sClass设置列的class属性值,bSearchable设置列的数据是否过滤,bVisible设置列是否显⽰,sTitle设置列的标题// {bVisible表⽰不再表格中显⽰// "data": "caseId", 'sTitle': '序号', 'sWidth': '8%', 'sClass': 'center', "bVisible": false, "bSortable": false, "bUseRendered": false// },{"data": "caseId", 'sTitle': '序号', 'sWidth': '2%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false},{"data": "caseName", 'sTitle': '案件名称', 'sWidth': '20%', 'sClass': 'text-center', "sDefaultContent": "", "bSortable": false, "bUseRendered": false//此列默认值为"",以防数据中没有此值,DataTables加载数据的时候报错 },{"data": "caseCode", 'sTitle': '序号', 'sWidth': '14%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false},{"data": "caseCauseName", 'sTitle': '原因', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false},{"data": "underTakerName", 'sTitle': '收押⼈', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false},{"data": "managerName", 'sTitle': '管理⼈员', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false},{"data": "registerDate", 'sTitle': '⽇期', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false},{//⾃定义列"mDataProp": "userType",'sTitle': '登录⽤户⾓⾊','sWidth': '10%','sClass': 'text-center',// "fnRender": function (oObj) {// if (erType == '1' || erType == '3') {// return '⽤户'// } else {// return '管理员'// }// },"bSortable": false,"bUseRendered": false},{"sDefaultContent": "",'sTitle': '操作','sWidth': '7%','sClass': 'text-center',"render": function (data, type, full) { // 返回⾃定义内容return"<span id='factorConfirm' style='display:inline-block;color:#01d1b8;text-decoration:underline;padding-bottom:3px;cursor:pointer'>跳转按钮</span>";}}],"fnRowCallback": function (nRow, aData, iDisplayIndex) {//格式化数据//iDisplayIndex指当前⾏的序号每⾏加载完成,将当前列进⾏替换if (erType == '1' || erType == '3') {$('td:eq(7)', nRow).html('⽤户');} else {$('td:eq(7)', nRow).html('管理员');}return nRow;},"oLanguage": {//国际化配置"sProcessing": "正在加载中......","sLengthMenu": "每页显⽰ _MENU_ 条记录","sZeroRecords": "对不起,查询不到相关数据!","sEmptyTable": "表中⽆数据存在!","sInfo": "当前显⽰ _START_ 到 _END_ 条,共 _TOTAL_ 条记录","sInfoFiltered": "数据表中共为 _MAX_ 条记录","sSearch": "搜索","oPaginate": {"sFirst": "⾸页","sPrevious": "上⼀页","sNext": "下⼀页","sLast": "末页"}},"sAjaxSource": requestUrl,//接⼝路径"fnServerData": function (sUrl, aoData, fnCallback) {$.ajax({"url": sUrl,"type": 'GET',"dataType": 'json',"dataSrc": '',"contentType": "application/x-www-form-urlencoded; charset=utf-8","cache": false,"data": aoData,"sDom": "frtlip","sPaginationType": "full_numbers","success": (res) => {//处理返回的数据fnCallback(handleData(res)); //处理返回的数据// 点击跳转按钮$("#factorConfirm").on('click', function (e) {//获取本⾏数据(对象)var currentData = $('#tableList').DataTable().row($(this).parents('tr')).data();window.location.href = window.location.origin + '/html/ceshi.html?name=' + name + "&age=" + age});},"error": function (xhr, error, thrown) {top.showInfoWinError("发⽣异常:" + error);}})}});function handleData(json) { // 处理返回的数据var obj = { code: 1 };obj.iTotalDisplayRecords = obj.iTotalRecords = json.body.data.length;obj.aaData = json.body.data;return obj;}View Code四、遇到的问题1、设置列属性'sClass': 'text-center',每列的内容⽆法居中,样式失效解决⽅法:引⼊bootstrap的js、css<!-- DataTables CSS --><link rel="stylesheet" type="text/css" href="/1.10.15/css/jquery.dataTables.css"><link rel="stylesheet" href="https:///bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- jQuery --><script type="text/javascript" charset="utf8" src="/jquery-1.10.2.min.js"></script><!-- DataTables --><script type="text/javascript" charset="utf8"src="/1.10.15/js/jquery.dataTables.js"></script><script src="https:///bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script>View Code2、与后台交互的时候,设置了 iDisplayLength 属性为6,属性失效解决⽅法:设置翻页属性为true,否则不起作⽤"bPaginate": true, //翻页功能3、当后台数据返回数值型1、2等数字,需要在表格内进⾏格式化内容解决⽅法:设置与columns属性同级的fnRowCallback属性进⾏列内容格式化"fnRowCallback": function (nRow, aData, iDisplayIndex) {//格式化数据//iDisplayIndex指当前⾏的序号每⾏加载完成,将当前列进⾏替换if (erType == '1' || erType == '3') {$('td:eq(7)', nRow).html('⽤户');} else {$('td:eq(7)', nRow).html('管理员');}return nRow;}4、需要在每⾏⼀列操作列、即后台没有返回该属性,我们需要⾃定义列解决⽅法{"sDefaultContent": "",//不是data属性'sTitle': '操作','sWidth': '7%','sClass': 'text-center',"render": function (data, type, full) { // 返回⾃定义内容return"<span id='factorConfirm' style='display:inline-block;color:#01d1b8;text-decoration:underline; padding-bottom:3px;cursor:pointer'>要素确认</span>";}}5、后台返回数据后,如何处理才能显⽰到表格中解决⽅法function handleData(json) { // 处理返回的数据var obj = { code: 1 };obj.iTotalDisplayRecords = obj.iTotalRecords = json.body.data.length;obj.aaData = json.body.data;return obj;}//success成功后,调⽤函数fnCallback(handleData(res))6、原⽣JS中,通过url传值,解析参数解决⽅法function parseURL(url) {var url = url.split("?")[1];var para = url.split("&");var len = para.length;var res = {};var arr = [];for (var i = 0; i < len; i++) {arr = para[i].split("=");res[arr[0]] = arr[1];}return res;}。
DATATABLE使用详解
DATATABLE使用详解1. 创建 DataTable可以通过使用 DataTable 的构造函数来创建一个新的 DataTable 对象。
例如,可以使用以下代码创建一个名为 "Students" 的 DataTable,并添加一些列和行。
```DataTable table = new DataTable("Students");table.Columns.Add("ID", typeof(int));table.Columns.Add("Name", typeof(string));table.Columns.Add("Age", typeof(int));table.Rows.Add(1, "Alice", 20);table.Rows.Add(2, "Bob", 22);table.Rows.Add(3, "Charlie", 21);```2. 访问 DataTable 的列和行可以使用 DataTable 的 Columns 属性来访问表格的列集合,使用Rows 属性来访问表格的行集合。
通过循环遍历这些集合,可以访问每一列和行的数据。
```foreach (DataColumn column in table.Columns)Console.WriteLine(column.ColumnName);foreach (DataRow row in table.Rows)Console.WriteLine(row["Name"]);```3.查询和筛选数据可以通过使用 DataTable 的 Select 方法来查询和筛选数据。
该方法接受一个类似于 SQL 的字符串参数,用于指定查询的条件。
```DataRow[] rows = table.Select("Age > 20");foreach (DataRow row in rows)Console.WriteLine(row["Name"]);```4.排序数据可以通过使用 DataTable 的 DefaultView 属性来对数据进行排序。
jQuery EasyUI_DataGrid 数据表格 API 中文文档
onDblClickCell
rowIndex, field, value
当用户双击一个单元格时触发。
onSortColumn
sort, order
当用户对一列进行排序时触发,参数包括:
sort:排序的列的字段名
order:排序的列的顺序
onResizeColumn
field, width
rowIndex:编辑行的索引,从0开始
rowData:编辑行对应的记录
onHeaderContextMenu
e, field
当datagrid的头部被右键单击时触发。
onRowContextMenu
e, rowIndex, rowData
当右键点击行时触发。
方法
名称
参数
说明
options
none
返回options对象。
post
nowrap
boolean
True就会把数据显示在一行里。
true
idField
string
标识字段。
null
url
string
从远程站点请求数据的URL。
null
loadMsg
string
当从远程站点加载数据时,显示的提示信息。
Processing, please wait …
pagination
b:第二个字段值。
undefined
editor
string,object
指编辑类型。当是string时指编辑类型,当object时包含两个特性:
type:string,编辑类型,可能的类型是:
text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
jquerydatatable全选,反选参考文档
jquerydatatable 全选,反选参考⽂档1 版本号DataTables 1.10.122 API ⽂档地址官⽅option官⽅(英⽂)1.10.x 与1.9.x 参数名对照表datatables 参数配置详解服务器处理(Server-side processing)api 使⽤详解按钮⽂档导出excel 的⽂档3 常见操作项表格(tables )列(Columns )⾏(Rows )单元格(Cells )核⼼⽅法(Core )⼯具类(Utilities )4 初始化⽅法4.1 HTML 部分代码参考:注:table table-striped table-bordered table-hover 四个类名不能缺少,如缺少table 会造成表头空⽩<table id="tablelist" class="table table-striped table-bordered table-hover"></table>4.2 JS 代码参考var tablelist;$(function(){ initTablelist();});function initTablelist(){ tablelist = $('#tablelist').DataTable({"select": {"style": 'single'},// single :单⾏ multi :多⾏ "dom":"<'#datatableTopBox.datatablesTopStatusBar'<'#datatableTopCon'><'.fl.datableSearch'f>B>rt<'info'l>p", "buttons": [ { text: '<i class="fa fa-plus"></i> '+$.i18n.prop('public.button.New'), action: function ( e, dt, node, config ) { gotoPurchaseOrderDetail();} }, ],"order":[], "bStateSave":true, "stateLoadParams": function (settings, data) {data.search.search="";//清除搜索框信息data.order = [ ];//进⼊页⾯乱序 if(!.isReturn){data.start=0;//显⽰第⼀页数据}##}, "ajax":{ "data":{}, "url":$ctx + "",}, "columns":[//设定列的所有初始属性 dataTableConfig.checkBoxColumn(),//复选框列dataTableConfig.serialNumberColumn,//序号列 {"title":$.i18n.prop('TenderingManagement.RequisitionNumber'),"width":"70px","data": "purchaseCode","searchable": true}, {"title":$.i18n.prop('public.form.operate'),"width":"100px","data": null,"orderable":false,"searchable": false,"className":"notitle", render:function(data,type,row,meta){ var id = data.enterpriseId;var str;if(data.auditState=="3"){//查看 编辑 str = '<a onclick="gotoDetail(\"'+id+'\")">'+ $.i18n.prop('public.button.View')+'</a> <a onclick="gotoEdit(\"'+id+'\")">'+ $.i18n.prop('swal.Edit') +'</a>'; }else{ str = '<a onclick="gotoDetail(\"'+id+'\")">'+ $.i18n.prop('public.button.View')+'</a>';//查看 } return str;},"visible":true,JMisMandatory:false,JMdisabled:false,JMcolumnAsign:"operatingData" }//操作 ],"initComplete":function( settings, json){dataTableOrdinalFunction(this);//序号列12345顺序显⽰ }});}其他参考配置项:"lengthChange":true,//是否允许⽤户改变表格每页显⽰的记录数"searching":true, //搜索框"bSort":true, //排序5常⽤API 整理5.1 设置title 提⽰:第⼀种:最新⽅案(2019年8⽉27⽇13:48:35)不配置drawCallback 即可⾃动显⽰title 悬停提⽰,不需要提⽰的列(如:操作列)增加"className": "notitle"注:1. 私⼈配置drawCallback 项为空会重置datetable 导致⾃动悬停提⽰失效,若确实需要⽤到drawCallback ,需要在drawCallback ⾥⾯按照第⼆种⽅法配置2. 除了不需要悬停提⽰的列⽤"notitle"外,其它列如需要配置className 时,命名不要包含notitle ,因为在响应式中添加了notitle 包含验证,若加上会导致此字段没有title效果⽰例:第⼆种:⽬前还⽣效,写配置时请尽可能采⽤第⼀种注:如多列不需要悬停提⽰,td:not('notitle')即可(对应列需配置"className":"notitle")通⽤表⽰法#"drawCallback": function(settings, json){ $.each($("#"+ settings.sTableId +" tbody tr td:not(:last-child)"),function(i,v){ $(v).attr("title",$(v).text()) })},指定特定的ID "drawCallback": function(oSettings, json){ $.each($("#WorkPermitApplyList tbody tr td:not(:last-child)"),function(i,v){$(v).attr("title",$(v).text()) })},5.2第⼀列复选框"aoColumns":[ {"title":"<input type='checkbox' style='display:block;width:15px;height:15px;margin-left:10px' onclick='checkAll(this)'>", "data":null,"width":"80px","bSortable": false},],"columnDefs":[ { 'targets': [0],"visible" : true, 'searchable':false, 'orderable':false, 'render': function (data, type, row){ return '<input type="checkbox" style="width: 15px;height: 15px;vertical-align:middle;margin-left:10px;" data-id ="'+ row.enterpriseId + '"/>'; } },]5.3⽔平滚动条:"scrollX": true, 已配置为默认配置下⾯是最初⽤的解决滚动⽅法,需要去掉:"initComplete":function( settings, json){//初始化结束后的回调函数$("#contractList").wrap("<div class='datatables-scroll'></div>");}5.4 单选、多选、全选、全不选 事件comtabsclick('example',initDatatables);//单⾏选中事件comtabsclickm('example',initDatatables);//多⾏选中事件以下是新增⽅案: "select": {"style": 'single'},// single :单⾏ multi :多⾏1.简单调⽤select: true,2.blurable: true 点击表格意外地⽅,将失去选中select: {style: 'os',blurable: true}3.复选框select: {style:'os',selector: 'td:first-child'},4.多选⾏###########select: {style: 'multi'}5.单选select: {style: 'single'}6.获取选中var count = table.rows( { selected: true } ).count();var rowData = table.rows( indexes ).data().toArray();7.全选和全不选table.rows().select();table.rows().deselect();5.5 单⾏删除的⽅法(多⾏删除⽅法)example.row(11).remove().draw(); row ⾥⾯是第⼏⾏数据,从0开始example.rows( '.selected' ).remove().draw() 删除表格中符合某类的数据(多⾏删除)⽰例:点击某个单元格元素删除此⾏⽅法$('#example tbody').on( 'click', '.sorting_1', function () { $('#example').DataTable().row( $(this).parents('tr') ).remove().draw();});$("#del").click(function(){ var rowData = initDatatables.rows('.selected').data(); if(rowData.length==0){toastr.warning("请选择⼀条数据!"); return; }else{var sid=rowData[0].sid; //主键 code... }});5.6 排序设置格式:"order": [[ 0, 'asc' ],[ 1, "desc" ]]asc:升序 desc:降序5.7 table ⾏点击前⾯复选框选中事件$('#planTaskFeedbackConfirmList tbody').on('click', 'tr', function (e) { if ($(this).hasClass('selected') ) { $(this).removeClass('selected'); $(this).find(".checkbox_select").attr("checked",false); }else { $(this).addClass('selected'); $(this).find(".checkbox_select").attr("checked","checked"); }});5.8 重新绘制表projectStaffPlanningDetailTable.destroy();$("#projectStaffPlanningDetailTable").empty();initMyTableTables(url);直接重绘##########var url = $ctx + "/module/invitingProject?projectSid="+$("#projectSid").val();dataGridTables.ajax.url(url).load();拼接参数问题若需要重载函数且有拼接参数,参数写data ⾥⾯,不要拼接在url 后⾯,且重复请求时先重置data function search(){projectStatusListTables.settings()[0].ajax.data = { jm_app: 'app', userCode: USER_ercode,project: $("#search-drop-down").val() }; var url = $ctx + "/module/projectStatusManagement/findInfoList"; projectStatusListTables.ajax.url(url).load();}5.9 集成下拉框selectpicker5css:.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){ width: 80%;}table.dataTable tbody tr td:last-child{ overflow: visible;}⾏添加事件$("#btn").on("click",function(){ var rowJson = { nociteSid:null, tenderCode:1111, tenderName:"11111", bidOpeningDate:new Date(),bidOpeningAddress:"还是", isOpenRecord:"s" };$('#openBidRecoredListCall').DataTable().row.add(rowJson).draw();})"columnDefs": [ {"targets":[-1],//扩展列显⽰列位置 "width":"190px", "class": "but_xq","data":"taskSid", "orderable":false, "bSortable": false,"searchable": false, //是否参与搜索 "mRender": function (data) { return '<select style="width:60%;" class="selectpicker" data-live-search="true" data-size="5" ><option>1</option></select>'; }}],"drawCallback": function (settings, data) { $('.selectpicker').selectpicker(); $('.selectpicker').unbind("changed.bs.select").on('changed.bs.select',function(e){console.log($(this).val());//下拉框更新后的值console.log(openBidRecoredListCall.row( $(this).parent().parent() ).data());//下拉框所在⾏的值 });},5.10 获取datatables 的总⾏数(fnInitComplete 当中使⽤)##var info = ();var dataRows = info.recordsTotal;5.11 ⾏绘制事件(例:默认⾏选中)"createdRow": function( row, data, dataIndex ) {if ( data.creator == "夏云飞" ) {$(row).find("td:eq(2)").css("color","red"); $(row).find("td:eq(0)").attr("checked","true"); $(row).addClass( 'selected' ); }},5.12 切换⼈员/项⽬后datatables 显⽰为空原因:上⼀个table 分页有100并且选择了第100页,现在只有50页⾯,bStateSave 保存了状态,导致table 选择的是第100页,所以页⾯显⽰空解决办法:"bStateSave":false, //设置为false注释说明:状态保存(stateSave),开启或者禁⽤状态储存。
datatable columns参数
datatable columns参数Datatable的“columns”参数指的是表格中每一列的名称、数据类型、数据源等信息的配置。
具体的配置包括:1. “data”:每一列对应的数据源,可以是静态数组或动态数据源。
2. “name”:每一列的名称,用于在表头中显示,可以是中文或英文等。
3. “title”:每一列的标题,用于在表头中显示,可以是中文或英文等。
4. “className”:每一列的CSS类名,用于指定该列的样式。
5. “orderable”:是否支持该列排序,默认为true。
6. “searchable”:是否支持该列搜索,默认为true。
7. “type”:每一列的数据类型,包括字符串、数字、日期等类型。
以一个简单的例子来说明,假设我们有一个包含“姓名”、“年龄”、“性别”三列的数据表,每一列的配置如下:```"columns": [{"data": "name","name": "姓名","title": "姓名","className": "name","orderable": true,"searchable": true,"type": "string"},{"data": "age","name": "年龄","title": "年龄","className": "age","orderable": true,"searchable": true,"type": "numeric"},{"data": "gender","name": "性别","title": "性别","className": "gender","orderable": true,"searchable": true,"type": "string"}]```以上就是Datatable中“columns”参数的中文说明。
jquery.datatables中文使用说明
jquery.datatables中⽂使⽤说明本⽂共四部分:官⽹ | 基本使⽤|遇到的问题|属性表1、DataTables的默认配置$(document).ready(function() {$('#example').dataTable();} );2、DataTables的⼀些基础属性配置"bPaginate": true, //翻页功能"bLengthChange": true, //改变每页显⽰数据数量"bFilter": true, //过滤功能"bSort": false, //排序功能"bInfo": true,//页脚信息"bAutoWidth": true//⾃动宽度3、数据排序$(document).ready(function() {$('#example').dataTable( {"aaSorting": [[ 4, “desc” ]]} );} );从第0列开始,以第4列倒序排列4、多列排序5、隐藏某些列$(document).ready(function() {$('#example').dataTable( {"aoColumnDefs": [{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },{ "bVisible": false, "aTargets": [ 3 ] }] } );} );6、改变页⾯上元素的位置$(document).ready(function() {$('#example').dataTable( {"sDom": '<"top"fli>rt<"bottom"p><"clear">'} );} );//l- 每页显⽰数量//f – 过滤输⼊//t – 表单Table//i – 信息//p – 翻页//r – pRocessing//< and > – div elements//<"class" and > – div with a class//Examples: <"wrapper"flipt>, <lf<t>ip>7、状态保存,使⽤了翻页或者改变了每页显⽰数据数量,会保存在cookie中,下回访问时会显⽰上⼀次关闭页⾯时的内容。
datatables button 参数
datatables button 参数Datatables Button 参数详解引言Datatables是一款功能强大的JavaScript插件,用于在Web页面中创建交互式的数据表格。
而Datatables Button则是Datatables 的一个扩展插件,它提供了一系列的按钮功能,使得用户能够以更加直观、便捷的方式对表格数据进行操作。
本文将详细介绍Datatables Button插件的参数及其功能,帮助读者更好地使用该插件。
一、按钮类型(button)Datatables Button插件提供了多种按钮类型供选择,包括导出、打印、复制等。
通过设置不同的按钮类型,可以实现不同的功能。
例如,设置"type": "copy",即可创建一个“复制”按钮,点击该按钮后,表格中的数据将被复制到剪贴板中。
二、按钮位置(buttons)在Datatables表格中,按钮的位置也是可以自定义的。
通过设置不同的按钮位置,可以使按钮出现在表格的不同位置。
例如,设置"buttons": ['copy', 'excel', 'pdf'],即可将“复制”、“导出Excel”和“导出PDF”按钮显示在表格的顶部。
三、按钮样式(className)除了功能和位置外,Datatables Button插件还提供了自定义按钮样式的功能。
通过设置不同的className,可以改变按钮的外观样式。
例如,设置"className": 'btn btn-primary',即可将按钮的样式改为蓝色背景、白色文字的样式。
四、按钮文本(text)默认情况下,按钮的文本内容是根据按钮类型自动生成的。
但是,如果需要自定义按钮的文本内容,也是可以实现的。
通过设置不同的text,可以改变按钮的文本内容。
datatables使用教程
datatables使用教程DataTables是一个功能强大的jQuery表格插件,它提供了丰富的功能和灵活性,使得在网页中展示数据变得更加方便和美观。
下面是一个详细的DataTables使用教程。
1. 引入jQuery和DataTables库```html```2.创建HTML表格```html<table id="example"><thead><tr><th>姓名</th><th>年龄</th><th>职业</th></tr></thead><tbody><tr><td>张三</td><td>25</td><td>工程师</td></tr><tr><td>李四</td><td>30</td><td>设计师</td></tr>...</tbody></table>```3. 初始化DataTables在页面加载完成之后,使用以下代码来初始化DataTables。
```javascript$(document).ready(functio$('#example').DataTable(;});```这样就完成了一个最基本的DataTables表格的初始化。
你会发现,表格中的数据已经以一个交互式的方式进行了展示,还可以进行排序、等操作。
4.定制化设置DataTables提供了许多选项来定制化表格的样式和行为。
你可以在初始化时传入一个配置对象,并在其中指定各种选项。
```javascript$(document).ready(functio$('#example').DataTable"searching": false, // 禁用功能"lengthChange": false, // 禁用每页显示条数切换功能"ordering": false, // 禁用排序功能"info": false, // 禁用信息显示功能"paging": false // 禁用分页功能});});```5.AJAX加载数据如果你的数据量很大,或者需要从服务器动态加载数据,可以使用AJAX来加载数据。
jquery.datatables中文语言设置
jquery.datatables中⽂语⾔设置/** sErrMode* 错误信息显⽰⽅式* 分别为alert和throw,默认为alert*/"sErrMode": "throw",/** sDom* 布局⽅式,可以⾃定义,布局项,也可以调换布局顺序* 详解:* <> 表⽰⼀个闭合的div 例如:<> = <div></div>* <"类名称"> 表⽰⼀个class="类名称"的闭合的div 例如: <"rad"> = <div class="rad"></div>* l 每⾏显⽰的记录数* f 搜索框* r 加载时的进度条* t 表格,即实际的<table></table>* p 分页条* i 数据信息,每页显⽰x条数据、第x条-第x条、供x条数据,默认是英⽂*/"sDom": '<lf>rt<lpi><"clear">',/** sServerMethod* 数据获取⽅式* POST/GET,默认是GET*/"sServerMethod": "POST",/** bDeferRender* 是否启⽤延迟加载:当你使⽤AJAX数据源时,可以提升速度。
* 默认为false*/"bDeferRender": true,/** sScrollXInner* 表格宽度*/"sScrollXInner": "100%",/** bScrollCollapse* 当显⽰的数据不⾜以⽀撑表格的默认的⾼度时,依然显⽰纵向的滚动条。
dataTables使用方法.doc
data Tables的使用方法"bVisible" : false,不显示列1,bLengthChange 是否显示选择table中显示数据量show(10,20,100...)column2,bPaginate 是否显示分页menus3,bProcessing载入数据时,是否显示‘进度’提示4,bInfo 是否显示有关table中现有数据的信息,执行过滤数据操作(filtered data)时显示对应信息5,bAutoWidth是否启动自动计算各个字段(td单元格)所在宽度$(document).ready( function () {$('#example').dataTable( {"bAutoWidth": false} );} );6,bScrollInfinite 是否启动初始化滚动条--数据过多了,通常和sScrollY结合使用不能和pagination分页功能并存,分页了数据就不会过多了(垂直方向)$(document).ready( function() {$('#example').dataTable( {"bScrollInfinite": true,"bScrollCollapse": true,"sScrollY": "200px"} );} );7,bServerSide是否启动服务器端数据导入,即要和sAjaxSource结合使用$(document).ready( function () {$('#example').dataTable( {"bServerSide": true,"sAjaxSource": "xhr.php"} );} );8,bSort 是否启动各个字段的排序功能--点击table对应字段的最上面一下,该列就会进行asc或desc排序bSortable可对应启动单个字段的排序功能9,bSortClasses 是否启动给正在被排序的列(字段)加上class(有sorting_1,sorting_2和sorting_3三种)属性,以凸显正在排序的列,这个功能耗时间,数据大时,关闭10,bStateSave 是否启动状态保留,开启cookie记住table信息如分页信息,数据长度,filtering过滤和sorting过滤等信息。
DataTable(数据表格)使用技巧汇总
1.如何设定表格中行的高度(包括表格头,合计栏)headerHeight:设定表格头的高度;footerHeight:设定表格合计栏的高度;rowHeidht:设定数据行的高度;dorado-5.0 060904.1658以后的版本支持2.如何添加动态列(包含自定义的按钮或者自定义的超链接)Table中直接添加一个column,不需要设定field属性,如name为operation范例1:实现效果:表格列中包含一个按钮,功能:单击查看详细实现方法:在该列的onRefresh事件中写入代码var id = record.getValue("id"); //通过表格当前单元框所属的record对象获取主键信息。
var html = "<button onclick=\"showDetail('"+id+"');\" style=\"border-width:1px\">详细</button>" ;cell.innerHTML = html;在视图模型的<<functions>>中添加function showDetail(id){open("打开详细信息显示页面的url?id="+id);}范例2:表格列中包含一个超级链接,功能:单击查看详细实现方法:在该列的onRefresh事件中写入代码var id = record.getValue("id"); //通过表格当前单元框所属的record对象获取主键信息。
var html = "<a href=\"打开详细信息显示页面的url?id="+id+"\">详细</a>" ;cell.innerHTML = html;3.如何在表格的双击事件中打开详细信息页面,如detail.jsp,并传入表格中当前行的某几列信息实现表格的onRecordDBClick事件,写入代码:open("detail.jsp?param1="+dataset.getValue("field1")+"¶m2="+dataset.getValue ("field2"));以上代码需要注意的是,我们提交给detail.jsp页面的参数是通过dataset获取而不是直接从表格中的列获取,这是由于DataTable提供了绑定功能的机制,当我们选中了表格的某一行双击选择时,dataset已经自动的定位到当前行所在的dataset的record对象上,我们通过 dataset.getValue()就是获得表格当前选择行所属的record对象的getValue()方法。
QueryDataTable插件参数-列
QueryDataTable插件参数-列尽管datatable可以获得信息表的直接从DOM,您可能希望给datatable特定指令为每个单独的列。
这可以通过使用要么aoColu mnDefs参数,或aoColumns和对象信息给每个列。
这个aoColumnDefs参数和aoColumns实现同样的目标,但不同在他们如何工作:aoColumnDefs: 这个数组允许您针对一个特定列,多个列,或者所有列,使用aTargets属性的数组中的每个对象(请注意,介绍了aoColumnDefs datatable 1.7)。
这提供了很大的灵活性在创建表,因为aoColumnDefs数组可以是任意长度,目标是你特别想要的列。
aTargets的属性是一个数组来目标众多列和每个元素在它可以: 一个字符串-类的名称将会匹配在TH列0或一个正整数——列索引从左开始算起一个负整数——从右边列索引数字符串“所有”——所有列(即指定一个默认值)aoColumns:如果指定,那么这个数组的长度必须等于列的数量在原始的HTML表。
使用“null”,您希望仅使用缺省值和自动检测选项。
两aoColumnDefs参数和aoColumns可以一起使用,尽管aoColumnDefs优先由于它的灵活性。
如果两者都使用,aoColumns 定义将最高优先级。
同样,如果相同的列的目标是在aoColumnDefs多次,第一个元素的数组将最高优先级,最后一个最低的。
aDataSort允许一个列的排序采取多个列考虑当做一个排序。
例如第一名/姓列意义做一个多列排序的两列。
Default:默认值:null值的列将自动进行索引Type:类型: array数组Code example:代码示例:// Using aoColumnDefs$(document).ready(function() {$(‘#example’).dataTable({“aoColumnDefs”: [{ "aDataSort": [0, 1], “aTargets”: [0]},{“aDataSort”: [1, 0], “aTargets”: [1]},{“aDataSort”: [2, 3, 4], “aTargets”: [2]}]});});// Using aoColumns $(document).ready(function() { $(‘#example’).dataTable({“aoColumns”: [{ "aDataSort": [0, 1]},{“aDataSort”: [1, 0]},{“aDataSort”: [2, 3, 4]},null, null]});});asSorting你可以控制默认的排序方向,甚至改变行为的那种处理程序(即只允许升序排序等)使用这个参数。
datatables 参数
datatables 参数
Datatables是一款功能强大的JavaScript库,用于处理HTML 表格数据并提供各种高级功能,例如排序、搜索、分页和动态更新。
以下是Datatables的一些重要参数:
1. 'data':表格数据源,可以是数组、JSON对象或Ajax请求。
2. 'columns':表格列的定义,包括标题、数据源和数据类型。
3. 'paging':分页选项,包括分页长度、开启或关闭分页以及分页控件的位置。
4. 'searching':搜索选项,包括搜索框的开启或关闭、搜索占位符和搜索延迟。
5. 'ordering':排序选项,包括默认的排序列、排序顺序和排序图标。
6. 'scrollX'和'scrollY':控制表格的水平和垂直滚动。
7. 'ajax':通过Ajax请求数据源,可以设置请求类型、URL、数据类型和请求参数。
8. 'language':控制表格的本地化设置,包括提示信息、分页控件和搜索框提示语等。
9. 'rowCallback':在每一行创建之后,可以对每一行进行自定义处理。
10. 'columnDefs':定义列的渲染器、样式和事件处理程序。
DataTables 配置和使用
DataTables 配置和使用WEB后台开发,如果用的是Bootstrap框架,那这个表格神器你一定不要错过。
官方地址:https:///What?英文不好,没关系咱有中文的http://datatables.club/不过我还是建议看英文的,因为比较全面虽然访问的速度慢点,终归能进的去。
闲话不过说,先来个小例子吧。
1.先引用一下脚本地址,最好版本是一致的<link rel="stylesheet" href="dataTables.bootstrap.min.css"><script src="jquery.dataTables.min.js"></script><script src="dataTables.bootstrap.min.js"></script>2.配置一下本地化复制代码"oLanguage": {"sProcessing": "处理中...","sLengthMenu": "每页_MENU_ 项","sZeroRecords": "没有匹配结果","sInfo": "当前显示第_START_ 至_END_ 项,共_TOTAL_ 项。
","sInfoEmpty": "当前显示第0 至0 项,共0 项","sInfoFiltered": "(由_MAX_ 项结果过滤)","sInfoPostFix": "","sSearch": "搜索:","sUrl": "","sEmptyTable": "表中数据为空","sLoadingRecords": "载入中...","sInfoThousands": ",","oPaginate": {"sFirst": "首页","sPrevious": "上页","sNext": "下页","sLast": "末页","sJump": "跳转"},"oAria": {"sSortAscending": ": 以升序排列此列","sSortDescending": ": 以降序排列此列"}},复制代码写到这里要说一句,上边这段本地化配置,有没有发现它的命名挺奇怪的,前边都有一个小写的o、s之类的,但是现在官网并不这样命名了,当然这并不影响我们使用它,下边是比较新的配置参数。
dataTables初始化参数列表范文
1.BAutoWidth2.bDeferRender3.bFilter允许通过输入查询条件筛选表格中数据,输入一个或多个值(空格分隔),某一行中匹配输入的单词值,则被筛选出。
允许同时进行多列筛选。
"bFilter": true(默认)4.bInfo显示表格的相关信息,包括当前页的记录统计,以及表格的总记录信息。
"bInfo": true(默认为false)5.bJQueryUI6.bLengthChange动态指定分页后每页显示的记录数。
(10、25、50 和100)"bLengthChange": true(默认)7.bPaginate设置表格是否支持分页显示。
"bPaginate": true(默认)8.bProcessing当处理大量数据时,显示进度,进度条等"bProcessing": true(默认false)9.bScrollInfinite在表格中显示滚动条,不断加载数据,同时禁用表格的分页功能。
结合sScrollY使用。
"bScrollInfinite": true, (默认false)"bScrollCollapse": true,"sScrollY": "200px"10.bServerSide11.bSort指定表格中的列是否支持排序。
每列中的bSortable属性可以禁用单个列的排序。
"bSort": true(默认)12.bSortClasses给当前正在排序的列加类”sorting_1”,”sorting_2”,”sorting_3”.同时提供添加和删除类。
"bSortClasses": true(默认)注:当前正在排序的列是第三列(Platform),则该列下的td中都会添加类”sorting_1”。
使用DataTable作为存储过程的参数
使用DataTable作为存储过程的参数
最近工作中写了几个存储过程,需要向存储过程中传递字符串,因为SQL Server 2000中没有内置类似于 split 的函数,只好自己处理,将前台数据集中的一列用逗号拆分存到一个List<string>中,再转化为字符串传给存储过程,很是麻烦。
今天看了下SQL Server 2008的新特性,发现有表变量的使用,及其将DataTable作为参数的用法,就尝试了一下,简单谈谈心得。
一、测试环境
1、Windows Server 2008 R2 DataCenter
2、Visual Studio 2008 Team System With SP1
3、SQL Server 2008 Enterprise Edition With SP1
由于是SQL Server 2008新特性,所以只能用2008。
二、测试概述
测试项目很简单,就是添加新用户
三、准备数据
1、建立数据库、表、类型、存储过程
代码
代码
前台搭建好表单,后台主要是一个函数:
代码
点击【添加】按钮时调用存储过程。
测试是完成了,也很简单,传递一个DataTable做参数确实很方便吧,能够轻松完成原先需要很多编码的工作。
关于表变量还是有些道道的,如创建时判断其是否存在的语句,删除表变量前需要先删除引用表变量的存储过程等。
一般开发我大多会选择用临时表,处理起来比较方便,表变量可以作为存储过程参数确实是一个独特的优势,希望在SQL Server的未来版本中能够继续增强对表变量和临时表的支持,尤其是早日支持临时表调试:)。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Datatables中文API——基本参数鉴于自己一直在使用datatables,发现这是个很不错的表格插件,但是好的东西都是英文的,所以我结合自己的使用经验,把官网的英文api 做下简单的翻译,同时也希望大家把自己的使用经验一起分享出来,让我们更好的使用datatables,本帖将会持续更新……从基本属性开始吧bAutoWidth:启用或禁用自动列宽度的计算。
默认值true类型boolean1.$(document).ready( function () {2.$('#example').dataTable( {3. "bAutoWidth": false //关闭后,表格将不会自动计算表格大小,在浏览器大化小化的时候会挤在一坨4.} );5.} );复制代码bDeferRender:根据官网的介绍翻译过来就是,延期渲染,可以有个速度的提升,当datatable使用Ajax或者JS源表的数据。
这个选项设置为true,将导致datatable推迟创建表元素每个元素,直到他们都创建完成——本参数的目的是节省大量的时间。
默认值:false类型:boolean1.$(document).ready( function() {2.varoTable = $('#example').dataTable( {3. "sAjaxSource": "sources/arrays.txt",4. "bDeferRender": true //这个参数我个人没有使用过,到底是不是这个效果,大家自己去尝试一下5.} );6.} );复制代码bFilter:这个很容易明白,启用或禁用过滤数据。
在datatable过滤是“智能”,它允许用户最终输入多个关键字(空格分隔),和每一行数据匹配,即使不是在被指定的顺序(这允许匹配多个列)。
注意,如果您希望使用过滤,在datatable中必须设置为true,如果要删除默认过滤输入框和留住过滤功能,请使用{ @link DataTable.defaults.sDom }。
这个最后一句不明白,不知道大家怎么理解。
默认值:true类型:boolean1.$(document).ready( function () {2.$('#example').dataTable( {3. "bFilter": false4.} );5.} );复制代码bJQueryUI:这个不用多说了,一看就懂,启用jQuery UI样式,(需要在页面添加jQuery的样式文件)。
默认值:false类型:boolean1.$(document).ready( function() {2.$('#example').dataTable( {3."bJQueryUI": true4.} );5.} );复制代码bLengthChange:开启一页显示多少条数据的下拉菜单,允许用户从下拉框(10、25、50和100),注意需要分页(bPaginate:true)。
默认值:true类型:boolean1.$(document).ready( function () {2.$('#example').dataTable( {3. "bLengthChange": false,复制代码bPaginate:开启分页功能,如果不开启,将会全部显示默认值:true类型:boolean1.$(document).ready( function () {2.$('#example').dataTable( {3. "bPaginate": false4.} );5.} );复制代码bProcessing:开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好默认值:false类型:boolean1.$(document).ready( function () {2.$('#example').dataTable( {3. "bProcessing": true4.} );5.} );复制代码bScrollInfinite:是否开启不限制长度的滚动条(和sScrollY属性结合使用),不限制长度的滚动条意味着当用户拖动滚动条的时候DataTable会不断加载数据当数据集十分大的时候会有些用处,该选项无法和分页选项同时使用,分页选项会被自动禁止,注意,额外推荐的滚动条会优先与该选项默认值:false类型:boolean1.$(document).ready( function() {2.$('#example').dataTable( {3. "bScrollInfinite": true,4. "bScrollCollapse": true,5. "sScrollY": "200px"//长200像素6.} );7.} );复制代码bServerSide:开启服务器模式,使用服务器端处理配置datatable。
注意:sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。
这个翻译有点别扭。
开启此模式后,你对datatables的每个操作每页显示多少条记录、下一页、上一页、排序(表头)、搜索,这些都会传给服务器相应的值。
默认值:false类型:boolean1.$(document).ready( function () {2. $('#example').dataTable( {3."bServerSide": true,4."sAjaxSource": "xhr.php"5.} );6.} );复制代码bInfo:启用或禁用表信息显示。
这显示了关于数据的信息,目前在网页上,包括信息过滤数据,如果行为被执行。
这个参数在bServerSide配置后需要用到。
默认值:true类型:boolean1.$(document).ready( function () {2.$('#example').dataTable( {3."bInfo": false//如果这个参数不穿到后台去,服务器分页会报错,据说这个参数包含了表的所有信息4.} );5.} );复制代码bSort:开启排序功能,每一列都有排序功能,如果关闭了,排序功能将失效,也可以自定义排序功能。
单个列的排序可以禁用“bSortable”选项。
默认值:true类型:boolean1.$(document).ready( function () {2.$('#example').dataTable( {3. "bSort": false4.} );5.} );复制代码bSortClasses:是否在当前被排序的列上额外添加sorting_1,sorting_2,sorting_3三个class,当该列被排序的时候,可以切换其背景颜色,该选项作为一个来回切换的属性会增加执行时间(当class被移除和添加的时候),当对大数据集进行排序的时候你或许希望关闭该选项默认值:true类型:boolean1.$(document).ready( function () {2.$('#example').dataTable( {3. "bSortClasses": false4. } );5.} );复制代码bStateSave:是否开启状态保存,当选项开启的时候会使用一个cookie保存表格展示的信息的状态,例如分页信息,展示长度,过滤和排序等。
这样当终端用户重新加载这个页面的时候可以使用以前的设置默认值:false类型:boolean1.$(document).ready( function () {2.$('#example').dataTable( {3. "bStateSave": true4.} );5.} );复制代码sScrollX:是否开启水平滚动,当一个表格过于宽以至于无法放入一个布局的时候,或者表格有太多列的时候,你可以开启该选项从而在一个可横向滚动的视图里面展示表格,该属性可以是css设置,或者一个数字(作为像素量度来使用)默认值:blank string - i.e. disabled类型:string1.$(document).ready( function() {2.$('#example').dataTable( {3. "sScrollX": "100%",4. "bScrollCollapse": true5. } );6.} );复制代码sScrollY:是否开启垂直滚动,垂直滚动会驱使DataTable设置为给定的长度,任何溢出到当前视图之外的数据可以通过垂直滚动进行察看当在小范围区域中显示大量数据的时候,可以在分页和垂直滚动中选择一种方式,该属性可以是css设置,或者一个数字(作为像素量度来使用)默认值:blank string - i.e. disabled类型:string1.$(document).ready( function() {2.$('#example').dataTable( {3. "sScrollY": "200px",4. "bPaginate": false5. } );6.} );复制代码本节完毕,推荐是用ctrl+f查找使用。