dataTables使用方法doc.docx

dataTables使用方法doc.docx

《dataTables使用方法doc.docx》由会员分享，可在线阅读，更多相关《dataTables使用方法doc.docx（23页珍藏版）》请在冰豆网上搜索。

dataTables使用方法doc

dataTables的使用方法

"bVisible":

false,不显示列

1，bLengthChange是否显示选择table中显示数据量show（10,20,100...）column

2，bPaginate是否显示分页menus

3，bProcessing载入数据时，是否显示‘进度’提示

4，bInfo 是否显示有关table中现有数据的信息，执行过滤数据操作（filtereddata）时显示对应信息

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      //禁用分页

      }）;

    //Sometimelater....

     $（'#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"

  }）;

}）;

varoTable=$（"#list-table"）.dataTable（$.extend（true,{},dataTableConfig,{}）；

oTable是一个自定义配置的datatables对象，其内部包含许多插件自带的函数，如fnAddData（）、fnDraw（）,fnSort（）,fnFilter（）…可直接通过oTable.fnAddData（）调用相关函数，obj为后台返回的对象，其属性如下：

aoData中包含datatables的一些配置参数，如上图

$.fn.dataTableExt.oPagination.listbox={

   /*

    *Function:

oPagination.listbox.fnInit

    *Purpose:

 Initalisedoomelementsrequiredforpaginationwithlistboxinput

    *Returns:

 -

    *Inputs:

  object:

oSettings-dataTablessettingsobject

    *            node:

nPaging-theDIVwhichcontainsthispaginationcontrol

    *            function:

fnCallbackDraw-drawfunctionwhichmustbecalledonupdate

    */

   "fnInit":

function（oSettings,nPaging,fnCallbackDraw）{

       varnInput=document.createElement（'select'）;

       varnPage=document.createElement（'span'）;

       varnOf=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）{//SetDataTablespagepropertyandredrawthegridonlistboxchangeevent.

           window.scroll（0,0）;//scrolltotopofpage

           if（this.value===""||this.value.match（/[^0-9]/））{/*Nothingenteredornon-numericcharacter*/

               return;

           }

           variNewStart=oSettings._iDisplayLength*（this.value-1）;

           if（iNewStart>oSettings.fnRecordsDisplay（））{/*Displayoverrun*/

               oSettings._iDisplayStart=（Math.ceil（（oSettings.fnRecordsDisplay（）-1）/oSettings._iDisplayLength）-1）*oSettings._iDisplayLength;

               fnCallbackDraw（oSettings）;

               return;

           }

           oSettings._iDisplayStart=iNewStart;

           fnCallbackDraw（oSettings）;

       }）;/*Takethebrutalapproachtocancellingtextselection*/

       $（'span',nPaging）.bind（'mousedown',function（）{

           returnfalse;

       }）;

       $（'span',nPaging）.bind（'selectstart',function（）{

           returnfalse;

       }）;

   },

   /*

    *Function:

oPagination.listbox.fnUpdate

    *Purpose:

 Updatethelistboxelement

    *Returns:

 -

    *Inputs:

  object:

oSettings-dataTablessettingsobject

    *            function:

fnCallbackDraw-drawfunctionwhichmustbecalledonupdate

    */

   "fnUpdate":

function（oSettings,fnCallbackDraw）{

       if（!

oSettings.aanFeatures.p）{

           return;

       }

       variPages=Math.ceil（（oSettings.fnRecordsDisplay（））/oSettings._iDisplayLength）;

       variCurrentPage=Math.ceil（oSettings._iDisplayStart/oSettings._iDisplayLength）+1;/*Loopovereachinstanceofthepager*/

       varan=oSettings.aanFeatures.p;

       for（vari=0,iLen=an.length;i

           varspans=an[i].getElementsByTagName（'span'）;

           varinputs=an[i].getElementsByTagName（'select'）;

           varelSel=inputs[0];

           if（elSel.options.length!

=iPages）{

               elSel.options.length=0;//clearthelistboxcontents

               for（varj=0;j

                   varoOption=document.createElement（'option'）;

                   oOption.text=j+1;

                   oOption.value=j+1;

                   try{

                       elSel.add（oOption,null）;//standardscompliant;doesn'tworkinIE

                   }catch（ex）{

                       elSel.add（oOption）;//IEonly

                   }

               }

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

           }

         elSel.value=iCurrentPage;

       }

   }

};

