JavaWeb（57）
& & & JQuery datatables 中如果有很多数据的话，加载就会很慢，这时候就需要使用加载中的效果，而datatables是提供了加载中的属性的：processing，加载中的style样式也是
可以自己决定：（你可以只用文字，或者加一个gif的图片），记得开启：&bProcessing& : true,参考如下如下内容：
& & if (typeof(datatables_options) == &undefined&) {//为了复用datatables对象
datatables_options = {
&aLengthMenu& : [ [ 10, 20, 50, 100, -1 ],
[ 10, 20, 50, 100, &All& ] ],
&iDisplayLength& : 10,
//&draw&: 3,
&sDom&: 'T&&clear&&rt&&float_left&i&&&float_right_nexpage&p&&&float_right_display&l&',
//&sDom& : &&r&t&'float_left'i&&'float_right_nexpage'p&&'float_right_display'l&&&,
// 第一列禁止排序,因为这是复选框,不需要排序
&bSort& : false,
&bAutoWidth&: false,
&bProcessing& : true,//必须加上这个才能显示加载中的效果
&bServerSide& : true,
&bDestroy& : true,
//&responsive&: true,
&bJQueryUI& : false,
&sScrollX& : &100%&,
&language& : oLanguageData,
&aoColumns& : aoColumnsData,
&sAjaxSource& : &ceshi',
&fnServerData& : function(sSource, aoData,
fnCallback) {
&type& : 'post',
&async&:false,//如果为false的话，只有火狐才能显示效果，改为true全部都可以显示
&url& : sSource,
&dataType& : &json&,
&data& : aoData,
&success& : function(resp) {
fnCallback(resp);
error : function(XMLHttpRequest,
textStatus, errorThrown) {
alert(&网站开小差了,请稍后重试!&);
&fixedColumns&:
&iLeftColumns& : 5,
&sHeightMatch& : &auto&
wageNowTable = $('#sample_1') .on( 'processing.dt', function ( e, settings, processing ) {
$('#sample_1_processing').css( 'color', processing ? 'red' : 'red' );//设置处理中的文字样式为红色
$('#sample_1_processing').css( 'display', processing ? 'block' : 'none' );//当数据加载完隐藏掉文字
} ).dataTable(datatables_options);
var oLanguageData = {
&sProcessing& : &&img src='./media/image/ajax-loading.gif'&&,//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
&sLengthMenu& : &显示 _MENU_ 项结果&,
&sZeroRecords& : &没有匹配结果&,
&sInfo& : &显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项&,
&sInfoEmpty& : &显示第 0 至 0 项结果，共 0 项&,
&sInfoFiltered& : &(由 _MAX_ 项结果过滤)&,
&sInfoPostFix& : &&,
&sSearch& : &搜索:&,
&sUrl& : &&,
&sEmptyTable& : &表中数据为空&,
&sLoadingRecords& : &载入中...&,
&sInfoThousands& : &,&,
&oPaginate& : {
&sFirst& : &首页&,
&sPrevious& : &上页&,
&sNext& : &下页&,
&sLast& : &末页&
&oAria& : {
&sSortAscending& : &: 以升序排列此列&,
&sSortDescending& : &: 以降序排列此列&
& &2.在你的jsp引用的全局css样式中，添加如下设定加载中的位置在屏幕中间（因为datatables默认的processing加载效果是在表格的左上角，则不太好看，参考如下内容：
引用的加载中的css样式网址为：/DataTables/Plugins/issues/41，内容为：
/*设置正在加载中的居中显示*/
.dataTables_wrapper .dataTables_processing {
left: 50%;
backgroundColor : '#000';
border : 'none';
padding : '2px';
width: 100%;
height: 40
margin-left: -50%;
text-align:
font-size: 1.2
cursor : 'wait';
z-index: 1;//这个属性一定要加上，否则加载中是在表格的底部，会显示不全，具体的解释参考网址：http://www..cn/jsref/prop_style_zindex.asp
& & 3.默认的左上角的加载中效果：
& & 居中的加载中的显示效果如下（ajax-loading.gif这个是加载中的图片，你可以替换成自己的图片）：
& & & 3.上述的加载中效果，很奇怪的是，在火狐是可以的，但是在百度浏览器和谷歌浏览器都不会显示的，后来发现是ajax请求的async为false就只有火狐能够执行，改为true之后，百度浏览器、谷歌浏览器、360、IE浏览器都可以了（这估计是个坑，原因以后再找，我觉得应该是火狐的处理机制不同导致的）：参考如下解释：
async为false后ajax同步请求，回挂起其后面的js代码执行指导ajax返回结果后继续执行
不配置默认为true为异步，异步不会挂起ajax的执行，会继续执行后续的代码，js代码的执行速度比你ajax返回返回数据快多了，所以ajax没返回就已经执行这句导致success回调没执行填充dataarr数组。
你增加alert会挂起的执行，但是不会阻止ajax的返回和success的执行，此时ajax相当于是另外的一个线程填充了dataarr，点你点击alert的弹框确定时间间隔足够ajax返回返回数据填充dataarr了，所以确定后执行时已经有数据了，除非网络很繁忙ajax未返回
& & &附注：HTML DOM zIndex 属性的解释：
zIndex 属性设置元素的堆叠顺序。
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
Object.style.zIndex=auto|number
可能的值
值 描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
提示和注释
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:）！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：331600次
积分：5909
积分：5909
排名：第3768名
原创：209篇
转载：105篇
评论：148条
(3)(14)(4)(12)(20)(17)(18)(10)(6)(14)(14)(11)(7)(15)(8)(15)(9)(16)(10)(15)(17)(24)(1)(3)(41)jquery dataTable 参数详解_PHP教程_第七城市
jquery dataTable 参数详解
/content/15/05.shtml
codepiano 2
4 //尝试着翻译了一下，难免有错误的地方，欢迎发邮件告知，多谢。 5 /*------------------------------------------------Feature------------------------------------------------*/ 6 $(document).ready( function (){ 7 $('selector').dataTable( { 8 /* 9*默认为true10*是否自动计算列宽，计算列宽会花费一些时间，如果列宽通过aoColumns传递，可以关闭该属性作为优化11*/12 "bAutoWidth":true,13 /*14*默认为false15*是否延迟渲染，当用Ajax或者js方式加载数据时开启延迟渲染会带来很大的速度提升16*当该属性设置为true时，表格每一行新增的元素只有在需要被画出来时才会被DataTable创建出来17*/18 "bDeferRender":false,19 /*20* 默认为true21* 是否对数据进行过滤，数据过滤是十分灵活的，允许终端用户输入多个用空格分隔开的关键字22* 匹配包含这些关键字的行，即使关键字的顺序不是用户输入的顺序，过滤操作会跨列进行匹配，关键字可以分布在一行中不同的列23* 要注意的是如果你想在DataTable中使用过滤，该选项必须设置为true，如果想移除默认过滤输入框但是保留过滤功能，请设置为false(API没写，推测是false)24*/25 "bFilter":true,26 /*27* 默认为true28* 是否显示表格信息，是指当前页面上显示的数据的信息，如果有过滤操作执行，也会显示过滤操作的信息29*/30 "bInfo":true,31 /*32* 默认为fasle33* 是否开启jQuery UI ThemeRoller支持，需要一些ThemeRoller使用的标记，这些标记有些与DataTable传统使用的有轻微的差异，有些是额外附加的34*/35 "bJQueryUI":false,36 /*37* 默认为true38* 是否允许终端用户从一个选择列表中选择分页的页数，页数为10，25，50和100，需要分页组件bPaginate的支持39*/40 "bLengthChange":false,41 /*42* 默认为true43* 是否开启分页功能,即使设置为false,仍然会有一个默认的分页组件44*/45 "bPaginage":true,46 /*47* 默认为false48* 当表格在处理的时候（比如排序操作）是否显示“处理中...”49* 当表格的数据中的数据过多以至于对其中的记录进行排序时会消耗足以被察觉的时间的时候，该选项会有些用处50*/51 "bProcessing":false,52 /*53* 默认为false54* 是否开启不限制长度的滚动条（和sScrollY属性结合使用），不限制长度的滚动条意味着当用户拖动滚动条的时候DataTable会不断加载数据55* 当数据集十分大的时候会有些用处，该选项无法和分页选项同时使用，分页选项会被自动禁止，注意，额外推荐的滚动条会优先与该选项56*/57 "bScrollInfinite":false,58 /*59* 默认为false60* 配置DataTable使用服务器端处理，注意，sAjaxSource参数必须指定，以便给DataTable一个为每一行获取数据的数据源61*/62 "bServerSide":false,63 /*64* 默认为true65* 是否开启列排序，对单独列的设置在每一列的bSortable选项中指定66*/67 "bSort":true,68 /*69* 默认为true70* 是否在当前被排序的列上额外添加sorting_1,sorting_2,sorting_3三个class，当该列被排序的时候，可以切换其背景颜色71* 该选项作为一个来回切换的属性会增加执行时间（当class被移除和添加的时候）72* 当对大数据集进行排序的时候你或许希望关闭该选项73*/74 "bSortClasses":true,75 /*76* 默认为false77* 是否开启状态保存，当选项开启的时候会使用一个cookie保存表格展示的信息的状态，例如分页信息，展示长度，过滤和排序等78* 这样当终端用户重新加载这个页面的时候可以使用以前的设置79*/80 "bStateSave":false,81 /*82* 默认为空字符串，即：无效83* 是否开启水平滚动，当一个表格过于宽以至于无法放入一个布局的时候，或者表格有太多列的时候，你可以开启该选项84* 从而在一个可横向滚动的视图里面展示表格，该属性可以是css设置，或者一个数字（作为像素量度来使用）85*/86 "sScrollX":"100%",87 /*88* 默认为空字符串，即：无效89* 是否开启垂直滚动，垂直滚动会驱使DataTable设置为给定的长度，任何溢出到当前视图之外的数据可以通过垂直滚动进行察看90* 当在小范围区域中显示大量数据的时候，可以在分页和垂直滚动中选择一种方式，该属性可以是css设置，或者一个数字（作为像素量度来使用）91*/92 "sScrollY":"100%",93 /*94* 自定义语言设置95*/96 "oLanguage":{97"oAria":{98/*99 * 默认值为activate to sort column ascending 100 * 当一列被按照升序排序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀（？） 101 */ 102"sSortAscending": " - click/return to sort ascending", 103/* 104 * 默认值为activate to sort column ascending 105 * 当一列被按照升序降序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀（？） 106 */ 107"sSortDescending": " - click/return to sort descending" 108}, 109"oPaginate": { 110/* 111* 默认值为First 112* 当使用全数字类型的分页组件的时候，到第一页按钮上的文字 113*/ 114"sFirst": "First page", 115/* 116* 默认值为Last 117* 当使用全数字类型的分页组件的时候，到最后一页按钮上的文字 118*/ 119"sLast": "Last page", 120/* 121* 默认值为Next 122* 当使用全数字类型的分页组件的时候，到下一页按钮上的文字 123*/ 124"sNext": "Next page", 125/* 126* 默认值为Previous 127* 当使用全数字类型的分页组件的时候，到前一页按钮上的文字 128*/ 129"sPrevious": "Previous page" 130}, 131/* 132 * 默认值activate to sort column ascending为 133 * 当表格中没有数据（无视因为过滤导致的没有数据）时，该字符串年优先与sZeroRecords显示 134 * 注意这是个可选参数，如果没有指定，sZeroRecrods会被使用（既不是默认值也不是给定的值） 135 */ 136"sEmptyTable": "No data available in table", 137/* 138 * 默认值为Showing _START_ to _END_ of _TOTAL_ entries
139 * 该属性给终端用户提供当前页面的展示信息，字符串中的变量会随着表格的更新被动态替换，而且可以被任意移动和删除 140 */ 141"sInfo": "Got a total of _TOTAL_ entries to show (_START_ to _END_)", 142/* 143 * 默认值为Showing 0 to 0 of 0 entries
144 * 当表格中没有数据时展示的表格信息，通常情况下格式会符合sInfo的格式 145 */ 146"sInfoEmpty": "No entries to show", 147/* 148 * 默认值为(filtered from _MAX_ total entries)
149 * 当用户过滤表格中的信息的时候，该字符串会被附加到信息字符串的后面，从而给出过滤器强度的直观概念 150 */ 151"sInfoFiltered": " - filtering from _MAX_ records", 152/* 153 * 默认值为空字符串 154 * 使用该属性可以很方便的向表格信息字符串中添加额外的信息，被添加的信息在任何时候都会被附加到表格信息组件的后面 155 * sInfoEmpty和sInfoFiltered可以以任何被使用的方式进行结合 156 */ 157"sInfoPostFix": "All records shown are derived from real information.", 158/* 159 * 默认值为',' 160 * DataTable有内建的格式化数字的工具，可以用来格式化表格信息中较大的数字 161 * 默认情况下会自动调用，可以使用该选项来自定义分割的字符
162 */ 163"sInfoThousands": "'", 164/* 165 * 默认值为Show _MENU_ entries
166 * 描述当分页组件的下拉菜单的选项被改变的时候发生的动作，'_MENU_'变量会被替换为默认的10，25，50，100 167 * 如果需要的话可以被自定义的下拉组件替换 168 */ 169"sLengthMenu": "Display _MENU_ records", 170/* 171 * 默认值为Loading... 172 * 当使用Ajax数据源和表格在第一次被加载搜集数据的时候显示的字符串，该信息在一个空行显示 173 * 向终端用户指明数据正在被加载，注意该参数在从服务器加载的时候无效，只有Ajax和客户端处理的时候有效 174 */ 175"sLoadingRecords": "Please wait - loading...", 176/* 177 * 默认值为Processing... 178 * 当表格处理用户动作（例如排序或者类似行为）的时候显示的字符串 179 */ 180"sProcessing": "DataTables is currently busy", 181/* 182 * 默认为Search: 183 * 描述用户在输入框输入过滤条件时的动作，变量'_INPUT_',如果用在字符串中 184 * DataTable会使用用户输入的过滤条件替换_INPUT_为HTML文本组件，从而可以支配它（即用户输入的过滤条件）出现在信息字符串中的位置
185 * 如果变量没有指定，用户输入会自动添加到字符串后面 186 */ 187"sSearch": "Apply filter _INPUT_ to table", 188/* 189 * 默认值为空字符串，即：无效 190 * 所有语言信息可以被存储在服务器端的文件中，DataTable可以根据该参数指定的URL去寻找 191 * 必须保存语言文件的URL信息，必须是JSON格式，对象和初始化中使用的oLanguage对象具有相同的属性 192 * 请参考示例文件来了解该参数是如何工作的 193 */ 194"sUrl": "http://www.sprymedia.co.uk/dataTables/lang.txt", 195/* 196 * 默认值为No matching records found 197 * 当对数据进行过滤操作后，如果没有要显示的数据，会在表格记录中显示该字符串 198 * sEmptyTable只在表格中没有数据的时候显示，忽略过滤操作 199 */ 200"sZeroRecords": "No records to display" 201 } 202 }); 203 }); 204
205 /*------------------------------------------------Options------------------------------------------------*/ 206 /* 207* bDestroy 208* 默认为false 209* 使用传递的新的初始化对象中的属性构造一个新的表格，并替换一个匹配指定的选择器的表格 210* 如果没有匹配到表格，新的表格会被作为一个普通表格被构建 211*/ 212 $('selector').dataTable({ 213 "bFilter": false, 214 "bDestroy": true 215 }); 216
217 /* 218* bRetrieve 219* 默认为false 220* 使用指定的选择器检索表格，注意，如果表格已经被初始化，该参数会直接返回已经被创建的对象 221* 并不会顾及你传递进来的初始化参数对象的变化，将该参数设置为true说明你确认已经明白这一点 222* 如果你需要的话，bDestroy可以用来重新初始化表格 223*/ 224 $(document).ready(function(){ 225 initTable(); 226 tableActions(); 227 }); 228
229 function initTable() 230 { 231 return $('#example').dataTable( { 232 "sScrollY": "200px", 233 "bPaginate": false, 234 "bRetrieve": true 235 }); 236 } 237
238 function tableActions() 239 { 240 var oTable = initTable(); 241 // perform API operations with oTable
244 /* 245* bScrollAutoCss 246* 默认为true 247* 指明DataTable中滚动的标题元素是否被允许设置内边距和外边距等 248*/ 249 $(document).ready(function(){ 250 $('#example').dataTable( { 251 "bScrollAutoCss": false, 252 "sScrollY": "200px" 253 }); 254 }); 255
256 /* 257* bScrollCollapse 258* 默认为false 259* 当垂直滚动被允许的时候，DataTable会强制表格视图在任何时候都是给定的高度（对布局有利） 260* 不过，当把数据集过滤到十分小的时候看起来会很古怪，而且页脚会留在最下面 261* 当结果集的高度比给定的高度小时该参数会使表格高度自适应 262*/ 263 $(document).ready(function(){ 264 $('#example').dataTable( { 265 "sScrollY": "200", 266 "bScrollCollapse": true 267 }); 268 }); 269
270 /* 271* bSortCellsTop 272* 默认为false 273* 是否允许DataTable使用顶部（默认为true）的单元格，或者底部（默认为false）的单元格，当使用复合表头的时候会有些用处 274*/ 275 $(document).ready(function(){ 276 $('#example').dataTable( { 277 "bSortCellsTop": true 278 }); 279 }); 280
281 /* 282* iCookieDuration 283* 默认为7200秒（2个小时） 284* 设置用来存储会话信息的cookie的持续时间，单位是秒 285*/ 286 $(document).ready(function(){ 287 $('#example').dataTable( { 288 "iCookieDuration": 60*60*24 // 1 day 289 }); 290 }) 291
292 /* 293* iDeferLoading 294* 默认为null 295* 当选项被开启的时候，DataTable在非加载第一次的时候不会向服务器请求数据，而是会使用页面上的已有数据（不会应用排序等） 296* 因此在加载的时候保留一个XmlHttpRequest，iDeferLoading被用来指明需要延迟加载，而且也用来通知DataTable一个满的表格有多少条数据 297* 信息元素和分页会被正确保留 298*/ 299 $(document).ready(function(){ 300 $('#example').dataTable( { 301 "bServerSide": true, 302 "sAjaxSource": "scripts/server_processing.php", 303 "iDeferLoading": 57 304 }); 305 }); 306
307 /* 308* iDisplayLength 309* 默认为10 310* 单页显示的数据的条数，如果bLengthChange属性被开启，终端用户可以通过一个弹出菜单重写该数值 311*/ 312 $(document).ready(function(){ 313 $('#example').dataTable( { 314 "bServerSide": true, 315 "sAjaxSource": "scripts/server_processing.php", 316 "iDeferLoading": 57 317 }); 318 }); 319
320 /* 321* iDisplayStart 322* 默认为0 323* 当开启分页的时候，定义展示的记录的起始序号，不是页数，因此如果你每个分页有10条记录而且想从第三页开始 324* 需要把该参数指定为20 325*/ 326 $(document).ready(function(){ 327 $('#example').dataTable( { 328 "iDisplayStart": 20 329 }); 330 }) 331
332 /* 333* iScrollLoadGap 334* 默认为100 335* 滚动余界是指DataTable在当前页面还有多少条数据可供滚动时自动加载新的数据，你可能希望指定一个足够大的余界 336* 以便滚动加载数据的操作对用户来说是平滑的，同时也不会大到加载比需要的多的多的数据 337*/ 338 $(document).ready(function(){ 339 $('#example').dataTable( { 340 "bScrollInfinite": true, 341 "bScrollCollapse": true, 342 "sScrollY": "200px", 343 "iScrollLoadGap": 50 344 }); 345 }); 346
347 /* 348* iTabIndex 349* 默认为0 350* 默认情况下DataTable允许通过为需要键盘导航的元素添加tabindex属性来进行导航（排序、分页、过滤） 351* 允许你通过tab键切换控制组件，使用回车键去激活他们，默认为0表示按照文档流来切换 352* 如果需要的话，你可以使用该参数重写切换顺序，使用-1来禁止内建的键盘导航 353*/ 354 $(document).ready(function(){ 355 $('#example').dataTable( { 356 "iTabIndex": 1 357 }); 358 }); 359
360 /* 361* oSearch 362* 无默认值 363* 该参数允许你在初始化的时候使用已经定义的全局过滤状态，sSearch对象必须被定义，但是所有的其它选项都是可选的 364* 当bRegex为true的时候，搜索字符串会被当作正则表达式，当为false（默认）的时候，会被直接当作一个字符串 365* 当bSmart为true的时候，DataTable会使用使用灵活过滤策略（匹配任何可能的数据），为false的时候不会这样做 366*/ 367 $(document).ready(function(){ 368 $('#example').dataTable( { 369"oSearch": {"sSearch": "Initial search"} 370 }); 371 }) 372
373 /* 374* sAjaxDataProp 375* 默认为aaData 376* 当使用Ajax数据源或者服务器端处理的时候，DataTable会默认搜索aaData属性作为数据源 377* 该选项允许变更数据源的名称，你可以使用JavaScript的点号对象表示法去访问多级网状数据源 378*/ 379 // Get data from { "data": [...] } 380 $(document).ready(function(){ 381 var oTable = $('#example').dataTable( { 382 "sAjaxSource": "sources/data.txt", 383 "sAjaxDataProp": "data" 384 }); 385 }); 386
387 // Get data from { "data": { "inner": [...] } } 388 $(document).ready(function(){ 389 var oTable = $('#example').dataTable( { 390 "sAjaxSource": "sources/data.txt", 391 "sAjaxDataProp": "data.inner" 392 }); 393 }); 394
395 /* 396* sAjaxSource 397* 默认为null 398* 该参数用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aData） 399* 可以简单的提供一个可以用来获得数据url或者JSON对象，该对象必须包含aaData，作为表格的数据源 400*/ 401 $(document).ready(function(){ 402 $('#example').dataTable( { 403 "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php" 404 }); 405 }) 406
407 /* 408* sCookiePrefix 409* 默认为SpryMedia_DataTables_ 410* 该参数可以用来重写DataTable默认指定的用来存储状态信息的cookie的前缀 411 */ 412 $(document).ready(function(){ 413 $('#example').dataTable( { 414 "sCookiePrefix": "my_datatable_", 415 }); 416 }); 417
418 /* 419* sDom 420* 默认值为lfrtip (when bJQueryUI is false) or t (when bJQueryUI is true) 421* 该初始化属性用来指定你想把各种控制组件注入到dom节点的位置（比如你想把分页组件放到表格的顶部） 422* DIV元素（带或者不带自定的class）可以添加目标样式，下列语法被使用 423*可供使用的选项 424*'l' - 长度改变 425*'f' - 过滤输入 426*'t' - 表格 427*'i' - 信息 428*'p' - 分页 429*'r' - 处理 430*可供使用的常量 431*'H' - jQueryUI theme "header" classes('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix') 432*'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix') 433*需要的语法 434*'' - div元素 435*'' - 带有class属性的div元素 436*'' - 带有id属性的div元素 437*例子 438*'' 439*'<lfip>' 440*/ 441 $(document).ready(function(){ 442 $('#example').dataTable( { 443 "sDom": 'rt<"clear"&' 444 }); 445 }); 446
447 /* 448* sPaginationType 449* 默认为two_button 450* DataTable内建了两种交互式分页策略，两个按钮和全页数，展现给终端用户不同的控制方式 451* 可以通过API增加策略 452*/ 453 $(document).ready(function(){ 454 $('#example').dataTable( { 455"sPaginationType": "full_numbers" 456 }); 457 }) 458
459 /* 460* sScrollXInner 461* 默认为空字符串，即：无效 462* 当横向滚动可用的时候，该属性可以用来强制DataTable的宽度比需要的更长 463* 比如你需要表格彼此相隔适宜，该变量可以用来使表格变大，而且强制滚动 464* 该该属性可以是css设置，或者一个数字（作为像素量度来使用） 465*/ 466 $(document).ready(function(){ 467 $('#example').dataTable( { 468"sScrollX": "100%", 469"sScrollXInner": "110%" 470 }); 471 }); 472
473 /* 474* sServerMethod 475* 默认值为GET 476* 设置使用Ajax方式调用的服务器端的处理方法或者Ajax数据源的HTTP请求方式 477*/ 478 $(document).ready(function(){ 479 $('#example').dataTable({ 480"bServerSide": true, 481"sAjaxSource": "scripts/post.php", 482"sServerMethod": "POST" 483 }); 484 }); 485 /*------------------------------------------------Callback------------------------------------------------*/ 486 /* 487* fnCookieCallback 488* 无默认值 489* 当DataTable的状态保留可用时，自定义被保存的cookie和参数。只要cookie被修改就会调用此方法 490* 该方法需要返回一个格式良好的cookie字符串，注意数据对象是以Javascript对象的形式传递进来的，必须转换成字符串，例如JSON格式 491*/ 492 $(document).ready(function (){ 493 $('#example').dataTable({ 494 "fnCookieCallback": function (sName, oData, sExpires, sPath) { 495// Customise oData or sName or whatever else here 496return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sP 497 } 498 }); 499 }); 500
501 /* 502* fnCreatedRow 503* 无默认值 504* 当一个新的TR元素（并且所有TD子元素被插入）被创建或者被作为一个DOM资源被注册时调用该函数 505* 允许操作该TR元素 506*/ 507 $(document).ready(function(){ 508 $('#example').dataTable({ 509"fnCreatedRow": function( nRow, aData, iDataIndex ){ 510// Bold the grade for all 'A' grade browsers 511if ( aData[4] == "A" ) 512 { 513$('td:eq(4)', nRow).html( 'A' ); 514 } 515} 516 }); 517 }); 518
519 /* 520* fnDrawCallback 521* 无默认值 522* 每当draw事件发生时调用该函数，允许你动态编辑新建的dom对象的任何属性 523*/ 524 $(document).ready( function(){ 525 $('#example').dataTable({ 526"fnDrawCallback": function(){ 527alert( 'DataTables has redrawn the table' ); 528} 529 }); 530 }); 531
532 /* 533* fnFooterCallback 534* 无默认值 535* 与fnHeaderCallback()完全相同，只是该函数允许你在每一个draw时间发生时修改页脚 536*/ 537 $(document).ready( function(){ 538 $('#example').dataTable({ 539"fnDrawCallback": function() { 540alert( 'DataTables has redrawn the table' ); 541} 542 }); 543 }); 544
545 /* 546* fnFormatNumber 547* 无默认值 548* 当渲染表格信息（例如：显示57条记录中的1-10条）中大的数字时 549* 为了方便用户，DataTable会使用逗号分割每千单位（例如1000000会被渲染为1,000,000） 550* 该函数会重写DataTable默认使用的策略 551*/ 552 $(document).ready(function(){ 553 $('#example').dataTable({ 554 "fnFormatNumber": function ( iIn ) { 555if ( iIn < 1000 ) { 556return iIn; 557} else { 558var 559s=(iIn+""), 560a=s.split(""), out="", 561iLen=s. 562
563for ( var i=0 ; i<iL i++ ) { 564if ( i%3 === 0 && i !== 0 ) { 565out = "'"+ 566} 567out = a[iLen-i-1]+ 568} 569} 570 571 }; 572 }); 573 }); 574
575 /* 576* fnHeaderCallback 577* 无默认值 578* 每当draw事件发生时调用该函数，允许你动态编辑表头行，可以用来计算和展示关于表格的有用的信息 579*/ 580 $(document).ready(function(){ 581 $('#example').dataTable({ 582"fnFormatNumber": function ( iIn ) { 583if ( iIn < 1000 ) { 584 return iIn; 585} else { 586 var 587s=(iIn+""), 588a=s.split(""), out="", 589iLen=s. 590
591 for ( var i=0 ; i<iL i++ ) { 592if ( i%3 === 0 && i !== 0 ) { 593out = "'"+ 594} 595out = a[iLen-i-1]+ 596 } 597} 598 599}; 600 }); 601 }); 602
603 /* 604* fnInfoCallback 605* 无默认值 606* 信息元素可以用来传输表格当前状态的信息，尽管DataTable提供的国际化的选项在处理大多数自定义情况时已经相当方便了 607* 或许你有时仍然希望自定义深层的字符串,该函数会满足你的需要 608*/ 609 $('#example').dataTable( { 610 "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) { 611return iStart +" to "+ iE 612 } 613 }); 614
615 /* 616* fnInitComplete 617* 无默认值 618* 当表格被初始化后调用该函数，通常DataTable会被持续初始化，并不需要该函数 619* 可是，当使用异步的XmlHttpRequest从外部获得语言信息时，初始化并不是持续的 620*/ 621 $(document).ready( function(){ 622 $('#example').dataTable({ 623"fnInitComplete": function(oSettings, json) { 624alert( 'DataTables has finished its initialisation.' ); 625} 626 }); 627 }) 628
629 /* 630* fnPreDrawCallback 631* 无默认值 632* 在每一个表格draw事件发生前调用该函数，通过返回false来取消draw事件 633* 其它任何的返回值，包括undefined都会导致draw事件的发生 634*/ 635 $(document).ready( function(){ 636 $('#example').dataTable({ 637"fnPreDrawCallback": function( oSettings ) { 638if ( $('#test').val() == 1 ) { 639 640} 641} 642 }); 643 }); 644
645 /* 646* fnRowCallback 647* 无默认值 648* 你可以通过该函数在每一个表格绘制事件发生之后，渲染到屏幕上之前，向表格里的每一行传递'处理过程' 649* 该函数可以用来设置行的class名字等 650*/ 651 $(document).ready(function(){ 652 $('#example').dataTable({ 653"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { 654// Bold the grade for all 'A' grade browsers 655if ( aData[4] == "A" ) 656 { 657$('td:eq(4)', nRow).html( 'A' ); 658 } 659} 660 }); 661 }); 662
663 /* 664* fnServerData 665* 无默认值 666* 你可以使用该参数重写从服务器获取数据的方法（$.getJSON）,从而使其更适合你的应用 667* 例如你可以使用POST方式提交，或者从Google Gears或者AIR数据库获取数据 668*/ 669 // POST data to server 670 $(document).ready(function(){ 671 $('#example').dataTable( { 672"bProcessing": true, 673"bServerSide": true, 674"sAjaxSource": "xhr.php", 675"fnServerData": function ( sSource, aoData, fnCallback ) { 676$.ajax( { 677 "dataType": 'json', 678"type": "POST", 679"url": sSource, 680"data": aoData, 681"success": fnCallback 682} ); 683} 684 }); 685 }); 686
687 /* 688* fnServerParams 689* 无默认值 690* 用来在向服务器发送Ajax请求时发送额外的数据，例如自定义的过滤信息，该函数使向服务器发送额外参数变得简单 691* 传递进来的参数是DataTable建立的数据集合，你可以根据需要添加或者修改该集合 692*/ 693 $(document).ready(function(){ 694 $('#example').dataTable( { 695"bProcessing": true, 696"bServerSide": true, 697"sAjaxSource": "scripts/server_processing.php", 698"fnServerParams": function ( aoData ) { 699aoData.push( { "name": "more_data", "value": "my_value" } ); 700} 701 }); 702 }); 703
704 /* 705* fnStateLoad 706* 无默认值 707* 加载表格状态，使用该函数你可以定义状态信息加载的位置和方式，默认情况下DataTable会从cookie中加载 708* 不过你或许希望使用本地存储（HTML5支持），或者服务端数据库 709*/ 710 $(document).ready(function(){ 711 $('#example').dataTable({ 712"bStateSave": true, 713"fnStateSave": function (oSettings, oData) { 714 715
716// Send an Ajax request to the server to get the data. Note that 717// this is a synchronous request. 718$.ajax( { 719 "url": "/state_load", 720 "async": false, 721 "dataType": "json", 722 "success": function (json) { 723 o = 724 } 725} ); 726 727} 728 }); 729 }); 730
731 /* 732* fnStateLoadParams 733* 无默认值 734* 该回调可以用来在加载状态信息之前编辑状态信息 735* 函数在表格从存储的数据加载状态信息时调用，在表格被修改以前调用 736* 注意作为插件开发者，你应该使用'stateLoadParams'事件去加载plug-in的参数 737*/ 738 // Remove a saved filter, so filtering is never loaded 739 $(document).ready(function(){ 740 $('#example').dataTable({ 741"bStateSave": true, 742"fnStateLoadParams": function (oSettings, oData) { 743oData.oFilter.sSearch = ""; 744}); 745 }); 746
748 // Disallow state loading by returning false 749 $(document).ready(function(){ 750 $('#example').dataTable({ 751"bStateSave": true, 752"fnStateLoadParams": function (oSettings, oData) { 753 754}); 755 }); 756
757 /* 758* fnStateLoaded 759* 无默认值 760* 在表格状态被状态存储方法读取和DataTable设置对象被修改时调用，作为被状态信息被加载的结果 761*/ 762 // Show an alert with the filtering value that was saved 763 $(document).ready(function(){ 764 $('#example').dataTable({ 765"bStateSave": true, 766"fnStateLoaded": function (oSettings, oData) { 767alert( 'Saved filter was: '+oData.oFilter.sSearch ); 768}); 769 }); 770
771 /* 772* fnStateSave 773* 无默认值 774* 保存表格状态，使用该函数你可以定义状态信息保存的位置和方式，默认情况下DataTable会保存在cookie中 775* 不过你或许希望使用本地存储（HTML5支持），或者服务端数据库 776*/ 777 $(document).ready(function(){ 778 $('#example').dataTable({ 779"bStateSave": true, 780"fnStateSave": function (oSettings, oData) { 781// Send an Ajax request to the server with the state object 782$.ajax( { 783 "url": "/state_save", 784"data": oData, 785"dataType": "json", 786"method": "POST" 787 "success": function () {} 788}); 789} 790 }); 791 }); 792
793 /* 794* fnStateSaveParams 795* 无默认值 796* 该回调允许你编辑被保存的状态信息，在表格改变了状态信息需要保存的时候调用 797* 可以使用该回调在保存状态信息的对象被保存以前对其进行修改，包括添加或者其它状态属性或者修改 798*/ 799 // Remove a saved filter, so filtering is never saved 800 $(document).ready(function(){ 801 $('#example').dataTable({ 802"bStateSave": true, 803"fnStateLoadParams": function (oSettings, oData) { 804oData.oFilter.sSearch = ""; 805}); 806 }); 807 /*------------------------------------------------Columns------------------------------------------------*/ 808 /* 809* aDataSort 810* 默认为null,自动使用列序号作为默认 811* 在排序一列的时候同时将其它几列也排序，例如名和姓作为多列排序 812*/ 813 // Using aoColumnDefs 814 $(document).ready(function(){ 815 $('#example').dataTable({ 816"aoColumnDefs": [ 817 { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] }, 818{ "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] }, 819{ "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] } 820 ] 821 }); 822 }); 823
825 // Using aoColumns 826 $(document).ready(function(){ 827 $('#example').dataTable({ 828"aoColumns": [ 829 { "aDataSort": [ 0, 1 ] }, 830{ "aDataSort": [ 1, 0 ] }, 831{ "aDataSort": [ 2, 3, 4 ] }, 832null, 833null 834] 835 }); 836 }); 837
838 /* 839* asSorting 840* 默认为[ 'asc', 'desc' ]
841* 你可以通过该参数控制默认排序的方向，甚至改变排序处理器的行为（例如：只允许升序排序） 842*/ 843 // Using aoColumnDefs 844 $(document).ready(function(){ 845 $('#example').dataTable({ 846"aoColumnDefs": [ 847 { "asSorting": [ "asc" ], "aTargets": [ 1 ] }, 848{ "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] }, 849{ "asSorting": [ "desc" ], "aTargets": [ 3 ] } 850 ] 851 }); 852 }); 853
855 // Using aoColumns 856 $(document).ready(function(){ 857 $('#example').dataTable( { 858"aoColumns": [ 859null, 860{ "asSorting": [ "asc" ] }, 861{ "asSorting": [ "desc", "asc", "asc" ] }, 862{ "asSorting": [ "desc" ] }, 863null 864] 865 }); 866 }); 867
868 /* 869* bSearchable 870* 默认为true 871* 是否在列上应用过滤 872*/ 873 // Using aoColumnDefs 874 $(document).ready(function(){ 875 $('#example').dataTable({ 876"aoColumnDefs": [ 877 { "bSearchable": false, "aTargets": [ 0 ] } 878 ]} ); 879 }); 880
882 // Using aoColumns 883 $(document).ready(function(){ 884 $('#example').dataTable({ 885"aoColumns": [ 886 { "bSearchable": false }, 887null, 888null, 889null, 890null 891] }); 892 }); 893
894 /* 895* bSortable 896* 默认为true 897* 是否在某一列上开启排序 898*/ 899 // Using aoColumnDefs 900 $(document).ready(function(){ 901 $('#example').dataTable({ 902"aoColumnDefs": [ 903 { "bSortable": false, "aTargets": [ 0 ] } 904 ] }); 905 }); 906
908 // Using aoColumns 909 $(document).ready(function(){ 910 $('#example').dataTable( { 911"aoColumns": [ 912 { "bSortable": false }, 913null, 914null, 915null, 916null 917] }); 918 }); 919
920 /* 921* bUseRendered 922* 默认为true 923* 当对一列使用使用fnRender时，你或许希望使用原始的数据（渲染以前）去排序或者过滤（默认是使用用户看到的渲染过的数据） 924* 或许对日期类型有些用处，注意，现在建议使用mDataProp作为函数并且使用该函数提供的type参数，来允许不同的数据被用来排序，过滤，展现和类型检测 925*/ 926 // Using aoColumnDefs 927 $(document).ready(function() { 928 $('#example').dataTable( { 929"aoColumnDefs": [ 930 { 931"fnRender": function ( oObj ) { 932return oObj.aData[0] +' '+ oObj.aData[3]; 933}, 934"bUseRendered": false, 935"aTargets": [ 0 ] 936 } 937 ] 938 } ); 939 } ); 940
941 // Using aoColumns 942 $(document).ready(function() { 943 $('#example').dataTable( { 944"aoColumns": [ 945 { 946"fnRender": function ( oObj ) { 947return oObj.aData[0] +' '+ oObj.aData[3]; 948}, 949"bUseRendered": false 950 }, 951null, 952null, 953null, 954null 955] 956 } ); 957 } ); 958
959 /* 960* bVisible 961* 默认值为true 962* 是否展示某一列 963*/ 964 // Using aoColumnDefs 965 $(document).ready(function() { 966 $('#example').dataTable( { 967"aoColumnDefs": [ 968 { "bVisible": false, "aTargets": [ 0 ] } 969 ] } ); 970 } ); 971
973 // Using aoColumns 974 $(document).ready(function() { 975 $('#example').dataTable( { 976"aoColumns": [ 977 { "bVisible": false }, 978null, 979null, 980null, 981null 982] } ); 983 } ); 984
985 /* 986* fnCreatedCell 987* 无默认值 988* 每当新的单元格被建立（Ajax源等）或者处理输入（DOM源）时，开发者可定义的函数会被调用 989* 该属性用作fnRender的补充来允许你修改在fnRender函数调用之后新建的DOM元素（例如增加背景颜色） 990*/ 991 $(document).ready(function() { 992 $('#example').dataTable( { 993"aoColumnDefs": [ { 994"aTargets": [3], 995"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { 996if ( sData == "1.7" ) { 997 $(nTd).css('color', 'blue') 998} 999}1000} ]1001 });1002 } );1003 1004 /*1005* fnRender1006* 无默认值1007* 自定义列中每个单元格被展示的时候调用的展示函数1008*/1009 // Using aoColumnDefs1010 $(document).ready(function() {1011 $('#example').dataTable( {1012"aoColumnDefs": [1013 {1014"fnRender": function ( o, val ) {1015return o.aData[0] +' '+ o.aData[3];1016},1017"aTargets": [ 0 ]1018 }1019 ]1020 } );1021 } );1022 1023 1024 // Using aoColumns1025 $(document).ready(function() {1026 $('#example').dataTable( {1027"aoColumns": [1028 { "fnRender": function ( o, val ) {1029 return o.aData[0] +' '+ o.aData[3];1030} },1031null,1032null,1033null,1034null1035]1036 } );1037 } );1038 1039 /*1040* iDataSort1041* 默认值为-1，使用自动计算的列标1042* 当选择该列进行排序的时候，你希望调用排序操作的列的列号，该参数可以用来按隐藏列排序1043*/1044 // Using aoColumnDefs1045 $(document).ready(function() {1046 $('#example').dataTable( {1047"aoColumnDefs": [1048 { "iDataSort": 1, "aTargets": [ 0 ] }1049 ]1050 } );1051 } );1052 1053 // Using aoColumns1054 $(document).ready(function() {1055 $('#example').dataTable( {1056"aoColumns": [1057 { "iDataSort": 1 },1058null,1059null,1060null,1061null1062]1063 } );1064 } );1065 1066 /*1067* mDataProp1068* 默认为null,使用自动计算的列标1069* 该属性可以从任何JSON格式数据源读取属性，包括深层网状的对象和属性，1070* 有几种不同的传递方式可以影响mDataProp的行为1071* 整型：被当作数据源的数组下表，是DataTable使用的默认行为（每列递增）1072* 字符串类型：被当作从数据源获取的对象的属性名，注意你可以使用Javascript点号访问符去访问深层次的属性或数组1073* null：sDafaultContent选项会被使用到单元格上，（默认是空字符串，当生成可编辑列、可删除列的时候可以使用该属性）1074* 函数：当表格获取或者设置单元格时被调用的函数，函数有三个参数1075*{array|object}:该行的数据源1076*{string}:调用数据请求的类型，设置数据时是'set'，收集数据时是'filter','display','type','sort'1077*{*}:当第二个参数是set的时候，要被设置的数据1078*当类型是'set'的时候，该函数不需要返回一个值，除此之外，返回值是可以用来请求数据的1079*/1080 // Read table data from objects1081 $(document).ready(function() {1082 var oTable = $('#example').dataTable( {1083"sAjaxSource": "sources/deep.txt",1084"aoColumns": [1085 { "mDataProp": "engine" },1086{ "mDataProp": "browser" },1087{ "mDataProp": "platform.inner" },1088{ "mDataProp": "platform.details.0" },1089{ "mDataProp": "platform.details.1" }1090 ]1091 } );1092 } );1093 1094 1095 // Using mDataProp as a function to provide different information for1096 // sorting, filtering and display. In this case, currency (price)1097 $(document).ready(function() {1098 var oTable = $('#example').dataTable( {1099"aoColumnDefs": [1100 {1101"aTargets": [ 0 ],1102"mDataProp": function ( source, type, val ) {1103if (type === 'set') {1104 source.price =1105 // Store the computed dislay and filter values for efficiency1106 source.price_display = val=="" ? "" : "$"+numberFormat(val);1107 source.price_filter= val=="" ? "" : "$"+numberFormat(val)+" "+11081109}1110else if (type === 'display') {1111 return source.price_1112}1113else if (type === 'filter') {1114 return source.price_1115}1116 // 'sort' and 'type' both just use the integer1117 return source.1118}1119 ]1120 } );1121 } );1122 1123 /*1124* sClass1125* 默认值为空字符串1126* 该列的每一个单元格被赋予的class1127*/1128 // Using aoColumnDefs1129 $(document).ready(function() {1130 $('#example').dataTable( {1131"aoColumnDefs": [1132 { "sClass": "my_class", "aTargets": [ 0 ] }1133 ]1134 } );1135 } );1136 1137 // Using aoColumns1138 $(document).ready(function() {1139 $('#example').dataTable( {1140"aoColumns": [1141 { "sClass": "my_class" },1142null,1143null,1144null,1145null1146]1147 } );1148 } );1149 1150 /*1151* sContentPadding1152* 默认值为空字符串1153* 当DataTable计算分配给每一列的列宽的时候，会寻找每一列中最长的字符串，然后构建一个临时表1154* 从临时表中读取宽度，这样带来的问题是'mmm'会比'iiii'的长度长很多，但是后者的长度要大1155* 这样计算值会出现偏差（正确的处理然后放入DOM对象再测量长度会相当的慢），我们提供了这个选项作为一个解决方法1156* 它会把他的值添加到该列最长的值的后面来计算列宽，通常你不需要该属性，该属性也没有被写到DataTables.net的文档中1157*/1158 // Using aoColumns1159 $(document).ready(function() {1160 $('#example').dataTable( {1161 "aoColumns": [1162null,1163null,1164null,1165{1166"sContentPadding": "mmm"1167}1168 ]1169 } );1170 } );1171 1172 /*1173* sDefaultContent1174* 默认为空字符串1175* 允许给列值一个默认值，只要发现null值就会显示默认值1176* 可以由mDataProp设置为null或者数据源是null引起1177*/1178 // Using aoColumnDefs1179 $(document).ready(function() {1180 $('#example').dataTable( {1181"aoColumnDefs": [1182 {1183"mDataProp": null,1184"sDefaultContent": "Edit",1185"aTargets": [ -1 ]1186 }1187 ]1188 } );1189 } );1190 1191 1192 // Using aoColumns1193 $(document).ready(function() {1194 $('#example').dataTable( {1195"aoColumns": [1196null,1197null,1198null,1199{1200"mDataProp": null,1201"sDefaultContent": "Edit"1202}1203 ]1204 } );1205 } );1206 1207 /*1208* sName1209* 默认值为空字符串1210* 该参数只有使用在服务器端处理的时候调用，在了解客户端展示了哪些列的时候十分有用1211* 然后与数据库字段建立映射，当被定义时，如果服务器端返回的信息的顺序不是期望的顺序，也可以使用名字去区分1212* 使用这种方式的好处是：用户在客户端交换了列，你的服务器端代码不用更新1213*/1214 // Using aoColumnDefs1215 $(document).ready(function() {1216 $('#example').dataTable( {1217"aoColumnDefs": [1218 { "sName": "engine", "aTargets": [ 0 ] },1219{ "sName": "browser", "aTargets": [ 1 ] },1220{ "sName": "platform", "aTargets": [ 2 ] },1221{ "sName": "version", "aTargets": [ 3 ] },1222{ "sName": "grade", "aTargets": [ 4 ] }1223 ]1224 } );1225 } );1226 1227 1228 // Using aoColumns1229 $(document).ready(function() {1230 $('#example').dataTable( {1231"aoColumns": [1232 { "sName": "engine" },1233{ "sName": "browser" },1234{ "sName": "platform" },1235{ "sName": "version" },1236{ "sName": "grade" }1237 ]1238 } );1239 } );1240 1241 /*1242* sSortDataType1243* 默认值为std1244* 为排序操作定义可以用来在排序前读取实时表格信息（更新内部缓存版本）的数据源的类型1245* 允许排序事件发生在用户可编辑的元素上，例如输入框1246*/1247 // Using aoColumnDefs1248 $(document).ready(function() {1249 $('#example').dataTable( {1250"aoColumnDefs": [1251 { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] },1252{ "sType": "numeric", "aTargets": [ 3 ] },1253{ "sSortDataType": "dom-select", "aTargets": [ 4 ] },1254{ "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] }1255 ]1256 } );1257 } );1258 1259 1260 // Using aoColumns1261 $(document).ready(function() {1262 $('#example').dataTable( {1263"aoColumns": [1264null,1265null,1266{ "sSortDataType": "dom-text" },1267{ "sSortDataType": "dom-text", "sType": "numeric" },1268{ "sSortDataType": "dom-select" },1269{ "sSortDataType": "dom-checkbox" }1270 ]1271 } );1272 } );1273 1274 /*1275* sTitle1276* 默认值为null,从TH标签读取1277* 列名1278*/1279 // Using aoColumnDefs1280 $(document).ready(function() {1281 $('#example').dataTable( {1282"aoColumnDefs": [1283 { "sTitle": "My column title", "aTargets": [ 0 ] }1284 ]1285 } );1286 } );1287 1288 1289 // Using aoColumns1290 $(document).ready(function() {1291 $('#example').dataTable( {1292"aoColumns": [1293 { "sTitle": "My column title" },1294null,1295null,1296null,1297null1298]1299 } );1300 } );1301 1302 /*1303* sType1304* 默认值为null,从弱引用数据中自动判断1305* 允许你指定该列数据按什么类型来排序，目前有四种类型（字符串，数字，日期和html（在排序前会自动除去HTML标记））可选1306* 注意只有能够被Javascript的Date对象接受的格式化日期字符串才会被当作日期类型接受，例如"Mar 26,
PM"1307* 默认是使用html类型，更多类型可以通过插件添加1308*/1309 // Using aoColumnDefs1310 $(document).ready(function() {1311 $('#example').dataTable( {1312"aoColumnDefs": [1313 { "sType": "html", "aTargets": [ 0 ] }1314 ]1315 } );1316 } );1317 1318 1319 // Using aoColumns1320 $(document).ready(function() {1321 $('#example').dataTable( {1322"aoColumns": [1323 { "sType": "html" },1324null,1325null,1326null,1327null1328]1329 } );1330 } );1331 1332 /*1333* sWidth1334* 默认值为null,自动的1335* 定义列的宽度，该参数可以接受CSS定义（3em,20px等），DataTable对没有通过该接口指定宽度的列使用灵活宽度1336* 从而保证表格是可被读的1337*/1338 // Using aoColumnDefs1339 $(document).ready(function() {1340 $('#example').dataTable( {1341"aoColumnDefs": [1342 { "sWidth": "20%", "aTargets": [ 0 ] }1343 ]1344 } );1345 } );1346 1347 1348 // Using aoColumns1349 $(document).ready(function() {1350 $('#example').dataTable( {1351"aoColumns": [1352 { "sWidth": "20%" },1353null,1354null,1355null,1356null1357]1358 } );1359 } );1360 /*------------------------------------------------ServerSide------------------------------------------------*/1361 /*1362* bServerSide1363* 默认值false1364* 配置使用服务器端处理的DataTable，注意sAjaxSource参数必须指定，以便给DataTable一个获取每行数据的数据源1365*/1366 $(document).ready( function () {1367 $('#example').dataTable( {1368"bServerSide": true,1369"sAjaxSource": "xhr.php"1370 } );1371 } );1372 /*1373* fnServerData1374* 无默认值1375* 你可以使用该参数重写从服务器获取数据的方法（$.getJSON）,从而使其更适合你的应用1376* 例如你可以使用POST方式提交，或者从Google Gears或者AIR数据库获取数据1377*/1378 // POST data to server1379 $(document).ready(function() {1380 $('#example').dataTable( {1381"bProcessing": true,1382"bServerSide": true,1383"sAjaxSource": "xhr.php",1384"fnServerData": function ( sSource, aoData, fnCallback ) {1385$.ajax( {1386 "dataType": 'json',1387"type": "POST",1388"url": sSource,1389"data": aoData,1390"success": fnCallback1391} );1392}1393 } );1394 } );1395 /*1396* fnServerParams1397* 无默认值1398* 用来在向服务器发送Ajax请求时发送额外的数据，例如自定义的过滤信息，该函数使向服务器发送额外参数变得简单1399* 传递进来的参数是DataTable建立的数据集合，你可以根据需要添加或者修改该集合1400*/1401 $(document).ready(function() {1402 $('#example').dataTable( {1403"bProcessing": true,1404"bServerSide": true,1405"sAjaxSource": "scripts/server_processing.php",1406"fnServerParams": function ( aoData ) {1407aoData.push( { "name": "more_data", "value": "my_value" } );1408}1409 } );1410 } );1411 /*1412* sAjaxDataProp1413* 默认为aaData1414* 当使用Ajax数据源或者服务器端处理的时候，DataTable会默认搜索aaData属性作为数据源1415* 该选项允许变更数据源的名称，你可以使用JavaScript的点号对象表示法去访问多级网状数据源1416*/1417 // Get data from { "data": [...] }1418 $(document).ready(function() {1419 var oTable = $('#example').dataTable( {1420"sAjaxSource": "sources/data.txt",1421"sAjaxDataProp": "data"1422 } );1423 } );1424 1425 1426 // Get data from { "data": { "inner": [...] } }1427 $(document).ready(function() {1428 var oTable = $('#example').dataTable( {1429"sAjaxSource": "sources/data.txt",1430"sAjaxDataProp": "data.inner"1431 } );1432 } );1433 /*1434* sAjaxSource1435* 默认为null1436* 该参数用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aData）1437* 可以简单的提供一个可以用来获得数据url或者JSON对象，该对象必须包含aaData，作为表格的数据源1438*/1439 $(document).ready(function(){1440 $('#example').dataTable( {1441 "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"1442 });1443 })1444 /*1445* sServerMethod1446* 默认值为GET1447* 设置使用Ajax方式调用的服务器端的处理方法或者Ajax数据源的HTTP请求方式1448*/1449 $(document).ready(function(){1450 $('#example').dataTable({1451"bServerSide": true,1452"sAjaxSource": "scripts/post.php",1453"sServerMethod": "POST"1454 });1455 });
Linux-学习笔记(PHP向)&一&
最新教程周点击榜
微信扫一扫