dataTables使用方法docWord文档格式.docx
《dataTables使用方法docWord文档格式.docx》由会员分享，可在线阅读，更多相关《dataTables使用方法docWord文档格式.docx（23页珍藏版）》请在冰豆网上搜索。
$（document）.ready（function（）{
bServerSide"
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（）{
sScrollX"
100%"
true
12,sScrollY
数据过多，使用垂直滚动条第六个有使用到
bPaginate"
13，bFilter是否启动搜索功能
14，bDestroy
//显示200px垂直长度窗口
false
//禁用分页
//Sometimelater....
bFilter"
false,
bDestroy"
true
//这使得在200px长度窗口显示出来的数据，下一个窗口显示
//有使得有了分页功能
15,iDisplayLength一个分页显示多少行数据
16,iDisplayStart从第几行开始显示数据
18，sPaginationType
DataTables内建方法有‘two_button’和‘full_numbers’
sPaginationType"
full_numbers"
}）
这类方法是可以自定义的，如：
自己写个listbox方法，提供一个下拉框来选择显示当前一个table中显示多少数据，
$（document）.ready（function（）{
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（'
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）;
oSettings._iDisplayStart=iNewStart;
}）;
/*Takethebrutalapproachtocancellingtextselection*/
nPaging）.bind（'
mousedown'
function（）{
returnfalse;
selectstart'
},
oPagination.listbox.fnUpdate
Updatethelistboxelement
fnUpdate"
function（oSettings,fnCallbackDraw）{
if（!
oSettings.aanFeatures.p）{
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<
iLen;
i++）{
varspans=an[i].getElementsByTagName（'
varinputs=an[i].getElementsByTagName（'
varelSel=inputs[0];
if（elSel.options.length!
=iPages）{
elSel.options.length=0;
//clearthelistboxcontents
for（varj=0;
j<
iPages;
j++）{//addthepages
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文件
--------------------------------------------------------------------------
<
styletype="
text/css"
title="
currentStyle"
>
@import"
DataTables-1.8.1/media/css/demo_page.css"
DataTables-1.8.1/media/css/demo_table.css"
DataTables-1.8.1/media/css/demo_table_jui.css"
/style>
scripttype="
text/javascript"
language="
javascript"
src="
DataTables-1.8.1/media/js/jquery.js"
/script>
DataTables-1.8.1/media/js/jquery.dataTables.js"
-----------最简单的方式：
$（"
#example"
）.dataTable（）;
}）;
----------也可以自己定义各属性：
）.dataTable（{
//
true,//开关，是否显示分页器
bInfo"
true,//开关，是否显示表格的一些信息
true,//开关，是否启用客户端过滤器
sDom"
lfrtip<
bAutoWith"
false,//自动调整表格宽度
bDeferRender"
bJQueryUI"
false,//开关，是否启用JQueryUI风格
bLengthChange"
true,//开关，是否显示每页大小的下拉框
bProcessing"
true,//在初始化加载数据时，是否显示进度条
false,//是否显示滚动条
800px"
//是否开启垂直滚动，以及指定滚动区域大小,可设值：
disabled'
'
2000px'
bSort"
true,//开关，是否启用各列具有按列排序的功能
bSortClasses"
bStateSave"
false,//开关，是否打开客户端状态记录功能。
这个数据是记录在cookies中的，
打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的-
------当值为true时aoColumnDefs不能隐藏列
50%"
//是否开启水平滚动，以及指定滚动区域大小,可设值：
2000%'
aaSorting"
[[0,"
asc"
]],
aoColumnDefs"
[{"
false,"
aTargets"
[0]}]//隐藏列
'
H"
if>
t<
F"
false,//自适应宽度
[[1,"
oLanguage"
{
sProcessing"
正在加载中......"
sLengthMenu"
每页显示_MENU_条记录"
sZeroRecords"
对不起，查询不到相关数据！
sEmptyTable"
表中无数据存在！
sInfo"
当前显示_START_到_END_条，共_TOTAL_条记录"
sInfoFiltered"
数据表中共为_MAX_条记录"
sSearch"
搜索"
oPaginate"
sFirst"
首页"
sPrevious"
上一页"
sNext"
下一页"
sLast"
末页"
}
}//多语言配置
<
----------------页面：
对于dataTables来说，表格必须通过thead和tbody进行说明，如下所示，
1.<
tablecellpadding="
0"
cellspacing="
border="
class="
display"
id="
example"
2.
thead>
3.
tr>
4.
th>
5.
Renderingengine
6.
/th>
7.
8.
Browser
9.
10.
11.
升级会员 