1 //@translator codepiano 2 //@blog codepiano 3 //@email [email protected] 4 //尝试着翻译了一下，难免有错误的地方，欢迎发邮件告知，多谢。 5 /*------------------------------------------------Feature------------------------------------------------*/ 6 $(document).ready( function (){ 7 $('selector').dataTable( { 8 /* 9 * 默认为true 10 * 是否自动计算列宽，计算列宽会花费一些时间，如果列宽通过aoColumns传递，可以关闭该属性作为优化 11 */ 12 "bAutoWidth":true, 13 /* 14 * 默认为false 15 * 是否延迟渲染，当用Ajax或者js方式加载数据时开启延迟渲染会带来很大的速度提升 16 * 当该属性设置为true时，表格每一行新增的元素只有在需要被画出来时才会被DataTable创建出来 17 */ 18 "bDeferRender":false, 19 /* 20 * 默认为true 21 * 是否对数据进行过滤，数据过滤是十分灵活的，允许终端用户输入多个用空格分隔开的关键字 22 * 匹配包含这些关键字的行，即使关键字的顺序不是用户输入的顺序，过滤操作会跨列进行匹配，关键字可以分布在一行中不同的列 23 * 要注意的是如果你想在DataTable中使用过滤，该选项必须设置为true，如果想移除默认过滤输入框但是保留过滤功能，请设置为false(API没写，推测是false) 24 */ 25 "bFilter":true, 26 /* 27 * 默认为true 28 * 是否显示表格信息，是指当前页面上显示的数据的信息，如果有过滤操作执行，也会显示过滤操作的信息 29 */ 30 "bInfo":true, 31 /* 32 * 默认为fasle 33 * 是否开启jQuery UI ThemeRoller支持，需要一些ThemeRoller使用的标记，这些标记有些与DataTable传统使用的有轻微的差异，有些是额外附加的 34 */ 35 "bJQueryUI":false, 36 /* 37 * 默认为true 38 * 是否允许终端用户从一个选择列表中选择分页的页数，页数为10，25，50和100，需要分页组件bPaginate的支持 39 */ 40 "bLengthChange":false, 41 /* 42 * 默认为true 43 * 是否开启分页功能,即使设置为false,仍然会有一个默认的<前进,后退>分页组件 44 */ 45 "bPaginage":true, 46 /* 47 * 默认为false 48 * 当表格在处理的时候（比如排序操作）是否显示“处理中...” 49 * 当表格的数据中的数据过多以至于对其中的记录进行排序时会消耗足以被察觉的时间的时候，该选项会有些用处 50 */ 51 "bProcessing":false, 52 /* 53 * 默认为false 54 * 是否开启不限制长度的滚动条（和sScrollY属性结合使用），不限制长度的滚动条意味着当用户拖动滚动条的时候DataTable会不断加载数据 55 * 当数据集十分大的时候会有些用处，该选项无法和分页选项同时使用，分页选项会被自动禁止，注意，额外推荐的滚动条会优先与该选项 56 */ 57 "bScrollInfinite":false, 58 /* 59 * 默认为false 60 * 配置DataTable使用服务器端处理，注意，sAjaxSource参数必须指定，以便给DataTable一个为每一行获取数据的数据源 61 */ 62 "bServerSide":false, 63 /* 64 * 默认为true 65 * 是否开启列排序，对单独列的设置在每一列的bSortable选项中指定 66 */ 67 "bSort":true, 68 /* 69 * 默认为true 70 * 是否在当前被排序的列上额外添加sorting_1,sorting_2,sorting_3三个class，当该列被排序的时候，可以切换其背景颜色 71 * 该选项作为一个来回切换的属性会增加执行时间（当class被移除和添加的时候） 72 * 当对大数据集进行排序的时候你或许希望关闭该选项 73 */ 74 "bSortClasses":true, 75 /* 76 * 默认为false 77 * 是否开启状态保存，当选项开启的时候会使用一个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 242 } 243 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 <"H"lfr>t<"F"ip> (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" and '>' - 带有class属性的div元素 436 * '<"#id" and '>' - 带有id属性的div元素 437 * 例子 438 * '<"wrapper"flipt>' 439 * '<lf<t>ip>' 440 */ 441 $(document).ready(function(){ 442 $('#example').dataTable( { 443 "sDom": '<"top"i>rt<"bottom"flp><"clear"&lgt;' 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 496 return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath; 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 511 if ( aData[4] == "A" ) 512 { 513 $('td:eq(4)', nRow).html( '<b>A</b>' ); 514 } 515 } 516 }); 517 }); 518 519 /* 520 * fnDrawCallback 521 * 无默认值 522 * 每当draw事件发生时调用该函数，允许你动态编辑新建的dom对象的任何属性 523 */ 524 $(document).ready( function(){ 525 $('#example').dataTable({ 526 "fnDrawCallback": function(){ 527 alert( '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() { 540 alert( '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 ) { 555 if ( iIn < 1000 ) { 556 return iIn; 557 } else { 558 var 559 s=(iIn+""), 560 a=s.split(""), out="", 561 iLen=s.length; 562 563 for ( var i=0 ; i<iLen ; i++ ) { 564 if ( i%3 === 0 && i !== 0 ) { 565 out = "'"+out; 566 } 567 out = a[iLen-i-1]+out; 568 } 569 } 570 return out; 571 }; 572 }); 573 }); 574 575 /* 576 * fnHeaderCallback 577 * 无默认值 578 * 每当draw事件发生时调用该函数，允许你动态编辑表头行，可以用来计算和展示关于表格的有用的信息 579 */ 580 $(document).ready(function(){ 581 $('#example').dataTable({ 582 "fnFormatNumber": function ( iIn ) { 583 if ( iIn < 1000 ) { 584 return iIn; 585 } else { 586 var 587 s=(iIn+""), 588 a=s.split(""), out="", 589 iLen=s.length; 590 591 for ( var i=0 ; i<iLen ; i++ ) { 592 if ( i%3 === 0 && i !== 0 ) { 593 out = "'"+out; 594 } 595 out = a[iLen-i-1]+out; 596 } 597 } 598 return out; 599 }; 600 }); 601 }); 602 603 /* 604 * fnInfoCallback 605 * 无默认值 606 * 信息元素可以用来传输表格当前状态的信息，尽管DataTable提供的国际化的选项在处理大多数自定义情况时已经相当方便了 607 * 或许你有时仍然希望自定义深层的字符串,该函数会满足你的需要 608 */ 609 $('#example').dataTable( { 610 "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) { 611 return iStart +" to "+ iEnd; 612 } 613 }); 614 615 /* 616 * fnInitComplete 617 * 无默认值 618 * 当表格被初始化后调用该函数，通常DataTable会被持续初始化，并不需要该函数 619 * 可是，当使用异步的XmlHttpRequest从外部获得语言信息时，初始化并不是持续的 620 */ 621 $(document).ready( function(){ 622 $('#example').dataTable({ 623 "fnInitComplete": function(oSettings, json) { 624 alert( '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 ) { 638 if ( $('#test').val() == 1 ) { 639 return false; 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 655 if ( aData[4] == "A" ) 656 { 657 $('td:eq(4)', nRow).html( '<b>A</b>' ); 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 ) { 699 aoData.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 var o; 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 = json; 724 } 725 } ); 726 return o; 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) { 743 oData.oFilter.sSearch = ""; 744 }); 745 }); 746 747 748 // Disallow state loading by returning false 749 $(document).ready(function(){ 750 $('#example').dataTable({ 751 "bStateSave": true, 752 "fnStateLoadParams": function (oSettings, oData) { 753 return false; 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) { 767 alert( '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) { 804 oData.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 824 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 ] }, 832 null, 833 null 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 854 855 // Using aoColumns 856 $(document).ready(function(){ 857 $('#example').dataTable( { 858 "aoColumns": [ 859 null, 860 { "asSorting": [ "asc" ] }, 861 { "asSorting": [ "desc", "asc", "asc" ] }, 862 { "asSorting": [ "desc" ] }, 863 null 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 881 882 // Using aoColumns 883 $(document).ready(function(){ 884 $('#example').dataTable({ 885 "aoColumns": [ 886 { "bSearchable": false }, 887 null, 888 null, 889 null, 890 null 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 907 908 // Using aoColumns 909 $(document).ready(function(){ 910 $('#example').dataTable( { 911 "aoColumns": [ 912 { "bSortable": false }, 913 null, 914 null, 915 null, 916 null 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 ) { 932 return 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 ) { 947 return oObj.aData[0] +' '+ oObj.aData[3]; 948 }, 949 "bUseRendered": false 950 }, 951 null, 952 null, 953 null, 954 null 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 972 973 // Using aoColumns 974 $(document).ready(function() { 975 $('#example').dataTable( { 976 "aoColumns": [ 977 { "bVisible": false }, 978 null, 979 null, 980 null, 981 null 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) { 996 if ( sData == "1.7" ) { 997 $(nTd).css('color', 'blue') 998 } 999 } 1000 } ] 1001 }); 1002 } ); 1003 1004 /* 1005 * fnRender 1006 * 无默认值 1007 * 自定义列中每个单元格被展示的时候调用的展示函数 1008 */ 1009 // Using aoColumnDefs 1010 $(document).ready(function() { 1011 $('#example').dataTable( { 1012 "aoColumnDefs": [ 1013 { 1014 "fnRender": function ( o, val ) { 1015 return o.aData[0] +' '+ o.aData[3]; 1016 }, 1017 "aTargets": [ 0 ] 1018 } 1019 ] 1020 } ); 1021 } ); 1022 1023 1024 // Using aoColumns 1025 $(document).ready(function() { 1026 $('#example').dataTable( { 1027 "aoColumns": [ 1028 { "fnRender": function ( o, val ) { 1029 return o.aData[0] +' '+ o.aData[3]; 1030 } }, 1031 null, 1032 null, 1033 null, 1034 null 1035 ] 1036 } ); 1037 } ); 1038 1039 /* 1040 * iDataSort 1041 * 默认值为-1，使用自动计算的列标 1042 * 当选择该列进行排序的时候，你希望调用排序操作的列的列号，该参数可以用来按隐藏列排序 1043 */ 1044 // Using aoColumnDefs 1045 $(document).ready(function() { 1046 $('#example').dataTable( { 1047 "aoColumnDefs": [ 1048 { "iDataSort": 1, "aTargets": [ 0 ] } 1049 ] 1050 } ); 1051 } ); 1052 1053 // Using aoColumns 1054 $(document).ready(function() { 1055 $('#example').dataTable( { 1056 "aoColumns": [ 1057 { "iDataSort": 1 }, 1058 null, 1059 null, 1060 null, 1061 null 1062 ] 1063 } ); 1064 } ); 1065 1066 /* 1067 * mDataProp 1068 * 默认为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 objects 1081 $(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 for 1096 // 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 ) { 1103 if (type === 'set') { 1104 source.price = val; 1105 // Store the computed dislay and filter values for efficiency 1106 source.price_display = val=="" ? "" : "$"+numberFormat(val); 1107 source.price_filter = val=="" ? "" : "$"+numberFormat(val)+" "+val; 1108 return; 1109 } 1110 else if (type === 'display') { 1111 return source.price_display; 1112 } 1113 else if (type === 'filter') { 1114 return source.price_filter; 1115 } 1116 // 'sort' and 'type' both just use the integer 1117 return source.price; 1118 } 1119 ] 1120 } ); 1121 } ); 1122 1123 /* 1124 * sClass 1125 * 默认值为空字符串 1126 * 该列的每一个单元格被赋予的class 1127 */ 1128 // Using aoColumnDefs 1129 $(document).ready(function() { 1130 $('#example').dataTable( { 1131 "aoColumnDefs": [ 1132 { "sClass": "my_class", "aTargets": [ 0 ] } 1133 ] 1134 } ); 1135 } ); 1136 1137 // Using aoColumns 1138 $(document).ready(function() { 1139 $('#example').dataTable( { 1140 "aoColumns": [ 1141 { "sClass": "my_class" }, 1142 null, 1143 null, 1144 null, 1145 null 1146 ] 1147 } ); 1148 } ); 1149 1150 /* 1151 * sContentPadding 1152 * 默认值为空字符串 1153 * 当DataTable计算分配给每一列的列宽的时候，会寻找每一列中最长的字符串，然后构建一个临时表 1154 * 从临时表中读取宽度，这样带来的问题是'mmm'会比'iiii'的长度长很多，但是后者的长度要大 1155 * 这样计算值会出现偏差（正确的处理然后放入DOM对象再测量长度会相当的慢），我们提供了这个选项作为一个解决方法 1156 * 它会把他的值添加到该列最长的值的后面来计算列宽，通常你不需要该属性，该属性也没有被写到DataTables.net的文档中 1157 */ 1158 // Using aoColumns 1159 $(document).ready(function() { 1160 $('#example').dataTable( { 1161 "aoColumns": [ 1162 null, 1163 null, 1164 null, 1165 { 1166 "sContentPadding": "mmm" 1167 } 1168 ] 1169 } ); 1170 } ); 1171 1172 /* 1173 * sDefaultContent 1174 * 默认为空字符串 1175 * 允许给列值一个默认值，只要发现null值就会显示默认值 1176 * 可以由mDataProp设置为null或者数据源是null引起 1177 */ 1178 // Using aoColumnDefs 1179 $(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 aoColumns 1193 $(document).ready(function() { 1194 $('#example').dataTable( { 1195 "aoColumns": [ 1196 null, 1197 null, 1198 null, 1199 { 1200 "mDataProp": null, 1201 "sDefaultContent": "Edit" 1202 } 1203 ] 1204 } ); 1205 } ); 1206 1207 /* 1208 * sName 1209 * 默认值为空字符串 1210 * 该参数只有使用在服务器端处理的时候调用，在了解客户端展示了哪些列的时候十分有用 1211 * 然后与数据库字段建立映射，当被定义时，如果服务器端返回的信息的顺序不是期望的顺序，也可以使用名字去区分 1212 * 使用这种方式的好处是：用户在客户端交换了列，你的服务器端代码不用更新 1213 */ 1214 // Using aoColumnDefs 1215 $(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 aoColumns 1229 $(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 * sSortDataType 1243 * 默认值为std 1244 * 为排序操作定义可以用来在排序前读取实时表格信息（更新内部缓存版本）的数据源的类型 1245 * 允许排序事件发生在用户可编辑的元素上，例如输入框 1246 */ 1247 // Using aoColumnDefs 1248 $(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 aoColumns 1261 $(document).ready(function() { 1262 $('#example').dataTable( { 1263 "aoColumns": [ 1264 null, 1265 null, 1266 { "sSortDataType": "dom-text" }, 1267 { "sSortDataType": "dom-text", "sType": "numeric" }, 1268 { "sSortDataType": "dom-select" }, 1269 { "sSortDataType": "dom-checkbox" } 1270 ] 1271 } ); 1272 } ); 1273 1274 /* 1275 * sTitle 1276 * 默认值为null,从TH标签读取 1277 * 列名 1278 */ 1279 // Using aoColumnDefs 1280 $(document).ready(function() { 1281 $('#example').dataTable( { 1282 "aoColumnDefs": [ 1283 { "sTitle": "My column title", "aTargets": [ 0 ] } 1284 ] 1285 } ); 1286 } ); 1287 1288 1289 // Using aoColumns 1290 $(document).ready(function() { 1291 $('#example').dataTable( { 1292 "aoColumns": [ 1293 { "sTitle": "My column title" }, 1294 null, 1295 null, 1296 null, 1297 null 1298 ] 1299 } ); 1300 } ); 1301 1302 /* 1303 * sType 1304 * 默认值为null,从弱引用数据中自动判断 1305 * 允许你指定该列数据按什么类型来排序，目前有四种类型（字符串，数字，日期和html（在排序前会自动除去HTML标记））可选 1306 * 注意只有能够被Javascript的Date对象接受的格式化日期字符串才会被当作日期类型接受，例如"Mar 26, 2008 5:03 PM" 1307 * 默认是使用html类型，更多类型可以通过插件添加 1308 */ 1309 // Using aoColumnDefs 1310 $(document).ready(function() { 1311 $('#example').dataTable( { 1312 "aoColumnDefs": [ 1313 { "sType": "html", "aTargets": [ 0 ] } 1314 ] 1315 } ); 1316 } ); 1317 1318 1319 // Using aoColumns 1320 $(document).ready(function() { 1321 $('#example').dataTable( { 1322 "aoColumns": [ 1323 { "sType": "html" }, 1324 null, 1325 null, 1326 null, 1327 null 1328 ] 1329 } ); 1330 } ); 1331 1332 /* 1333 * sWidth 1334 * 默认值为null,自动的 1335 * 定义列的宽度，该参数可以接受CSS定义（3em,20px等），DataTable对没有通过该接口指定宽度的列使用灵活宽度 1336 * 从而保证表格是可被读的 1337 */ 1338 // Using aoColumnDefs 1339 $(document).ready(function() { 1340 $('#example').dataTable( { 1341 "aoColumnDefs": [ 1342 { "sWidth": "20%", "aTargets": [ 0 ] } 1343 ] 1344 } ); 1345 } ); 1346 1347 1348 // Using aoColumns 1349 $(document).ready(function() { 1350 $('#example').dataTable( { 1351 "aoColumns": [ 1352 { "sWidth": "20%" }, 1353 null, 1354 null, 1355 null, 1356 null 1357 ] 1358 } ); 1359 } ); 1360 /*------------------------------------------------ServerSide------------------------------------------------*/ 1361 /* 1362 * bServerSide 1363 * 默认值false 1364 * 配置使用服务器端处理的DataTable，注意sAjaxSource参数必须指定，以便给DataTable一个获取每行数据的数据源 1365 */ 1366 $(document).ready( function () { 1367 $('#example').dataTable( { 1368 "bServerSide": true, 1369 "sAjaxSource": "xhr.php" 1370 } ); 1371 } ); 1372 /* 1373 * fnServerData 1374 * 无默认值 1375 * 你可以使用该参数重写从服务器获取数据的方法（$.getJSON）,从而使其更适合你的应用 1376 * 例如你可以使用POST方式提交，或者从Google Gears或者AIR数据库获取数据 1377 */ 1378 // POST data to server 1379 $(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": fnCallback 1391 } ); 1392 } 1393 } ); 1394 } ); 1395 /* 1396 * fnServerParams 1397 * 无默认值 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 ) { 1407 aoData.push( { "name": "more_data", "value": "my_value" } ); 1408 } 1409 } ); 1410 } ); 1411 /* 1412 * sAjaxDataProp 1413 * 默认为aaData 1414 * 当使用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 * sAjaxSource 1435 * 默认为null 1436 * 该参数用来向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 * sServerMethod 1446 * 默认值为GET 1447 * 设置使用Ajax方式调用的服务器端的处理方法或者Ajax数据源的HTTP请求方式 1448 */ 1449 $(document).ready(function(){ 1450 $('#example').dataTable({ 1451 "bServerSide": true, 1452 "sAjaxSource": "scripts/post.php", 1453 "sServerMethod": "POST" 1454 }); 1455 });
jquery datatable 参数详解
猜你喜欢
转载自mars5755.iteye.com/blog/2383419
今日推荐
周排行