通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

更新时间：2023-05-10 17:18:01 阅读量：实用文档文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

群星议案通过代码推荐度：
相关推荐

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

1.1 通过代码实例跟我学JQuery DataTables表格控件及应用实例（第1部分）

1.1.1 DataTables插件概述

1、DataTables插件

（1）官方

（2）下载DataTables插件

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

（3）Datatables 中文网

2、DataTables主要的功能特性

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：

1) 自动分页处理

2) 即时表格数据过滤

3) 数据排序以及数据类型自动检测

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

4) 自动处理列宽度

5) 可通过CSS定制样式

6) 支持隐藏列

7) 易用

8) 可扩展性和灵活性

9) 国际化

10) 动态创建表格

11) 免费的

1.1.2 应用DataTables控件

1、设计相关的HTML页面

（1）创建一个Web站点

因为DataTable的CSS样式文件在本地和Web服务器端的浏览效果有差别，不知道是什么原因？

（2）在该站点中添加如下的HTML页面

<!doctype html>

<html>

<head>

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

<meta

o"> name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=n

<title>TableEditable 应用示例页面</title>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

注意表格中必须要包含有<thead>和<tbody>标签，还需要引入两个文件即可：一个js文件和一个css文件。

2相关的CSS和JS文件

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

3、JS代码示例

（1）应用DataTables的默认配置并且来自DOM的数据源

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

);

上面的代码直接来源于HTML页面中的表格，在 dataTables 中称为 DOM 来源，并且没有修改默认的配置项目。

} $("#dataTableTagID").dataTable();

（2）应用DataTables的默认配置并且来自JavaScript 中的数组数据源

对于表示行的数组来说，长度应该是相同的。如果某一行数据缺失或者提供了过多地数据的话，就会得到一个警告。

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

此时在页面中所显示的表格数据不再来自于原来的<table>标签，而来自于JS程序中的定义的数据。通过在初始化对象中传递一个名为 aaData 的数组，同样可以提供表格数据，前缀“aa”说明这是一个数组的数组，外层的数组表示表格的行，每一行同样是一个数组。JS代码示例如下：

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

$("#dataTableTagID").dataTable({ "aaData": [ /* 以数组的形式定义表格中的数据源 */ [ "221","张三","男","22","青年","北京市","01012345678","￥2,000" ],

[ "222","张三","男","22","青年","北京市","01012345678","￥2,000" ],

[ "223","张三","男","22","青年","北京市","01012345678","￥2,000" ],

[ "224","张三","男","22","青年","北京市","01012345678","￥2,000" ],

[ "225","张三","男","22","青年","北京市","01012345678","￥2,000" ],

[ "226","张三","男","22","青年","北京市","01012345678","￥2,000" ],

[ "227","张三","男","22","青年","北京市","01012345678","￥2,000" ],

[ "228","张三","男","22","青年","北京市","01012345678","￥2,000" ],

[ "229","张三","男","22","青年","北京市","01012345678","

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

￥2,000" ],

[ "2210","张三","男","22","青年","北京市","01012345678","￥2,000" ],

[ "2211","张三","男","22","青年","北京市","01012345678","￥2,000" ],

[ "2212","张三","男","22","青年","北京市","01012345678","￥2,000" ],

], /** aoColumns 参数用来定义表格的列，这是一个数组，其中的每一个对象用来定义一列

{ "sTitle": "年龄等级", "sClass": "center", "fnRender": function(objectData) { var indexOfColumnNo=objectData.iDataColumn; var currentColumnData = */ "aoColumns": [ { "sTitle": "编号" }, { "sTitle": "姓名" }, { "sTitle": "性别" }, { "sTitle": "年龄", "sClass": "center" }, objectData.aData[ indexOfColumnNo ];

} if ( currentColumnData == "青年" ) { } return currentColumnData; currentColumnData = "<b>青年</b>";

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

] /** }, { "sTitle": "地址"}, { "sTitle": "电话", "sClass": "left"}, { "sTitle": "福利费"}

对于每一个列对象：sTitle 定义列的标题,sClass 定义列的样式，fnRender 函数用来渲染列，这个函数将会传递一个参数对象，这个参数对象的 iDataColumn 属性表示当前的列索引，aData 表示当前的行数组。函数返回的结果将被填充到单元格中。

);

执行的结果如下示图，其中在“年龄等级”数据列中，如果数据值为“青年”将采用粗黑体字显示。

} */ });

