读书人

dataTables.js成员解释大全 1

发布时间: 2012-09-24 13:49:41 作者: rapoo

dataTables.js成员解释大全 一
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) { 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) { // 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; } variNewStart = 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 () { returnfalse; }); $('span', nPaging).bind('selectstart',function () { returnfalse; }); }, /* * 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; } variPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength); variCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;/* Loop over each instance of the pager */ varan = oSettings.aanFeatures.p; for(var i = 0, iLen = an.length; i < iLen; i++) { varspans = an[i].getElementsByTagName('span'); varinputs = an[i].getElementsByTagName('select'); varelSel = 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 varoOption = 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; } }};















读书人网 >JavaScript

热点推荐