jQuery的插件dataTables是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。

dataTables的网站上也提供了大量的演示和详细的文档进行说明，为了方便学习使用，这里一步一步进行说明。

首先，需要到dataTables的网站  下载这个脚本库，

目前最新的版本是1.8.2，下载的压缩包中使用的jQuery是1.4.4。

现在jQuery1.5.1已经发布，所以，这里使用最新的jQuery1.5.1。

然后，在网页中先加入jQuery的引用，然后，加入dataTables的引用。

引入CSS文件和JS文件

--------------------------------------------------------------------------

      @import"DataTables-1.8.1/media/css/demo_page.css";

      @import"DataTables-1.8.1/media/css/demo_table.css";

      @import"DataTables-1.8.1/media/css/demo_table_jui.css";

--------------------------------------------------------------------------

-----------最简单的方式：

$（document）.ready（function（）{

$（"#example"）.dataTable（）;

}）;

----------也可以自己定义各属性：

      $（document）.ready（function（）{

        $（"#example"）.dataTable（{

//          "bPaginate":

true,//开关，是否显示分页器

//          "bInfo":

true,//开关，是否显示表格的一些信息

//          "bFilter":

true,//开关，是否启用客户端过滤器

//          "sDom":

"<>lfrtip<>",

//          "bAutoWith":

false,//自动调整表格宽度

//          "bDeferRender":

false,

//          "bJQueryUI":

false,//开关，是否启用JQueryUI风格

//          "bLengthChange":

true,//开关，是否显示每页大小的下拉框

//          "bProcessing":

true,//在初始化加载数据时，是否显示进度条

//          "bScrollInfinite":

false,//是否显示滚动条

//          "sScrollY":

"800px",//是否开启垂直滚动，以及指定滚动区域大小,可设值：

'disabled','2000px'

//          "bSort":

true,//开关，是否启用各列具有按列排序的功能

//          "bSortClasses":

true,

//          "bStateSave":

false,//开关，是否打开客户端状态记录功能。

这个数据是记录在cookies中的，

打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的-

------当值为true时aoColumnDefs不能隐藏列

//          "sScrollX":

"50%",//是否开启水平滚动，以及指定滚动区域大小,可设值：

'disabled','2000%'

//          "aaSorting":

[[0,"asc"]],

//          "aoColumnDefs":

[{"bVisible":

false,"aTargets":

[0]}]//隐藏列

//          "sDom":

'<"H"if>t<"F"if>',

          "bAutoWidth":

false,//自适应宽度

          "aaSorting":

[[1,"asc"]],

          "sPaginationType":

"full_numbers",

          "oLanguage":

{

              "sProcessing":

"正在加载中......",

              "sLengthMenu":

"每页显示_MENU_条记录",

              "sZeroRecords":

"对不起，查询不到相关数据！

",

              "sEmptyTable":

"表中无数据存在！

",

              "sInfo":

"当前显示_START_到_END_条，共_TOTAL_条记录",

              "sInfoFiltered":

"数据表中共为_MAX_条记录",

              "sSearch":

"搜索",

              "oPaginate":

{

                "sFirst":

"首页",

                "sPrevious":

"上一页",

                "sNext":

"下一页",

                "sLast":

"末页"

              }

          }//多语言配置 

        }）;

      }）;

----------------页面：

对于dataTables来说，表格必须通过thead和tbody进行说明，如下所示，

1. 

2.       

3.         

4.           

5.              Renderingengine 

6.           

7.           

8.              Browser 

9.           

10.           

11.