dataTables提供有两种不同的方式处理数据（排序和搜索）：

1) 客户端处理——所有的数据集预先加载和数据处理都是在浏览器中完成的，数据少

于10000行可以选择客户端处理。

2) 服务器端处理——数据处理是在服务器上执行，超过100000行的使用服务器端处

理。请注意,两种处理模式不能同时使用,但是可以动态更改从一个模式到另一个。

4、其它更复杂的应用的参考资料

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

5、配置的属性名称在新版本中发生了改变，但原来的属性名称仍然正常支持

1.1.3 DataTable相关的参数和回调函数 1、在 dataTables 中的参数名称的定义规则

在 dataTables 中，参数名称的前缀用来说明参数的数据类型。n – 代表节点，o – 代表对象， a– 代表数组，s – 代表字符串，b – 代表布尔类型，f – 代表浮点类型，i – 代表整形，fn –代表函数。

2、在进行dataTable绑定处理时候可以附加的参数

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

教杨授工作室心创精的作秀优序程职业提升必读系员列料资示出面内搜页索能。功注意如果使，用滤功过，但是能望希闭默认的关过滤输框入应，使用s omD开，关是显否表格示一的信些——允许或息禁 b者nIof true f或lase,d feuat trul止表信e的显息示默认为 tru, e显示信息。,bJQeuyrUI

tru e fal或s, eefdaltu alfes是否用使jq ure yu ithmeeolrlre的格风开，是否关示一显个每页长的度选择条(需分要器页持)支——是允许用否通过户一下拉个表列来择分选页每后页的行数。数行 10,为25,50 10,。这个0设置要 bP需agnatei支持默。为

认beLnghthCange rtue或 f asel, edfalt truuetre。u关开，是否示显使用)(页器。分翻页能功( bPa是ignaet rute或false,edfual ttuer显分示跳页转的个按钮和对各询结果进查行页控分，制如设果置为 alsfe,则示为显页)一开关。,以定当指在正理数据的时处候，否显是”示Probcessin tgre oruf asl, eeduafl ftlae正在处理”这s提个信示—息—体的文字由具一个另属 sP性ocersisg决定(n可以也为轮转图)12杨教授工作室，权版所有，版盗必，究2/19 1页

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

杨教授作工精室创心的优作秀程序员职业升必读系列资提料开，关以定是否指限无滚(动

与 SscrllYo配合使bS collrIfniitentr euor fals,ed faeltu afls e),在用大数据的量候时有用很。这当个志标为 rtu的时e,分页候就默认关闭器开，关是让各否列具按有列序排能功如果设置。 borStt ue rr oalfes, dfauetlt ur为 felaes则点击，头列将不重新会排序数。因据在为许允序的情排况下，点击页头的择框按钮会选生产面页动翻自。页关开，定指当前当在列排时，序是否增加 lcasss bSoerCtlasesstr e ourf lsa, eedfaul truet 'ostrngi1',_'so rintg_2'a dn 'osritn_g3,'打后，在开处理数大据，性能时有损所失开，关否是开客打端状态户记录能(功存保最后一次分页信息排序、息信)这。数个是记录据在oockeis中的，开打了个这记后，即录使新一次页刷面或重新，开打浏览，器之的前态状是都保存来下的。 btateSavSe tru er folae,sdef ula ftasel值当为 rut时 aeooClmnuefsD能不藏列隐默认。情下况，这状态个保存会 2小时如果你希，设望置的时更间长，过通设置参数 tatsDeuartoni来始初表化格这个参数也可值控制是以地本存(0储~大更)是还 essisn储o存(-) s1Scolrl X'dsaibedl or ''100%'类是否开启水平滚，以动指及定动滚区域大1小3杨授教作工，版权所有室，盗版必究， 1/19页3杨

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

授教作工室心精作创的秀程优序职业员提必读系列资料

似升的字串 'd符sibald' ore 2'00p'类x似的字符串

ScrsolYl

否开是启直滚动，以及指定滚垂动区大小域指定按列多数据排序依的据。如下面示例设的置从第 0开列，始以第4列序排列：倒$(ocumdetn.r)edy(fancutoi()n{ arry aarar[yint,trsing],如[,[[0,'asc']],0,[d'se'c]]$('e#xampe'l.d)aaTtabel ({" aaoSrtng": i[[ 4,"d ec"]s]}); )}; aaSrtingoiFxde同上同上。唯不同一点是不被用能的自定户配置义冲这个为选择每页的突条目数，使当用一二个数组维，二时维层面能有只两个元素，一第个为示显每页目条的选项数，第二是个关这于些选项页的显面示提示字文

。aaoSrtign

efdulat[10,2, 50,5 100]可，以一为数组维，可也为aLnegtheMun维数组二，比如：[10,[ 25, 5, -0],[101,25, 50,"lAl"] d]eaflu tuln,类l:似n[ul,l oSearahcCols

"{Ssarceh:""yM flier"t,}给每列个独定义其初始单搜化列索特性 (表这一nll,{us"Seacr":"h^[09]-,"还块搞懂没)" EbsapeRegec": faxsel}]

