JQuery control --- DataTables Learning

To add, delete, modify, and delete tables in these two days, select the DataTables control of jQuery. 1. Datatables Introduction 1.1 Description: DataTables is a jQuery table plug-in. This is a highly flexible tool, and the foundation is gradually enhanced, which will increase... SyntaxHighlighter.

To add, delete, modify, and delete tables in these two days, select the DataTables control of jQuery.
1. Datatables Introduction
1.1 note:
DataTables is a jQuery table plug-in. This is a highly flexible tool based on a step-by-step enhancement that will add advanced interactive control and support for any HTML table. Main features:
Automatic Paging
Real-time table data filtering
Automatic data sorting and data type detection
Automatically process column width
You can customize styles through CSS.
Columns can be hidden.
Easy to use
Scalability and flexibility
Internationalization
Dynamic table Creation
Free
2. How to use:
There was no artist or front-end engineer to work with you in the background. To display data and have a certain aesthetic, we can use the DataTables plug-in of jQuery to help us complete the task.

1. Default DataTables Configuration
[Javascript]
$ (Document). ready (function (){
$ ('# Example'). dataTable ();
});
2. Some basic attributes of DataTables
[Javascript]
"BPaginate": true, // page flip Function
"BLengthChange": true, // change the number of data displayed on each page
"BFilter": true, // Filter Function
"BSort": false, // sorting Function
"BInfo": true, // footer information
"BAutoWidth": true // automatic width
3. Data Sorting
[Javascript]
$ (Document). ready (function (){
$ ('# Example'). dataTable ({
"AaSorting ":[
[4, "desc"]
]
});
});

Starting from 0th columns, arranged in descending order of 4th columns
4. Hide certain Columns
[Javascript]
$ (Document). ready (function (){
$ ('# Example'). dataTable ({
"AoColumnDefs ":[
{"BSearchable": false, "bVisible": false, "aTargets": [2]},
{"BVisible": false, "aTargets": [3]}
]});
});
5. Internationalization
[Javascript]
$ (Document). ready (function (){
$ ('# Example'). dataTable ({
"OLanguage ":{
"SLengthMenu": "_ MENU _ records displayed on each page ",
"SZeroRecords": "Sorry, no ",
"SInfo": "From _ START _ to _ END _/TOTAL _ data ",
"SInfoEmpty": "No data ",
"SInfoFiltered": "(retrieved from _ MAX _ data entries )",
"OPaginate ":{
"SFirst": "Homepage ",
"SPrevious": "Previous Page ",
"SNext": "Next page ",
"SLast": "last page"
},
"SZeroRecords": "No data retrieved ",
"SProcessing ":""
}
});
});

6. Sorting:
[Javascript]
$ (Document). ready (function (){
$ ('# Example'). dataTable ({
"AoColumns ":[
Null,
{"AsSorting": ["asc"]},
{"AsSorting": ["desc", "asc", "asc"]},
{"AsSorting": []},
{"AsSorting": []}
]
});
});

7. Four data types are supported:
[Html]
• DOM document data
• Javascript array js array
• Ajax source Ajax request data
• Server side processing Server-side data

3. Case study:
Obtained through the JS Array

[Javascript]
Var oTable;
/* Course data */
Function courseData (data ){
Var courseArrayData = new Array ();
Var result = eval (data );
Col = result. length;

For (var j = 0; j{
Var meetInfoArr = new Array ();
Var meetInfoObj = result [j];
MeetInfoArr. push (meetInfoObj ['meetinginfoid']);
MeetInfoArr. push (meetInfoObj ['meetingname']);
MeetInfoArr. push (meetInfoObj ['meetingcontent']);
MeetInfoArr. push (meetInfoObj ['meetinghost']);
MeetInfoArr. push (meetInfoObj ['meetingcreatetime']);
MeetInfoArr. push ("");
MeetInfoArr. push ("");
CourseArrayData. push (meetInfoArr );
}
Certificate ('{coursewin'{.html ('

');
OTable = $ ('# example'). dataTable ({
"BJQueryUI": true,
"SScrollY": 200,
"SPaginationType": "full_numbers ",
"OLanguage ":{
"SLengthMenu": "_ MENU _ records displayed on each page ",
"SZeroRecords": "Sorry, no ",
"SInfo": "From _ START _ to _ END _/TOTAL _ data ",
"SInfoEmpty": "No data ",
"SInfoFiltered": "(retrieved from _ MAX _ data entries )",
"OPaginate ":{
"SFirst": "Homepage ",
"SPrevious": "Previous Page ",
"SNext": "Next page ",
"SLast": "last page"
},
"SZeroRecords": "No data retrieved"
},
"AaSorting ":[
[4, "desc"]
],
"AaData": courseArrayData,
"BLengthChange": true,
"AoColumns ":[
{
"STitle": "meetingid ",
"BVisible": false
},
{
"STitle": "Course name ",
"SClass": "center"
},
{
"STitle": "course description"
},
{
"STitle": "course teacher ",
"SClass": "center"
},
{
"STitle": "course creation time ",
"SClass": "center"
},
{
"STitle": "operations ",
"SClass": "wp10 taleft ",
"BSortable": false
},
{
"STitle": "setting course pictures ",
"SClass": "wp10 taleft ",
"BSortable": false
}]
});
$ ('# Example tr'). dblclick (function () {$ (this). toggleClass ('row _ selected ');});
}

 

[Javascript]
/* Obtain the HTML Object of the selected row, including hidden columns */
Function fnGetSelected (oTableLocal ){
Var aReturn = new Array ();
Var aTrs = oTableLocal. fnGetNodes ();
For (var I = 0; I <aTrs. length; I ++ ){
If ($ (aTrs [I]). hasClass ('row _ selected ')){
AReturn. push (oTableLocal. fnGetData (aTrs [I]);
}
}
Return aReturn;
} Www.2cto.com

[Javascript]
// Obtain all Ables data
Funciton getAllDatatableData (oTableLocal ){
Var aReturn = new Array ();
Var aTrs = oTableLocal. fnGetNodes ();
For (var I = 0; I aReturn. push (oTableLocal. fnGetData (aTrs [I]);
}
Return aReturn;
}