dataTables.js成员解释大全一

女爷i 2022-05-26 04:21 138阅读 0赞

1，bLengthChange 是否显示选择table中显示数据量 show(10,20,100...)column  
2，bPaginate 是否显示分页menus  
3，bProcessing table载入数据时，是否显示‘进度’提示  
4，bInfo  是否显示有关table中现有数据的信息，执行过滤数据操作(filtered data)时显示对应信息  
  
5，bAutoWidth  
是否启动自动计算各个字段(td单元格)所在宽度  
  
$(document).ready( function () \{  
  $('\#example').dataTable( \{  
    "bAutoWidth": false  
  \} );  
\} );  
6，bScrollInfinite 是否启动初始化滚动条--数据过多了，通常和sScrollY结合使用  
不能和pagination分页功能并存，分页了数据就不会过多了(垂直方向）  
$(document).ready( function() \{  
  $('\#example').dataTable( \{  
    "bScrollInfinite": true,  
    "bScrollCollapse": true,  
    "sScrollY": "200px"  
  \} );  
\} );  
  
7，bServerSide是否启动服务器端数据导入，即要和sAjaxSource结合使用  
  $(document).ready( function () \{  
    $('\#example').dataTable( \{  
      "bServerSide": true,  
      "sAjaxSource": "xhr.php"  
    \} );  
  \} );  
  
8，bSort 是否启动各个字段的排序功能--点击table对应字段的最上面一下，  
    该列就会进行asc或desc排序  
   bSortable可对应启动单个字段的排序功能  
  
9，bSortClasses 是否启动给正在被排序的列(字段)加上class(有sorting\_1,sorting\_2和       
   sorting\_3三种)属性，以凸显正在排序的列，这个功能耗时间，数据大时，关闭  
  
10，bStateSave 是否启动状态保留，开启cookie记住table信息如分页信息，  
   数据长度，filtering过滤和sorting过滤等信息。  
  
11，sScrollX 字段过多，启动横向滚动条  
  $(document).ready( function() \{  
  $('\#example').dataTable( \{  
    "sScrollX": "100%",  
    "bScrollCollapse": true  
  \} );  
\} );  
12,sScrollY  数据过多，使用垂直滚动条 第六个有使用到  
   $(document).ready( function() \{  
  $('\#example').dataTable( \{  
    "sScrollY": "200px",  
    "bPaginate": false  
  \} );  
\} );  
  
13，bFilter 是否启动搜索功能  
  
14，bDestroy  
    $(document).ready( function() \{  
      $('\#example').dataTable( \{  
        "sScrollY": "200px",     //显示200px垂直长度窗口  
        "bPaginate": false       //禁用分页  
       \} );  
     
     // Some time later....  
      $('\#example').dataTable( \{  
         "bFilter": false,  
         "bDestroy": true        //这使得在200px长度窗口显示出来的数据，下一个窗口显示  
                                 //有使得有了分页功能  
       \} );  
   \} );  
15, iDisplayLength 一个分页显示多少行数据  
16, iDisplayStart 从第几行开始显示数据  
  
18，sPaginationType  
  DataTables内建方法有‘two\_button’和‘full\_numbers’  
      
$(document).ready( function() \{  
  $('\#example').dataTable( \{  
    "sPaginationType": "full\_numbers"  
  \} );  
\} )

这类方法是可以自定义的，如：自己写个listbox方法，提供一个下拉框来选择显示当前一个table中显示多少数据，

`$(document).ready(` `function` `() {`

`  $(` `'#example'` `).dataTable( {`

`     "sPaginationType"` `:` `"listbox"`

`   } );`

`} );`

`$.fn.dataTableExt.oPagination.listbox = {`

`    ` `/*`

`     ` `* Function: oPagination.listbox.fnInit`

`     ` `* Purpose:  Initalise dom elements required for pagination with listbox input`

`     ` `* Returns:  -`

`     ` `* Inputs:   object:oSettings - dataTables settings object`

`     ` `*             node:nPaging - the DIV which contains this pagination control`

`     ` `*             function:fnCallbackDraw - draw function which must be called on update`

`     ` `*/`

`    ` `"fnInit"` `:` `function` `(oSettings, nPaging, fnCallbackDraw) {`

`        ` `var` `nInput = document.createElement(` `'select'` `);`

`        ` `var` `nPage = document.createElement(` `'span'` `);`

`        ` `var` `nOf = document.createElement(` `'span'` `);`

`        ` `nOf.className =` `"paginate_of"` `;`

`        ` `nPage.className =` `"paginate_page"` `;`

`        ` `if` `(oSettings.sTableId !==` `''` `) {`

`            ` `nPaging.setAttribute(` `'id'` `, oSettings.sTableId +` `'_paginate'` `);`

`        ` `}`

`        ` `nInput.style.display =` `"inline"` `;`

`        ` `nPage.innerHTML =` `"Page "` `;`

`        ` `nPaging.appendChild(nPage);`

`        ` `nPaging.appendChild(nInput);`

`        ` `nPaging.appendChild(nOf);`

`        ` `$(nInput).change(` `function` `(e) {` `// Set DataTables page property and redraw the grid on listbox change event.`

`            ` `window.scroll(0,0);` `//scroll to top of page`

`            ` `if` `(` `this` `.value ===` `""` `||` `this` `.value.match(/[^0-9]/)) {` `/* Nothing entered or non-numeric character */`

`                ` `return` `;`

`            ` `}`

`            ` `var` `iNewStart = oSettings._iDisplayLength * (` `this` `.value - 1);`

`            ` `if` `(iNewStart > oSettings.fnRecordsDisplay()) {` `/* Display overrun */`

`                ` `oSettings._iDisplayStart = (Math.ceil((oSettings.fnRecordsDisplay() - 1) / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;`

`                ` `fnCallbackDraw(oSettings);`

`                ` `return` `;`

`            ` `}`

`            ` `oSettings._iDisplayStart = iNewStart;`

`            ` `fnCallbackDraw(oSettings);`

`        ` `});` `/* Take the brutal approach to cancelling text selection */`

`        ` `$(` `'span'` `, nPaging).bind(` `'mousedown'` `,` `function` `() {`

`            ` `return` `false` `;`

`        ` `});`

`        ` `$(` `'span'` `, nPaging).bind(` `'selectstart'` `,` `function` `() {`

`            ` `return` `false` `;`

`        ` `});`

`    ` `},`

`     `

`    ` `/*`

`     ` `* Function: oPagination.listbox.fnUpdate`

`     ` `* Purpose:  Update the listbox element`

`     ` `* Returns:  -`

`     ` `* Inputs:   object:oSettings - dataTables settings object`

`     ` `*             function:fnCallbackDraw - draw function which must be called on update`

`     ` `*/`

`    ` `"fnUpdate"` `:` `function` `(oSettings, fnCallbackDraw) {`

`        ` `if` `(!oSettings.aanFeatures.p) {`

`            ` `return` `;`

`        ` `}`

`        ` `var` `iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);`

`        ` `var` `iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;` `/* Loop over each instance of the pager */`

`        ` `var` `an = oSettings.aanFeatures.p;`

`        ` `for` `(` `var` `i = 0, iLen = an.length; i < iLen; i++) {`

`            ` `var` `spans = an[i].getElementsByTagName(` `'span'` `);`

`            ` `var` `inputs = an[i].getElementsByTagName(` `'select'` `);`

`            ` `var` `elSel = inputs[0];`

`            ` `if` `(elSel.options.length != iPages) {`

`                ` `elSel.options.length = 0;` `//clear the listbox contents`

`                ` `for` `(` `var` `j = 0; j < iPages; j++) {` `//add the pages`

`                    ` `var` `oOption = document.createElement(` `'option'` `);`

`                    ` `oOption.text = j + 1;`

`                    ` `oOption.value = j + 1;`

`                    ` `try` `{`

`                        ` `elSel.add(oOption,` `null` `);` `// standards compliant; doesn't work in IE`

`                    ` `}` `catch` `(ex) {`

`                        ` `elSel.add(oOption);` `// IE only`

`                    ` `}`

`                ` `}`

`                ` `spans[1].innerHTML =` `" nbsp;of nbsp;"` `+ iPages;`

`            ` `}`

`          ` `elSel.value = iCurrentPage;`

`        ` `}`

`    ` `}`

`};`

dataTables.js成员解释大全一

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关会计制度设计名词解释大全

相关劳动经济学名词解释大全

相关生物统计学名词解释大全

相关 Windows事件ID及解释大全

相关地理信息系统名词解释大全

相关计算机文件解释,计算机文件后缀名解释大全

相关 MFC字符串操作（一）MFC CString 成员函数用法大全

相关 dataTables.js成员解释大全一

相关 dataTables.js成员解释大全二

相关 cisco命令大全解释、注释