asSritpCaslses

dfauel t['ddo' ',eevn',比]如's[rtp1'i, 'tsirp'2 ',tsrip3']rtu oer flae,sd fealut flsea

指要定应用到各行被的cla ss格，会风自动环循用于当要在一同元个上执行新的 dat素Tablea绑定时将，之的那个前数据象对清掉，除换新的以bDetsoy

14r杨教工作授室，版所有权盗，必版， 14/究91页

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

教授工杨室作精心作创优秀程的序职业员升必提读列资系料对象设置于用

指明当执行dtaTaabe绑定l时，是否回 Data返aTbl e象对定指当的适时缩候起滚动视图未(知东的东)bRetirev

ertu ero alsfe,d efuat lfalseSbcrloCollalse tpureor fase,lde auftl alfs bSoerCetllTops ruet r oafsl, eefadlu fatlseiCookieDrautio整，数默认 2007单位，指用定存储于客户信息到 co端koie中时的间长n ieDefroLdiang为秒度，超过这个间后，自时动过延迟期载加，它参的为数要加载条目的目，通数常 bSe与verSird,eAsjaxourSce配等合用使用指定于屏一显示条的，需开数分启器页用于指定哪从一数条开始据示到表显格中用去指于当定Da taTbale设置滚动时为最多，以可一显示屏多少数据条数整默认为 nu,lliDipslaLeygnth整，数默认 1为 0DisipayltarS t整数默，为认0iSrcloLoadGla整p,数默为认 01 0默{"认sSarce":h"" oSe,acr h"Rebegx":"b Smrt": trae u sA}jaxDtaaropPs AaxSourjc sCeooiePkefir字x符串defau,tl' aaataD' afsel

又,是始时指初搜定索参数关的相，有点复，没杂搞懂目

前定指从服务端当获取格表数据，时数据项用的使名字URL字符串d,efaul ntllu指要定哪个 U从L获取R数字符串据，edaful t当打开状态存储特性后，用于指定存储在 Sp'yreMda_iatDTableas_' dfeult aflrtp i(whn e是用于这定义Dat aTblae布局一个的大强的性 coo属kis中e的字符串前缀名的字soDmbJuQryUe is fIale) sro<""lfr>Ht"<Fip> bJQu"eyrIUi str ue (w)hen

15教授杨作工，版室所有，盗权必究，版1/159页

杨教授

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

3、DataTable所支持的回调函数

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

杨教工作室授精创作的心优程秀序职业提升员必系列读资料

Inde arrayx o ttrnalsaetthe vis alu ospiitonto he ftlu dalat rraay 1.itn: nmuerbto b eStri g: fnroatmtd有 e默认的用于在数字大上，动加自入一些逗号分，开隔fnFrmotaNmbeurfromatte d1.node:"RT el"ment eofrthe ehdar e.2raay arrra ysrtins: guFl tlalbe dta (aasde ivrd erfomth orieinga lHTML) .int3:nIde fxrostringf r DatoTablase o thow sht nemuberfnHedearCllabc ak

