JQuery datatables api
$(function(){
var docrTable = $('#aaa').dataTable({
"destroy":true, //No error will be reported.
"bProcessing" : true, //Whether the'progress'prompt is displayed when the Data Tables load the data
"bServerSide" : true, //Whether to start server-side data import
"bStateSave" : true, //Whether or not to turn on the client state recording function, which will not revert the personalization settings to the initialization state when ajax refreshes the records
"bJQueryUI" : true, //Whether to use jQury's UI theme
"sScrollY" : 450, //High Data Tables
"sScrollX" : 820, //Width of DataTables
"aLengthMenu" : [20, 40, 60], //Change Display Record Number Options
"iDisplayLength" : 40, //Number of records displayed by default
"bAutoWidth" : false, //Adaptive Width
//"BScrollInfinite": false, // / Start initialization scrollbar
"bScrollCollapse" : true, //Whether to turn on the highly adaptive DataTables, when the number of data bars is not enough paging data bars, whether the plug-in height changes with the number of data bars
"bPaginate" : true, //Whether to display (apply) Paginator
"bInfo" : true, //Whether to display footer information, the data tables plug-in shows the number of records in the lower left corner
"sPaginationType" : "full_numbers", //Detailed Paging Groups to Support Direct Jump to a Page
"bSort" : true, //Whether to start the sorting function for each field
"aaSorting" : [[1, "asc"]], //Default sorting, column 2, ascending
"bFilter" : true, //Whether to start filtering and searching functions
"aoColumns" : [{
"mDataProp" : "USERID",
"sDefaultContent" : "", //The default value of this column is ", in case there is no such value in the data, the DataTables will report errors when loading the data.
"bVisible" : false //This column is not displayed
}, {
"mDataProp" : "USERNAME",
"sTitle" : "User name",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "EMAIL",
"sTitle" : "Mail box",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "MOBILE",
"sTitle" : "Mobile phone",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "PHONE",
"sTitle" : "Landline",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "NAME",
"sTitle" : "Full name",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "ISADMIN",
"sTitle" : "User privileges",
"sDefaultContent" : "",
"sClass" : "center"
}],
"oLanguage": { //Internationalization Configuration
"sProcessing" : "Data is being retrieved, please wait a moment....",
"sLengthMenu" : "display _MENU_ strip",
"sZeroRecords" : "There is nothing you want to search for",
"sInfo" : "from _START_ reach _END_ Total number of records _TOTAL_ strip",
"sInfoEmpty" : "The number of records is 0.",
"sInfoFiltered" : "(Total number of records _MAX_ strip)",
"sInfoPostFix" : "",
"sSearch" : "search",
"sUrl" : "",
"oPaginate": {
"sFirst" : "First page",
"sPrevious" : "Previous page",
"sNext" : "next page",
"sLast" : "last page"
}
},
"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
/* Used to overwrite user privileges */
if (aData.ISADMIN == '1')
$('td:eq(5)', nRow).html('Administrators');
if (aData.ISADMIN == '2')
$('td:eq(5)', nRow).html('Data download');
if (aData.ISADMIN == '3')
$('td:eq(5)', nRow).html('General user');
return nRow;
},
"sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),
//Server side, data callback processing
"fnServerData" : function(sSource, aDataSet, fnCallback) {
$.ajax({
"dataType" : 'json',
"type" : "POST",
"url" : sSource,
"data" : aDataSet,
"success" : fnCallback
});
}
});
$("#docrevisontable tbody").click(function(event) {/ / when clicking a record in the table, the record's cId and cName will be written to the hidden field.
$(docrTable.fnSettings().aoData).each(function() {
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
var aData = docrTable.fnGetData(event.target.parentNode);
$("#userId").val(aData.USERID);
$("#userN").val(aData.USERNAME);
});
$('#Docrevisontable_filter'. HTML ('< span > user management list');
$('#Docrevisontable_filter'). append ('<input type= "button" class= "addBtn" id= "addBut" value= "create"/>');
$('#Docrevisontable_filter'). append ('<input type= "button" class= "addBtn" id= "addBut" value= "modification"/>');
$('#Docrevisontable_filter'). append ('<input type= "button" class= "addBtn" id= "addBut" value= "delete"/>');
$('#docrevisontable_filter').append('</span>');
});
})Use an error to delete a portion until it is available.
The parameters of aoColumns are:
| User parameter name | Source parameter name | English explanation | Chinese explanation |
|
cellType |
sCellType |
Cell type to be created for a column | Set the type of column label (ex: th, td) |
| className |
sClass |
Class to assign to each cell in the column | Set the class attribute value of the column |
| contentPadding |
sContentPadding |
Add padding to the text content used when calculating the optimal with for a table. | Setting the fill content to calculate and optimize the text content used for a table does not generally require setting |
| createdCell |
fnCreatedCell |
Cell created callback to allow DOM manipulation | Set the callback function after the cell is created, set the background color or add rows. |
| data |
mData |
Set the data source for the column from the rows data object / array | Set values in cells |
| defaultContent |
sDefaultContent |
Set default, static, content for a column | Set default values for columns |
| name |
sName |
Set a descriptive name for a column | Set the descriptive name of the column |
| orderable |
bSortable |
Enable or disable ordering on this column | Set whether columns can be sorted |
| orderData |
aDataSort |
Define multiple column ordering as the default order for a column | Setting the default order of columns when ordering multiple columns |
| orderDataType | sSortDataType | Live DOM sorting type assignment | |
| orderSequence |
asSorting |
Order direction application sequence | Setting the default sorting of columns can change the order of column sorting |
| render |
mRender |
Render (process) the data for use in the table | |
| searchable |
bSearchable |
Enable or disable filtering on the data in this column | Set whether column data is filtered |
| title | sTitle | Set the column title | Set the title of the column |
| type | sType |
Set the column type - used for filtering and sorting string processing. Four types (string, numeric, date and html (which will strip HTML tags before ordering)) are currently available. |
Sets the type of column for string processing for filtering and sorting. |
| visible | bVisible | Enable or disable the display of this column | Set whether the column is displayed |
| width | sWidth | Column width assignment | Define the width of the column |
The general configuration of bloggers is as follows:
$(function(){
var docrTable = $('#docrevisontable').dataTable({
"destroy":true, //No error will be reported.
"bProcessing" : false, //Whether the'progress'prompt is displayed when the Data Tables load the data
"bInfo" : true, //Whether to display footer information, the data tables plug-in shows the number of records in the lower left corner
"sPaginationType" : "full_numbers", //Detailed Paging Groups to Support Direct Jump to a Page
"bSort" : true, //Whether to start the sorting function for each field
"aaSorting" : [[0, "asc"]], //Default sorting, column n, ascending
"aLengthMenu" : [10, 20, 50], //Change Display Record Number Options
"iDisplayLength" : 10, //Number of records displayed by default
"aoColumns" : [
null,
null,
{
"bVisible" :true, //Visible
"bSearchable": false, //Participation in search
"bSortable":false, //Is it sorted?
"sWidth":200 //Set width
},
null,
null,
null,
null,
null,
null
],
"oLanguage": { //Display settings
"sProcessing" : "Data is being retrieved, please wait a moment....",
"sLengthMenu" : "display _MENU_ strip",
"sZeroRecords" : "There is nothing you want to search for",
"sInfo" : "from _START_ reach _END_ Total number of records _TOTAL_ strip",
"sInfoEmpty" : "The number of records is 0.",
"sInfoFiltered" : "(Total number of records _MAX_ strip)",
"sInfoPostFix" : "",
"sSearch" : "search",
"oPaginate": {
"sFirst" : "First page",
"sPrevious" : "Previous page",
"sNext" : "next page",
"sLast" : "last page"
}
}
});
})