dataTables使用方法docWord文档格式.docx

1、 $（document）.ready（ function （） bServerSidesAjaxSourcexhr.php8，bSort 是否启动各个字段的排序功能-点击table对应字段的最上面一下， 该列就会进行asc或desc排序 bSortable可对应启动单个字段的排序功能9，bSortClasses 是否启动给正在被排序的列（字段）加上class（有sorting_1,sorting_2和 sorting_3三种）属性，以凸显正在排序的列，这个功能耗时间，数据大时，关闭10，bStateSave 是否启动状态保留，开启cookie记住table信息如分页信息， 数据长度，filte

2、ring过滤和sorting过滤等信息。11，sScrollX 字段过多，启动横向滚动条 $（document）.ready（ function（） sScrollX100%, true12,sScrollY 数据过多，使用垂直滚动条 第六个有使用到bPaginate13，bFilter 是否启动搜索功能14，bDestroy, /显示200px垂直长度窗口 false /禁用分页 / Some time later.bFilter false,bDestroy true /这使得在200px长度窗口显示出来的数据，下一个窗口显示 /有使得有了分页功能15, iDisplayLength 一个

3、分页显示多少行数据16, iDisplayStart 从第几行开始显示数据18，sPaginationType DataTables内建方法有two_button和full_numberssPaginationTypefull_numbers ）这类方法是可以自定义的，如：自己写个listbox方法，提供一个下拉框来选择显示当前一个table中显示多少数据，$（document）.ready（function（） listboxvar oTable = $（#list-table）.dataTable（$.extend（true,dataTableConfig,）；oTable是一个自定义配置

4、的datatables对象，其内部包含许多插件自带的函数，如fnAddData（）、fnDraw（）,fnSort（）,fnFilter（）可直接通过oTable.fnAddData（）调用相关函数，obj为后台返回的对象，其属性如下：aoData中包含datatables的一些配置参数，如上图$.fn.dataTableExt.oPagination.listbox = /* * Function: oPagination.listbox.fnInit * Purpose: Initalise doom elements required for pagination with listbo

5、x input * Returns: - * Inputs: object:oSettings - data Tables 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.createElem

6、ent（select）; var nPage = document.createElement（span var nOf = 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.appendC

7、hild（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 charac

8、ter */ 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（oSetting

9、s）; oSettings._iDisplayStart = iNewStart; ）; /* Take the brutal approach to cancelling text selection */, nPaging）.bind（mousedown, function （） return false;selectstart , oPagination.listbox.fnUpdate Update the listbox elementfnUpdate function （oSettings, fnCallbackDraw） if （!oSettings.aanFeatures.p）

10、 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 sp

11、ans = ani.getElementsByTagName（ var inputs = ani.getElementsByTagName（ var elSel = inputs0; 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.

12、value = j + 1; try elSel.add（oOption, null）; / standards compliant; doesnt work in IE catch （ex） elSel.add（oOption）; / IE only spans1.innerHTML = nbsp;of nbsp; + iPages; elSel.value = iCurrentPage;jQuery 的插件 data Tables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。data Tables 的网站上也提供了大量的演示和详细的文档进行说明，

13、为了方便学习使用，这里一步一步进行说明。首先，需要到 data Tables 的网站下载这个脚本库，目前最新的版本是 1.8.2，下载的压缩包中使用的 jQuery 是 1.4.4 。现在 jQuery1.5.1 已经发布，所以，这里使用最新的 jQuery 1.5.1 。然后，在网页中先加入 jQuery 的引用，然后，加入 data Tables 的引用。引入CSS文件和JS文件- import DataTables-1.8.1/media/css/demo_page.cssDataTables-1.8.1/media/css/demo_table.cssDataTables-1.8.1/

14、media/css/demo_table_jui.css/stylescript type=text/javascript language=javascript src=DataTables-1.8.1/media/js/jquery.js/scriptDataTables-1.8.1/media/js/jquery.dataTables.js-最简单的方式：$（#example）.dataTable（）;）;-也可以自己定义各属性：）.dataTable（/ true, /开关，是否显示分页器bInfo true, /开关，是否显示表格的一些信息 true, /开关，是否启用客户端过滤器s

15、DomlfrtiptF false, /自适应宽度 1, oLanguage sProcessing正在加载中.sLengthMenu每页显示 _MENU_ 条记录sZeroRecords对不起，查询不到相关数据！sEmptyTable表中无数据存在！sInfo当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录sInfoFiltered数据表中共为 _MAX_ 条记录sSearch搜索oPaginatesFirst首页sPrevious上一页sNext下一页sLast末页 /多语言配置 -页面：对于 data Tables 来说，表格必须通过 thead 和 tbody 进行说明，如下所示，1.3.tr4.th5.Rendering engine6./th7.8.Browser9.10.11.