hetc urrent isdpay stlraitg nopinti nhetdi psla yarry a无.4it n:Inde fxr thoe crreut ndspila enyingd oint pinth edi slap yarra 5.yarray nit: In ex adrary ottr anslaett e hisvua ploistoni t ohe tful dltaaar ray 1obje.t: csetintsgDa ataTlebs boejct2. nit:无于用在每次 rad w生时，修改发 atbe的lh eadreSatrtin gpsotiinoin ata dfo rhetf InfoCallback ndawr3. nti:En stdrin: Tgeh sring ttob e idsplayed in th e无psotioniin d taa fr toe hdaw r4in.:tT oat numbelrof rows in th eof t ablefilteri g)n

用于达传taleb信

息nifromatio elenemn.

(tergadrless5i.n:t oTta lnmuberof owr isnt e dath aste,ftaer17杨授教作工室，权所版有盗，必版究 1,7/9页

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

杨1教授工作室心创作精优的秀程序员职提业升必读系列资

料ifterilgn6.strig:nThe

sring ttha taDatabTls hes afromated tuins it's ogn wurel fnInsiCotmpleet1 obj.cet:Setotngsi ataTaDleb settinsgs bjeoc无无t格初表始完化成后用调用于开在始绘制前之调用，返 fnPerraDwCalba l.o1bect:ojettingSsck Da ataTble ssetintsg ojebct回 fasle话的， Boleoan会无止阻 rad事w发生；件返回其它值，radw以可顺利行执1.nod e"TR":eelmen fotr te curhern rtow2 a.rrayst ingr s:aw dRaa artay forr tihsro w(s daervied rom ffRnoCwalblck tha oeirginla HTL) M.3itn nod::e"RT" lemeetn The dislayp inde xfr thoe frothe ucrenr rotwc ruentrta bl edarw4. it: nTehin exd f ohe dttaa in ht eufl list lofrows af(ter iftelrnig 1).trsngi H:TP Tsorcue to obaintth e dat framo(i .. fneeSvrreata DsjAaxoSruec 2)ar.ra yovid .$gte JSO N用于替换认默到服务发端的请操求作无创建当行了，但未绘制到屏还幕上时候调用的通，常用改于行的变 lcss风格

obajetsc:A key/valu paei orjbcetc ontianngit e dahta18教授工作室，版杨权所有，版必究，盗 8/191页

通过代码实例跟我学JQuery DataTables表格控件及应用实例(第1部分)

教授工作杨精室创心作的优程秀员序职业提升读必列系资料tosen dtoth esreve r.3fuctnon:i uncFtio to nb celaledon ocplmeito onft he daa tetg rpcoesst hta wll idawr th edta anoth peag. 1.object:oeSetitgn s-aDtaTblases etitnsg obejct2.o jebc:tDaota ocntianingf ntSatLeodaCall acb ObkjcetBo oeln a-f ale isfth est te ahsulod no te无 boaldde,t uero htrewis在e cooiks中e的据被加数前载执行可以，方便地修改这数些据inforamtoni

retrived eform tehst tea sviangc okoei wihc

shhuldo eb restoedr Fo. rhete xact rpoperites lepsearefer ott heDa tTaable csde. o.ob1ect:ojeStingt在s状数态被据存储到c ooikes前行执可以方，地做一便些

预作操DataTbaeslset tnigs ojbcet nSfateStvaeaCll ack b2S.tinr:gValus - ea JSONS rtin g- he ftll sutinr gstrni (gwihottut e fihan that slohludb eu se dt o无lcsong biarec whic)h sae thvest aet

sohludbe s trod ient e htaste saingvcook e.i

91杨教工授室，作权版所有，版盗必，究 9/119页

本文来源：https://www.bwwdw.com/article/16oe.html

相关文章：

小学二年级班主任工作计划2篇03-26

基层安全监管工作存在问题及对策07-05

学风建设问卷分析报告04-23

建筑施工模板及作业平台钢管支架构造安全技术规范 - 图文01-17

xx市财政局年度工作总结和2022年工作计划范文08-03

GCP初级培训试题04-21

高品质油茶良种基地与茶油深加工项目可行性研究报告07-10

中考写景散文11-21

科技成果转化与研发项目高品收入之间的关系01-10

上一篇：某工程主体总承包施工组织设计-187DOC 下一篇：利用ExcelVBA程序计算曲线坐标