JQuery-DataTable属性及方法列表
跟我学JQuery DataTables表格控件及应用实例——DataTables插件API相关的选项参数及应用示例(第1部分)
![跟我学JQuery DataTables表格控件及应用实例——DataTables插件API相关的选项参数及应用示例(第1部分)](https://img.taocdn.com/s3/m/68afaadeaa00b52acfc7ca7c.png)
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将不会自动计算数据表格的宽度大小,此时如果浏览器显示宽度缩小时,数据表格将会挤在一坨。
jQuery插件DataTable使用方法详解(.Net平台)
![jQuery插件DataTable使用方法详解(.Net平台)](https://img.taocdn.com/s3/m/165d561002d8ce2f0066f5335a8102d276a261b7.png)
jQuery插件DataTable使⽤⽅法详解(.Net平台)上⼀篇随笔提到了MvcPager,最近⽤到了⼀款前端JQ插件------DataTable(简称DT),很好⽤。
DT是⼀款前端插件,和后端完全分离开,就这点来看,我就特别喜欢。
⼀.使⽤DT,需要以下⽀持js:jq+jquery.dataTables.min.js⼆、页⾯上进⾏引⼊js,直接使⽤DT功能前端代码:<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><title>⽤户列表</title><link href="~/Content/Scripts/h-ui/css/H-ui.min.css" rel="stylesheet" /><link href="~/Content/Scripts/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" /><link href="~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" /><style>.page-container {padding: 10px;}.operation {background: #EFEEF0;padding: 3px;}.search {background: #EFEEF0;padding: 5px;margin-top: 5px;}.table {margin-top: 10px;}.dataTables_info {margin-left: 5px;}#table1_info {padding: 0;}#table1_length {margin-left: 15px;}</style><!--引⼊脚本解决兼容性(hack技术,必须放⼊head中)--><!--[if lt IE 9]><script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script><script src="~/Content/Scripts/html5_css3/respond.min.js"></script><script src="~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script><![endif]--></head><body><div class="page-container"><div class="operation"><a class="btn btn-danger radius" href="javascript:;"><i class="Hui-iconfont"></i> 批量删除</a><a class="btn btn-primary radius" href="javascript:;"><i class="Hui-iconfont"></i> 添加⽤户</a></div><div class="search"><input type="text" id="nickname" class="input-text" style="width:100px;" placeholder="昵称"><button id="search" class="btn btn-success" type="submit"><i class="Hui-iconfont"></i> 查询</button></div><div class="table"><table id="table1" class="table table-border table-bordered table-bg table-hover"><thead><tr class="text-c"><th><input type="checkbox" name="" value=""></th><th>昵称</th><th>账号</th><th>密码</th><th>添加时间</th><th>修改时间</th><th>是否禁⽤</th><th>操作</th></tr></thead></table></div></div></body></html><script src="~/Content/Scripts/jquery-2.0.3.min.js"></script><script src="~/Content/Scripts/datatables/1.10.13/jquery.dataTables.min.js"></script><script src="~/Content/Scripts/h-ui/js/H-ui.js"></script><script src="~/Content/Scripts/h-ui.admin/js/H-ui.admin.js"></script><script type="text/javascript">var table1 = null;$(function() {table1=initializeTable();$("#search").click(function() {table1.ajax.reload();});});function initializeTable() {//初始化tablevar table = $("#table1").DataTable({/****************************************表格数据加载****************************************************/"serverSide": true,"ajax": {//ajax请求数据源"url": "/UserInfo/Manager/Search","type": "post","data": function (data) {//添加额外的数据给服务器data.pageIndex = (data.start / data.length) + 1;data.nickname = $("#nickname").val().trim();}},"columns": [//列绑定{ "defaultContent": "" },{ "data": "Nickname" },{ "data": "LoginName" },{ "data": "LoginPassword" },{ "data": "AddTime" },{ "data": "ModifyTime" },{ "data": "IsForbidden" },{ "defaultContent": "" }],"columnDefs": [//列定义{"targets": [0],"data": "UserInfoId","render": function (data, type, full) {//全部列值可以通过full.列名获取,⼀般单个列值⽤data PS:这⾥的render是有多少列就执⾏多少次⽅法。
jQuery之datagrid详细案例(包含常用方法)
![jQuery之datagrid详细案例(包含常用方法)](https://img.taocdn.com/s3/m/fd58ed330812a21614791711cc7931b765ce7b18.png)
jQuery之datagrid详细案例(包含常⽤⽅法)关于jQuery的datagrid(数据表格)的案例:$("#table控件id").datagrid({onLoadSuccess:compute ,//加载完毕后执⾏计算function⽅法名url : "请求数据url1",striped : true,//是否显⽰斑马线效果。
fit : true,//窗⼝⼤⼩⾃适应border : false,//如果为true,设置⾯板具有边框pagination : true,//如果为true,则在DataGrid控件底部显⽰分页⼯具栏。
rownumbers : true,//如果为true,则显⽰⼀个⾏号列。
showFooter:true,//定义是否显⽰⾏脚。
pageSize : 20,//在设置分页属性的时候初始化页⾯⼤⼩pageList : [ 5, 10, 20, 100, 200, 1000 ],//在设置分页属性的时候初始化页⾯⼤⼩选择列表。
queryParams: { //在请求远程数据的时候发送额外的参数params: {"datefirst":datefirst, //额外参数"datefinal":datefinal,"buyBack":buyBack}},columns : [ [{field:'ckbox',title:'全选', align:'center',checkbox:true},{field : "domain",title : "域名",width : 200,align:'center'},{field : "contributed",title : "提供⼈",width : 90,align:'center',hidden:true},//如果为true,则隐藏列。
jquery.dataTables动态列
![jquery.dataTables动态列](https://img.taocdn.com/s3/m/ff26cdf5fbb069dc5022aaea998fcc22bcd14306.png)
jquery.dataTables动态列jquery.dataTables 版本1.10.7直接上代码:0、table<table id="popReportTable"><thead><tr id="trId"><td>显⽰名,这⾥可以给tr⼀个id,然后⽤$("#trId").html("列名...")来改变显⽰列名</td></tr></thead><tbody></tbody></table>tableHtml1、⽣成动态列//dataTables的json返回的列名var columnList = []; //显⽰列对应的json字段var columnStr = "Id,Name,Code,Age,Pwd";colArr = columnStr.split(',');for (var i = 0; i < colArr.length; i++) {var obj = {};obj['data'] = colArr[i];columnList.push(obj);}⽣成动态列2、设置dataTables配置项var settings = {"ajax": 'url地址',"retrieve": true,"columns": columnList};配置项3、dataTables创建并且⽣成(这么写的原因:每次动态列字符串改变,dataTables也会跟着改变)//这样写就能把datatable完全重新载⼊$('#popReportTable').DataTable().clear();$('#popReportTable').DataTable().destroy();$('#popReportTable').DataTable(settings);关键代码。
jQuery表格插件datatables用法汇总
![jQuery表格插件datatables用法汇总](https://img.taocdn.com/s3/m/d74a6be0f71fb7360b4c2e3f5727a5e9856a27f3.png)
jQuery表格插件datatables⽤法汇总DataTables是⼀个jQuery的表格插件,本⽂为⼤家分享了表格插件datatables⽤法,介绍了基础的部分知识,具体内容如下⼀、初始化在页⾯中<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="///1.10.11/css/jquery.dataTables.css"><script type="text/javascript" charset="utf8" src="///1.10.11/js/jquery.dataTables.js"></script></head><body><table id="table_id" class="display"><thead><tr><th>Column 1</th><th>Column 2</th></tr></thead><tbody><tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td></tr><tr><td>Row 2 Data 1</td><td>Row 2 Data 2</td></tr></tbody></table></body></html>js中初始化$(document).ready( function () {$('#table_id').DataTable();} );⼆、常⽤配置在初始化的时候可以通过⼀些常⽤的配置项对表格进⾏配置,这是我在项⽬中实际⽤到的$("#vivo_table_list").dataTable({pageLength: 10, //更改初始页⾯长度(每页的⾏数)processing: true, //显⽰正在处理字符串serverSide: false, // 服务器模式,这⼀点⾮常奇怪*ordering: true, // 是否启⽤Datatables排序searching: false, // 开启搜索autoWidth: false,zeroRecords: "没有查询数据",destroy: true, // 从当前上下⽂销毁掉Datatables对象 (妹搞懂)pagingType: "input", // 分页按钮种类显⽰选项language: {url: "cn.txt" // 本地化},dom: "tr<'row-fluid'<'span6'i><'span6'p>>", // 按什么顺序定义表的控制元素在页⾯上出现(妹搞懂)ajax: {url: "/url",type: "post", // ajax请求的类型 **data: function () {return that.getQueryParams(); // ajax的参数}},columns: [{title: "id", data: "id", orderable: true},{title: "uid", data: "uid", orderable: false},{title: "昵称", data: "nick", orderable: false},{title: "姓名", data: "name", orderable: false},{title: "电话", data: "tel", orderable: false},{title: "申请时间", data: "stimeshow", orderable: true},{title: "状态", data: "statshow", orderable: false},{title: "操作", orderable: false, render: function (data,type,full) {return '<button id="msgsndButton" class="msgsnd glyphicon glyphicon-comment"></button>' +' <button id="forbidButton" class="forbid glyphicon glyphicon-thumbs-down"></button>'+'<input type="hidden" value="'+full.id+'"/>';}}]});后台传回的数据⼀定要是⼀个map,key是 "data",value 是数据(如果数据是List要 toArray()),其中 data 也是 DataTables 的参数之⼀,表⽰表格要显⽰的数据,所以你可以在这个map中放上其他的表格参数,只要把key设置为参数名就可以了。
jquerydatatable全选,反选参考文档
![jquerydatatable全选,反选参考文档](https://img.taocdn.com/s3/m/72f72b0478563c1ec5da50e2524de518964bd30a.png)
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),开启或者禁⽤状态储存。
jquery.datatables中文使用说明
![jquery.datatables中文使用说明](https://img.taocdn.com/s3/m/094dc6ca6e1aff00bed5b9f3f90f76c661374c21.png)
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中,下回访问时会显⽰上⼀次关闭页⾯时的内容。
jquery datatables用法
![jquery datatables用法](https://img.taocdn.com/s3/m/e75f2d7082c4bb4cf7ec4afe04a1b0717ed5b364.png)
文章内容大纲:一、简介1.1. jquery datatables的概念和作用1.2. 为什么选择使用jquery datatables 1.3. jquery datatables的优势和特点1.4. jquery datatables的基本用法二、深入探讨2.1. jquery datatables的高级用法2.1.1. 排序和过滤2.1.2. 分页和显示条数控制2.1.3. 搜索和全局过滤2.2. jquery datatables的交互功能2.2.1. 行点击事件2.2.2. 列点击事件2.2.3. 可编辑和可选功能三、进阶应用3.1. jquery datatables的自定义配置3.2. 与其他插件和库的整合3.3. jquery datatables的数据导入和导出 3.4. 性能优化和最佳实践四、总结回顾4.1. jquery datatables的核心原理和实现4.2. jquery datatables的适用场景和局限性4.3. jquery datatables在实际项目中的应用案例4.4. 个人对jquery datatables的看法和建议五、结语---从简到繁,由浅入深地探讨jquery datatables的用法和优势,以帮助读者更全面、深入地理解这一主题。
文章总字数大于3000字,使用非Markdown格式的普通文本,遵循知识文章格式,注重对主题的多次提及和全面总结。
---(文章开始)jquery datatables用法探究一、简介jquery datatables作为一款流行的数据表格插件,在前端开发中广受欢迎。
它能够大大简化数据表格的创建和交互操作,提供了丰富的功能和灵活的配置选项,因此备受开发者青睐。
选择使用jquery datatables的理由有很多,其中包括其强大的排序、过滤、分页和搜索功能,以及支持大规模数据渲染和丰富的插件系统。
在本文中,我们将从基础用法到高级功能,再到进阶应用,全面探讨jquery datatables的用法和优势。
datatables使用教程
![datatables使用教程](https://img.taocdn.com/s3/m/96a9934591c69ec3d5bbfd0a79563c1ec5dad705.png)
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来加载数据。
datatable用法jquery
![datatable用法jquery](https://img.taocdn.com/s3/m/a3bc09f468dc5022aaea998fcc22bcd126ff42da.png)
datatable用法jquery
1.初始化表格:使用jQuery选择器选择表格元素,并调用
DataTables()方法来初始化表格。
2.自定义配置选项:DataTables插件支持许多自定义配置选
项,用于定制表格的行为和外观。
例如,可以设置排序、分页、搜索等行为,也可以自定义列渲染、响应式表格等功能。
3.列渲染:使用DataTables插件的列渲染功能,可以自定义
列的渲染方式。
例如,可以使用自定义函数来格式化日期、链接、图片等数据。
4.响应式表格:DataTables插件支持响应式表格,可以根据
屏幕大小自动调整表格的布局和列宽。
可以通过设置"responsive"选项为true来启用响应式表格。
5.API方法:DataTables插件提供了一系列API方法,用于
控制表格的行为和获取数据。
例如,可以使用"draw"方法重新绘制表格,使用"ajax"方法加载数据等。
JQUERYDATATABLES使用方法
![JQUERYDATATABLES使用方法](https://img.taocdn.com/s3/m/abf4bb1e581b6bd97f19ea33.png)
dataTables使用方法1.Js引用首先到jquery DataTable的官方晚上下载所需要的插件。
下载完毕之后将jquery.dataTables.js和jquery.dataTables.css拷贝到项目中。
在下载的文件中也有相关的API及例子。
<script type="text/javascript"src="js/dataTables.js"></script><link href="css/dataTables.css"rel="stylesheet"type="text/css">2.页面代码编写JSP页面。
在该界面中需要引入usermanager.js文件,在该文件中主要有loadUser()方法,该方法负责将加载数据及调用DataTable的方法。
在该界面中需要添加onload的事件,该事件调用loadUser方法。
<%@page language="java"import="java.util.*"pageEncoding="UTF-8"%><%String path=request.getContextPath();String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP'error.jsp'starting page</title><script language="javascript"src="js/jquery-1.7.2.js"></script><script type="text/javascript"src="js/user/usermanager.js"></script><script type="text/javascript"src="js/dataTables.js"></script><link href="styles/wel.css"rel="stylesheet"type="text/css"><link href="styles/sub.css"rel="stylesheet"type="text/css"/><link href="css/dataTables.css"rel="stylesheet"type="text/css"> </head><body onload="loadUser();"><div style="margin-top:40px;height:20px;"align="center"><h2>用户列表</h2></div><div id="content"class="listTable"style="width:98%;"></div></body></html>3.Js代码在usermanager.js中编写下面的方法。
jquerydatatable的详细用法
![jquerydatatable的详细用法](https://img.taocdn.com/s3/m/5f2c3e07591b6bd97f192279168884868762b884.png)
jquerydatatable的详细⽤法1,⾸先需要引⽤下⾯两个⽂件<link rel="stylesheet" href="https:///1.10.16/css/jquery.dataTables.min.css" /><script src="https:///1.10.16/js/jquery.dataTables.min.js"></script>2,DataTable⽀持的数据类型2.1 数组vardata = [["Tiger Nixon","System Architect","Edinburgh","5421","2011/04/25","$3,120"],["Garrett Winters","Director","Edinburgh","8422","2011/07/25","$5,300"]]2.2 对象[{"name": "Tiger Nixon","position": "System Architect","salary": "$3,120","start_date": "2011/04/25","office": "Edinburgh","extn": "5421"},{"name": "Garrett Winters","position": "Director","salary": "$5,300","start_date": "2011/07/25","office": "Edinburgh","extn": "8422"}]2.3 ⾃定义实例(本质和2.2⼀样)functionEmployee ( name, position, salary, office ) { = name;this.position = position;this.salary = salary;this._office = office;this.office = function() {returnthis._office;}};$('#example').DataTable( {data: [newEmployee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh"),newEmployee( "Garrett Winters", "Director", "$5,300", "Edinburgh")],columns: [{ data: 'name'},{ data: 'salary'},{ data: 'office'},{ data: 'position'}]} );2.4 datatable的数据来源1)DOM如果没有指定data,ajax选项,则DataTable会将当前table的html标签上内容转换成对应的数据(Array数据形式)。
jQuery插件dataTables添加序号列的方法
![jQuery插件dataTables添加序号列的方法](https://img.taocdn.com/s3/m/354dc40ca66e58fafab069dc5022aaea998f4196.png)
jQuery插件dataTables添加序号列的⽅法官⽹⽅法实例:$(document).ready(function() {var t = $('#example').DataTable({"columnDefs": [{"searchable": false,"orderable": false,"targets": 0}],"order": [[1, 'asc']]});t.on('order.dt search.dt',function() {t.column(0, {search: 'applied',order: 'applied'}).nodes().each(function(cell, i) {cell.innerHTML = i + 1;});}).draw();});试了⼀下,然后发现会报draw⽅法找不到之类的,可能是因为版本问题,⽤的是1.12.10版本的。
所以⼜发现有热⼼⽹友分享⼀下⽅法,是可以的。
定义{"data": null,"targets": 0},⼀个空列,然后在dataTables中添加⽅法:"fnDrawCallback": function(){ var api = this.api(); var startIndex= api.context[0]._iDisplayStart;//获取到本页开始的条数 api.column(0).nodes().each(function(cell, i) { cell.innerHTML = startIndex + i + 1; });}以上所述是⼩编给⼤家介绍的jQuery插件dataTables添加序号列的⽅法,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。
jquerydatatable常用例子
![jquerydatatable常用例子](https://img.taocdn.com/s3/m/e1e19a7649d7c1c708a1284ac850ad02de8007c4.png)
jquerydatatable常⽤例⼦在项⽬中经常⽤到DataTable,如果DataTable使⽤得当,不仅能使程序简洁实⽤,⽽且能够提⾼性能,达到事半功倍的效果,现对DataTable的使⽤技巧进⾏⼀下总结。
⼀、DataTable简介(1)构造函数DataTable() 不带参数初始化DataTable 类的新实例。
DataTable(string tableName) ⽤指定的表名初始化DataTable 类的新实例。
DataTable(string tableName, string tableNamespace) ⽤指定的表名和命名空间初始化DataTable 类的新实例。
(2) 常⽤属性CaseSensitive 指⽰表中的字符串⽐较是否区分⼤⼩写。
ChildRelations 获取此DataTable 的⼦关系的集合。
Columns 获取属于该表的列的集合。
Constraints 获取由该表维护的约束的集合。
DataSet 获取此表所属的DataSet。
DataSet相关信息,可见我以前的⼀篇⽂章《数据访问(2)-DataSet》DefaultView 获取可能包括筛选视图或游标位置的表的⾃定义视图。
HasErrors 获取⼀个值,该值指⽰该表所属的DataSet 的任何表的任何⾏中是否有错误。
MinimumCapacity 获取或设置该表最初的起始⼤⼩。
该表中⾏的最初起始⼤⼩。
默认值为 50。
Rows 获取属于该表的⾏的集合。
TableName 获取或设置DataTable 的名称。
(3)常⽤⽅法AcceptChanges() 提交⾃上次调⽤AcceptChanges() 以来对该表进⾏的所有更改。
BeginInit() 开始初始化在窗体上使⽤或由另⼀个组件使⽤的DataTable。
初始化发⽣在运⾏时。
Clear() 清除所有数据的DataTable。
Clone() 克隆DataTable 的结构,包括所有DataTable 架构和约束。
jquerydatatable属性及方法列表
![jquerydatatable属性及方法列表](https://img.taocdn.com/s3/m/47b5a3ef58f5f61fb7366682.png)
fnServerData fnStateLoadCallback fnStateSaveCallback
1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page.
唯一不同点是不能被用户的自定义配置冲突alengthmenuaosearchcols给每个列单独定义其初始化搜索列表特性这一块还没搞懂asstripclassesbdestroytruefalsedefaultfalsebretrievetruefalsedefaultfalsebscrollcollapsetruefalsedefaultfalse指定适当的时候缩起滚动视图bsortcellstoptruefalsedefaultfalse未知的东东icookiedurationideferloadingidisplaylength用于指定一屏显示的条数需开启分页器idisplaystart用于指定从哪一条数据开始显示到表格中去iscrollloadgaposearch又是初始时指定搜索参数相关的有点复杂没搞懂目前sajaxdataprop指定当从服务端获取表格数据时数据项使用的名字sajaxsourcescookieprefixsdomdefaultlfrtipwhenbjqueryuihlfrtfipwhenbjqueryuitruespaginationtype?fullnumbers??twobutton?default?twobutton?用于指定分页器风格sscrollxinnerstringdefault?disabled?又是水平滚动相关的没搞懂啥意思类型名称说明intidisplaystart显示的起始索引intidisplaylength显示的行数inticolumns显示的列数stringssearch全局搜索字段booleanbescaperegex全局搜索是否正则booleanbsortableint表示一列是否在客户端被标志位可排序booleanbsearchableint表示一列是否在客户端被标志位可搜索stringssearchint个别列的搜索booleanbescaperegexint个别列是否使用正则搜索intisortingcols排序的列数intisortcolint被排序的列stringssortdirintstringsecho服务器返回的数据格式如下所示类型名称说明intitotalrecords实际的行数intitotaldisplayrecords过滤之后实际的行数
【前端】jQueryDataTables使用手册(精简版)
![【前端】jQueryDataTables使用手册(精简版)](https://img.taocdn.com/s3/m/a744f32adc36a32d7375a417866fb84ae55cc357.png)
【前端】jQueryDataTables使⽤⼿册(精简版)⼀、常⽤属性//把公共的设置项都放在这⾥,就不需要每个页⾯都设置⼀遍了,放在jQuery对象上是为了避免污染全局变量window.dataTablesSettings = {processing : false,//是否显⽰加载中提⽰bAutoWidth : false,//是否⾃动计算表格各列宽度bPaginate : true,//是否显⽰使⽤分页bInfo : false,//是否显⽰页数信息sPaginationType : "full_numbers",//分页样式iDisplayLength : 10,//默认每页显⽰多少条记录searching : false,//是否显⽰搜索框bSort : false,//是否允许排序serverSide : true,//是否从服务器获取数据bStateSave : true,//页⾯重载后保持当前页bLengthChange : false,//是否显⽰每页⼤⼩的下拉框sServerMethod : "POST",language: {lengthMenu : "每页显⽰ _MENU_记录",zeroRecords : "没有匹配的数据",info : "第_PAGE_页/共 _PAGES_页",infoEmpty : "没有符合条件的记录",search : "查找",infoFiltered : "(从 _MAX_条记录中过滤)",paginate : { "first" : "⾸页 ", "last" : "末页", "next" : "下⼀页", "previous" : "上⼀页"}},//这⾥是为ajax添加⾃定义参数,给它添加的属性,它会传给后台fnServerParams : function (aoData) {aoData._rand = Math.random();}};//引⽤了上⾯的js⽂件后,在这⾥设置其他的参数//ajax的urlwindow.dataTablesSettings.ajax = "/backend/content/load";//如果表格的⾼度⼤于这个值,tbody就会出现滚动条,⽽表头固定window.dataTablesSettings.sScrollY = $(window).height() - 300;//是否开启垂直滚动(否=disabled)//设置具体的列名window.dataTablesSettings.columns = [{data : "id"},{data : "title"},{data : "sort"},{data : "diffcity"},{data : "citys"},{data : "edittime"},{data : "editer"}];//对列进⾏操作,这⾥只是替换掉第⼀列window.dataTablesSettings.columnDefs = [{targets : [0],data : "id",render : function(data, type, row) {return "<a title='编辑' class='glyphicon glyphicon-edit nounderline' href='javascript:editTabRow(" + data + ");'></a> " +"<a title='复制' class='glyphicon glyphicon-duplicate nounderline' href='javascript:copyTabRow(" + data + ");'></a> " +"<a title='删除' class='glyphicon glyphicon-trash nounderline' href='javascript:deleteTabRow(" + data + ");'></a>";}}];⼆、事件window.dataTablesSettings.fnDrawCallback = function(data){//每⼀次表格绘制完成时调⽤};window.dataTablesSettings.fnInitComplete = function(){//表格初始化时调⽤⼀次};//还有其他不常⽤的,就不列举了三、⽅法//重绘⽅法。
JqueryDataTables获取表格数据及选中行数据
![JqueryDataTables获取表格数据及选中行数据](https://img.taocdn.com/s3/m/099f5407591b6bd97f192279168884868762b8d5.png)
3
for(var i = 0; i < nTrs.length; i++){
4
console.log('[获取数据]' + table.fnGetData(nTrs[i]));//fnGetData获取一行的]0,Trident,Internet Explorer 4.0,Win 95+,4,2014/09/01,2014/20/01,X dataTableTest.jsp:356 [获取数据]1,Trident,Internet Explorer 4.0,Win 95+,4,2014/09/01,2014/20/01,X
2.获取表格选中行数据
1 function getTableContent(){
2
var nTrs = table.fnGetNodes();//fnGetNodes获取表格所有行,nTrs[i]表示第i行tr对象
3
for(var i = 0; i < nTrs.length; i++){
4
if($(nTrs[i]).hasClass('selected')){
7
// }
8}
9}
5
console.log('[获取数据]' + table.fnGetData(nTrs[i]));//fnGetData获取一行的数据
6
}
7
}
8}
3.获取某一行某一列数据
1 function getTableContent(){
2 var nTrs = table.fnGetNodes();//fnGetNodes获取表格所有行,nTrs[i]表示第i行tr
jquery.dataTables自定义操作列的实现
![jquery.dataTables自定义操作列的实现](https://img.taocdn.com/s3/m/0857ade8951ea76e58fafab069dc5022aaea46ef.png)
jquery.dataTables⾃定义操作列的实现话不多说,⾸先肯定还是先引⽤两个插件,jquery插件和jquery.dataTables插件;然后 javaScript 代码如下;都是⼀些⽐较常⽤的参数,本⽰例是通过ajax后台分页渲染实现的列表;具体可参考;本篇主要讲新增⾃定义列,表格头部thead中新增操作列 <th>操作</th> ;Html代码:<table class="ax-table ax-hover ax-stripe ax-border ax-align-left" id="airport"><thead><tr><th>序号</th><th>名称</th><th>性别</th><th>创建时间</th><th>昵称</th><th>企业代码</th><th>操作</th></tr></thead></table>然后在js中的DataTable初始化中,添加 columnDefs ;第⼀个⼤括号⾥是对表格的第六列添加样式;最后⼀列是新增的操作列,主要是对数据的预览和删除;这⾥的data的值通过打印发现是返回信息中未⽤到的Name字段,并不是我们想要的id;id的实际取值格式为full.id,可以⾃⾏打印试下。
columnDefs: [// 将companyCode列变为红⾊{"targets": [5], // ⽬标列位置,下标从0开始"data": "salary", // 数据列名"render": function (data, type, full) { // 返回⾃定义内容return "<span style='color:blue;'>" + data + "</span>";}},// 增加⼀列,包括删除和修改,同时将我们需要传递的数据传递到链接中{"targets": [6], // ⽬标列位置,下标从0开始"data": "name", // 数据列名"render": function (data, type, full) { // 返回⾃定义内容console.log(data);return "<a href='/User/UserInfo?id=" + full.id + "'>预览</a> <a href='/User/Delete?id=" + full.id + "'>删除</a>"; }}]完整的dataTable初始化代码如下:JavaScript代码:$('#airport').DataTable({processing: true,serverSide: true, //服务端分页paging: true,pageLength: 10,//分页⼤⼩deferRender: true,// "sAjaxDataProp" : "aData",//是服务器分页的标志,必须有// "fnServerData": retrieveData,//分页回调函数ajax: function (data, callback, settings) {//ajax配置为function,⼿动调⽤异步查询var searchParams = {};searchParams.pageSize = data.length;searchParams.pageIndex = data.start % data.length === 0 ?(data.start / data.length + 1) : ((data.start % data.length) + 2);$.ajax({type: "post",url: "/User/GetJson",cache: false, //禁⽤缓存data: searchParams, //传⼊已封装的参数dataType: "json",success: function (res) {data.pageNum += 1;var lists = res;//封装返回数据,这⾥仅演⽰了修改属性名var returnData = {};returnData.draw = data.draw;//这⾥直接⾃⾏返回了draw计数器,应该由后台返回returnData.recordsTotal = lists.pages;returnData.recordsFiltered = lists.total;//后台不实现过滤功能,每次查询均视作全部结果returnData.data = lists.data;//关闭遮罩//$wrapper.spinModal(false);//调⽤DataTables提供的callback⽅法,代表数据已封装完成并传回DataTables进⾏渲染//此时的数据需确保正确⽆误,异常判断应在执⾏此回调前⾃⾏处理完毕if (searchParams) {$.extend(searchParams, searchParams);}callback(returnData);},error: function (XMLHttpRequest,textStatus,errorThrown) {Toast('查询失败', 'warning', 'danger');}});},//设置数据columns: [{ data: "id", defaltContent: 0 },{ data: "name", defaultContent: "空" },{ data: "sex", defaultContent: "未知性别" },{ data: "nickName", defaultContent: "空" },{ data: "createTime", defaultContent: "未知" },{ data: "companyCode", defaultContent: "空" }],columnDefs: [// 将companyCode列变为红⾊{"targets": [5], // ⽬标列位置,下标从0开始"data": "salary", // 数据列名"render": function (data, type, full) { // 返回⾃定义内容return "<span style='color:blue;'>" + data + "</span>";}},// 增加⼀列,包括删除和修改,同时将我们需要传递的数据传递到链接中{"targets": [6], // ⽬标列位置,下标从0开始"data": "name", // 数据列名"render": function (data, type, full) { // 返回⾃定义内容console.log(data);return "<a href='/User/UserInfo?id=" + full.id + "'>预览</a> <a href='/User/Delete?id=" + full.id + "'>删除</a>"; }}]});。
jquery datatable
![jquery datatable](https://img.taocdn.com/s3/m/5c79a2cdce2f0066f5332295.png)
jquery dataTables 大数据分页面的解决方案以下是4种数据来源,大数据分页时选第4种分页方案:1.DOM对象,浏览器将网页解析为DOM对象,数据来源于table中的 tbody2.数据来源为数组,JavaScript 中的数组,通过在初始化对象中传递一个名为aaData 的数组,同样可以提供表格数据,前缀 aa 说明这是一个数组的数组,外层的数组表示表格的行,每一行同样是一个数组。
将数据转化为js对象,dataTables解析对象生成页面表格。
aoColumns 参数用来定义表格的列,这是一个数组,其中的每一个对象用来定义一列。
对于每一个列对象:sTitle 定义列的标题sClass 定义列的样式fnRender 函数用来渲染列,这个函数将会传递一个参数对象,这个参数对象的iDataColumn 属性表示当前的列索引,aData 表示当前的行数组。
函数返回的结果将被填充到单元格中。
3.数据来源是 AJAX,也就是说可以向服务器发一个请求来获得数据。
在初始化参数对象中,通过sAjaxSource 的属性传递请求的地址,bProcessing 表示是否需要显示一个工作中的提示。
这种方式可以看成是第2种的扩展,只是把aaData放到了ajax调用的文件中,实现异步读取:4.数据来源是服务器,对于大量的数据来说,你可能希望在服务器端完成所有的操作,分页、排序、过滤等等。
dataT able 可以通过服务器完成这些功能,甚至其他的服务器,像 Google Gears 或者 Adobe Air,这样的话,dataT ables 就是一个显示数据和提供操作事件的前端模块。
对于服务器来说,可以通过请求参数来获得当前的操作信息(当点击分页时,服务器可以通过$_GET来获取参数,实现分页读取数据。
如: $_GET[‘iDisplayStart’]得到查询起始行数)。
客户端绑定代码:。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
服务器返回的数据格式如下所示
类型
int int stri
名称
iTotalRecords iTotalDisplayRecords sEcho sColumns aaData
回调函数名称 参数
fnCookieCallback fnDrawCallback 1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to set 无 1.node : "TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array< 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 1.int : number to be formatted 1.node : "TR" element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it's own rules 1.object:oSettings - DataTables settings object 1.object:oSettings - DataTables settings object 1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering)
构要规整(数据不一定要完整),这样才能正确处理。以下是在进行
解释
是否自动计算表格各列宽度 用于渲染的一个参数 开关,是否启用客户端过滤功能 开关,是否显示表格的一些信息 是否使用jquery ui themeroller的风格 开关,是否显示一个每页长度的选择条(需要分页器支持) 开关,是否显示(使用)分页器 开关,以指定当正在处理数据的时候,是否显示“正在处理” 这个提示信息 开关,以指定是否无限滚动(与sScrollY配合使用),在大 数据量的时候很有用。当这个标志为true的时候,分页器就 默认关闭 开关,是否让各列具有按列排序功能 开关,指定当当前列在排序时,是否增加classes 'sorting_1', 'sorting_2' and 'sorting_3',打开后,在处理大数据时,性能 有所损失 开关,是否打开客户端状态记录功能。这个数据是记录在 cookies中的,打开了这个记录后,即使刷新一次页面,或重 新打开浏览器,之前的状态都是保存下来的 是否开启水平滚动,以及指定滚动区域大小 是否开启垂直滚动,以及指定滚动区域大小 -指定按多列数据排序的依据 同上。唯一不同点是不能被用户的自定义配置冲突 这个为选择每页的条目数,当使用一个二维数组时,二维层 面只能有两个元素,第一个为显示每页条目数的选项,第二 个是关于这些选项的解释 给每个列单独定义其初始化搜索列表特性(这一块还没搞 懂) 指定要被应用到各行的class风格,会自动循环 用于当要在同一个元素上执行新的dataTable绑定时,将之 前的那个数据对象清除掉,换以新的对象设置 用于指明当执行dataTable绑定时,是否返回DataTable对象 指定适当的时候缩起滚动视图 (未知的东东) 指定用于存储客户端信息到cookie中的时间长度,超过这个 时间后,自动过期 延迟加载,它的参数为要加载条目的数目,通常与 bServerSide,sAjaxSource等配合使用 用于指定一屏显示的条数,需开启分页器 用于指定从哪一条数据开始显示到表格中去 用于指定当DataTable设置为滚动时,最多可以一屏显示多 少条数据 又是初始时指定搜索参数相关的,有点复杂,没搞懂目前 指定当从服务端获取表格数据时,数据项使用的名字 指定要从哪个URL获取数据 当打开状态存储特性后,用于指定存储在cookies中的字符串 的前缀名字 这是用于定义DataTable布局的一个强大的属性,另开专门 文档来补充说明吧 用于指定分页器风格 又是水平滚动相关的,没搞懂啥意思
1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page. 1.object:oSettings - DataTables settings object 2.object:oData Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code. 1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie.
取值范围
true or false, default true true or false, default false true or false, default true true or false, default true true or false, default false true or false, default true true or false, default true true or false, defualt false true or false, default false true or false, default true true or false, default true
fnFooterCallback
fnFormatNumber
fnHeaderCallback
fnInfoCallback
fnInitComplete fnPreDrawCallback
fnRowCallback
fnServerData
fnStateLoadCallback
fnStateSaveCallback
true or false, default false 'disabled' or '100%' 类似的字符串 'disabled' or '200px' 类似的字符串 -array array[int,string], 如[], [[0,'asc'], [0,'desc']] 同上 default [10, 25, 50, 100],可以为一维数组,也可为二维数组,比 如:[[10, 25, 50, -1], [10, 25, 50, "All"]] default null, 类似:[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}] default ['odd', 'even'], 比如['strip1', 'strip2', 'strip3'] true or false, default false true or false, default false true or false, default false true or false, default false 整数,默认7200,单位为秒 整数,默认为null 整数,默认为10 整数,默认为0 整数,默认为100 默认{ "sSearch": "", "bRegex": false, "bSmart": true } 字符串,default 'aaData' URL字符串,default null 字符串,default 'SpryMedia_DataTables_' default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) 'full_numbers' or 'two_button', default 'two_button' string default 'disabled'