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) {
var nInput = document.createElement('select');
var nPage = document.createElement('span');
var nOf = 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;
}
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(oSettings);
return;
}
oSettings._iDisplayStart = iNewStart;
fnCallbackDraw(oSettings);
}); /* Take the brutal approach to cancelling text selection */
$('span', nPaging).bind('mousedown', function () {
return false;
});
$('span', nPaging).bind('selectstart', function () {
return false;
});
},
/*
* 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;
}
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 spans = an[i].getElementsByTagName('span');
var inputs = an[i].getElementsByTagName('select');
var elSel = 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
var oOption = 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;
}
}
};
web开发网站
