DataTables. js member explanation

1. bLengthChange: whether to display the data volume in the selected table. show (100,...) column
2. Whether bPaginate displays the page menus
3. indicates whether the 'progress' prompt is displayed when the bProcessing table loads data.
4. Whether the bInfo displays information about the existing data in the table. When the data filtering operation (filtered data) is performed, the corresponding information is displayed.
 
5, bAutoWidth
Whether to enable automatic calculation of the width of each field (td cell)
 
$ (Document). ready (function (){
$ ('# Example'). dataTable ({
"BAutoWidth": false
});
});
6. Whether bScrollInfinite starts the initialization scroll bar-too much data, usually used in combination with sScrollY
It cannot coexist with the pagination paging function. When paging is performed, there will not be too much data (vertical direction)
$ (Document). ready (function (){
$ ('# Example'). dataTable ({
"BScrollInfinite": true,
"BScrollCollapse": true,
"SScrollY": "200px"
});
});
 
7. Whether bServerSide starts data import from the server, that is, it must be used with sAjaxSource.
$ (Document). ready (function (){
$ ('# Example'). dataTable ({
"BServerSide": true,
"SAjaxSource": "xhr. php"
});
});
 
8. Does bSort enable sorting of various fields? Click the top of the corresponding table field,
This column is sorted by asc or desc.
BSortable can be used to sort a single field.
 
9. Does bSortClasses start adding class (including sorting_1, sorting_2, and
Sorting_3) attribute to highlight the columns being sorted. This function is time-consuming and disabled when data is large.
 
10. Whether bStateSave is enabled or not. Enable cookie to remember table information, such as paging information,
Data Length, filtering, sorting filtering, and other information.
 
11. sScrollX contains too many fields to start the horizontal scroll bar.
$ (Document). ready (function (){
$ ('# Example'). dataTable ({
"SScrollX": "100% ",
"BScrollCollapse": true
});
});
12. sScrollY has too much data. Use the sixth vertical scroll bar.
$ (Document). ready (function (){
$ ('# Example'). dataTable ({
"SScrollY": "200px ",
"BPaginate": false
});
});
 
13. Does bFilter enable the search function?
 
14, bDestroy
$ (Document). ready (function (){
$ ('# Example'). dataTable ({
"SScrollY": "200px", // display the 200px vertical length window
"BPaginate": false // disable Paging
});

// Some time later ....
$ ('# Example'). dataTable ({
"BFilter": false,
"BDestroy": true // This means that the data displayed in the PX length window is displayed in the next window.
// Enable the paging Function
});
});
15. How many lines of data are displayed on one page in iDisplayLength?
16. iDisplayStart displays the data starting from the row
 
18, sPaginationType
DataTables built-in methods include 'two _ button' and 'full _ numbers'

$ (Document). ready (function (){
$ ('# Example'). dataTable ({
"SPaginationType": "full_numbers"
});
})
This type of method can be customized. For example, you can write a listbox method and provide a drop-down box to select how much data is displayed in the current 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 canceling 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;
}
}
};