Usage of datatables in jQuery table plug-in: jquerydatatables

Usage of datatables in jQuery table plug-in: jquerydatatables

1. Datatables Introduction
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

Ii. 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

 $(document).ready(function() { $('#example').dataTable(); } ); 

2. Some basic attributes of DataTables

"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

$(document).ready(function() { $('#example').dataTable( { "aaSorting": [ [ 4, "desc" ] ] } ); } ); 

Starting from 0th columns, arranged in descending order of 4th columns
4. Hide certain Columns

$(document).ready(function() { $('#example').dataTable( { "aoColumnDefs": [ { "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, { "bVisible": false, "aTargets": [ 3 ] } ] } ); } ); 

5. Internationalization

$ (Document ). ready (function () {$ ('# example '). dataTable ({"oLanguage": {"sLengthMenu": "_ MENU _ records displayed on each page", "sZeroRecords": "Sorry, no records found", "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:

$(document).ready(function() { $('#example').dataTable( { "aoColumns": [ null, { "asSorting": [ "asc" ] }, { "asSorting": [ "desc", "asc", "asc" ] }, { "asSorting": [ ] }, { "asSorting": [ ] } ] } ); } ); 

7. Four data types are supported:

• • DOM document data
  
• • Javascript array js array
  
• • Ajax source Ajax request data
  
• • Server side processing Server-side data

Iii. instance description

1. Requirement: As shown in, add, edit, and delete the datatables content.

2. Analysis: add function --- click the add button. In the displayed dialog box, add new content.
Edit function-click datatables to select a row. This row changes color, that is, it has been selected. Click the edit button to bring up the dialog. The content of this dialog alog is the content of the selected row. If no row is selected, click the edit button. When you double-click a row in datatables, the dialog box is displayed, and the double-click row color is changed. The content in dialog is the content of the row we double-click.
Delete function-click datatables to select a row and click delete. A warning box is displayed, prompting you to delete the selected content. If no content is selected, click the delete button. A warning box is displayed and the content is not deleted.
3. encoding:
Attributes // name

<Table id = "gridtable" class = "gridtable"> // declare jquery datatables <thead> <tr> <th> Name </th> <th> Value </th> <th> DisplayOrder </th> </tr> </thead> <tbody> ..... // datatables content, </tbody> </table> <input type = "button" id = "add" value = "Add"/> // add button <input type = "button" id = "edit" value = "Edit"/> // edit button <input type = "button" id = "delete" value = "Delete"/> // delete button <div id = "e_Attributes"> // declare dialog, asynchronous update @ using (Ajax. beginForm ("Update", "Product", new AjaxOptions {UpdateTargetId = "d_Attributes", OnSuccess = "dialogClose", HttpMethod = "Post ",})) {<table> <tbody> <tr> <td> Name </td> <input id = "name" name = "Name" type = "text" style = "width: 250px "class =" required "/> * </td> </tr> <td> Value </td> <input id =" value "name = "Value" type = "text" style = "width: 250px "class =" required "/> * </td> </tr> <td> DisplayOrder </td> <input id =" displayOrder "name = "DisplayOrder" type = "text" style = "width: 128px "class =" required "/> * </td> </tr> <td> <input id =" submit "type =" submit "name =" submit "value =" Submit "/> <input id =" hiddenValue "type =" hidden "name =" hiddenValue "/> </td> </tr> </tbody> </table >}</div>

The above Code Description: This code mainly consists of two parts: the first part is the declaration of jquery datatables, <table id = "gridtable" class = "gridtable">; the second part is the dialog Declaration and the action required for the operation. The operation in this part is based on ajax without refreshing the page technology. Js Code:

<Script type = "text/javascript"> function dialogClose () {$ ("# e_Attributes "). dialog ("close") ;}$ ("# e_Attributes "). dialog ({modal: true, autoOpen: false, show: {effect: "blind", duration: 1000}, hide: {effect: "explode", duration: 1000 }, width: 400}); var editor; $ (function () {// declare datatable $ ("# gridtable "). dataTable (). fnDestroy (); editor =$ ('# gridtable '). dataTable ({"bInfo": false, "bServerSi De ": false, 'bpaginate': false, // whether the page is displayed. "BProcessing": false, // whether the processing prompt is displayed when the datatable obtains data. 'Bfilter': false, // whether to use the built-in filter function. 'Blengthchang': false, // whether to allow users to customize the number of entries displayed per page. 'Spaginationtype': 'full _ numbers ', // paging style}); // click, assign a value, and change the style $ ("# gridtable tbody tr "). click (function (e) {if ($ (this ). hasClass ('row _ selected') {$ (this ). removeClass ('row _ selected'); putNullValue ()} else {editor. $ ('tr. row_selected '). removeClass ('row _ selected'); $ (this ). addClass ('row _ selected'); var aData = editor. fnGetData (this); if (null! = AData) {putValue (aData) ;}}); // double-click $ ("# gridtable tbody tr "). dblclick (function () {if ($ (this ). hasClass ('row _ selected') {// $ (this ). removeClass ('row _ selected');} else {editor. $ ('tr. row_selected '). removeClass ('row _ selected'); $ (this ). addClass ('row _ selected');} var aData = editor. fnGetData (this); if (null! = AData) {putValue (aData) ;}$ ("# hiddenValue "). val ("edit"); $ ("# e_Attributes "). dialog ("open") ;}); // add $ ("# add "). click (function () {editor. $ ('tr. row_selected '). removeClass ('row _ selected'); putNullValue (); $ ("# hiddenValue "). val ("add"); $ ("# e_Attributes "). dialog ("open") ;}); // edit $ ("# edit "). click (function () {var productAttributeID = $ ("# productAttributeID "). val (); if (productAttributeID! = "" & ProductAttributeID! = Null) {$ ("# hiddenValue "). val ("edit"); $ ("# e_Attributes "). dialog ("open") ;}}); // delete $ ("# delete "). click (function () {var productAttributeID = $ ("# productAttributeID "). val (); var productID = $ ("# productID "). val (); if (productAttributeID! = Null & productAttributeID! = "") {If (confirm ("Delete? ") {$. Ajax ({type: "GET", url: "@ Url. action ("DeleteAttribute", "Product") ", data: {ProductID: productID, ProductAttributeID: productAttributeID}, // The parameter name must be the same as the parameter name in the Action dataType: "html", cache: false, success: function (result) {$ ("# d_Attributes" ).html (result); $ ("# productAttributeID "). val (null) ;}};}}); // assign a null value and remove the input-validation-error style (this style can be removed regardless of whether it is available or not, so you don't need to judge) function putNullValue (){.... .. // Omitted here} // value assignment function putValue (aData ){...... // Omitted here }}); $. ajaxSetup ({cache: false}); </script>

The above Code Description: This code is the dialog declaration, and the datatables Declaration uses the add, edit, and delete operations.
Add feature

 

Edit:

Delete:

 

By now, all functions have been implemented and the required code has been posted.
4. Paging implementation

Introduce CSS and JS files

<Style type = "text/css" title = "currentStyle"> @ import "DataTables-1.8.1/media/css/demo_page.css"; @ import "DataTables-1.8.1/media/css/demo_table.css "; @ import "DataTables-1.8.1/media/css/demo_table_jui.css "; </style> <script type = "text/javascript" language = "javascript" src = "DataTables-1.8.1/media/js/jquery. js "> </script> <script type =" text/javascript "language =" javascript "src =" DataTables-1.8.1/media /Js/jquery. dataTables. js "> </script> -------------------------------------------------------------------------- ----------- the simplest method: $ (document ). ready (function () {$ ("# example "). dataTable () ;}); ---------- you can also define attributes by yourself: <script type = "text/javascript" language = "javascript" >$ (document ). ready (function () {$ ("# example "). dataTable ({// "bPaginate": true, // switch, whether to display the page splitter // "bInfo": true, // switch, whether to display some table information // "B Filter ": true, // switch, whether to enable the client Filter //" sDom ":" <> lfrtip <> ", //" bAutoWith ": false, // "bDeferRender": false, // "bJQueryUI": false, // switch, whether to enable the JQueryUI style // "bLengthChange": true, // switch, whether to display the drop-down box/"bProcessing": true, // "bScrollInfinite": false, // "sScrollY": "800px", // whether to enable vertical scrolling, and specify the size of the scroll area. The value can be 'Disabled ', '2000px' // "bSort": true, // switch, whether to enable the column sorting function // "bSortClasses": true, // "bStateSave": fals E, // switch, whether to enable the client status record function. This data is recorded in cookies. After opening this record, even if you refresh the page or re-open the browser, the previous status is saved------- When the value is true, aoColumnDefs cannot hide the column // "sScrollX": "50%", // whether to enable horizontal scrolling and specify the size of the scroll area, configurable value: 'Disabled ', '200' // "aaSorting": [[0, "asc"], // "aoColumnDefs": [{"bVisible": false, "aTargets": [0]}] // hide a column // "sDom": '<"H" if> t <"F" if>', "bAutoWidth ": false, // adaptive width "aaSorting": [[1, "asc"], "sPaginationType": "full_numbers", "oLanguage": {"sProcessing": "Loading...", "sLengthMenu": "_ MENU _ records displayed on each page", "sZeroRecords": "Sorry, no relevant data is found! "," SEmptyTable ":" No data exists in the table! "," SInfo ":" currently displayed _ START _ to _ END _ records, TOTAL _ records "," sInfoFiltered ": "Total _ MAX _ records in a data table", "sSearch": "Search", "oPaginate": {"sFirst": "Homepage", "sPrevious": "Previous Page ", "sNext": "Next page", "sLast": "last page" }}// multilingual configuration}) ;}</script>

For dataTables, the table must be described using thead and tbody, as shown below,

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">     <thead>       <tr>         <th>           Rendering engine         </th>         <th>           Browser         </th>         <th>           Platform(s)         </th>         <th>           Engine version         </th>         <th>           CSS grade         </th>       </tr>     </thead>     <tbody>       <tr class="odd gradeX">         <td>           Trident         </td>         <td>           Internet Explorer 4.0         </td>         <td>           Win 95+         </td>         <td class="center">           4         </td>         <td class="center">           X         </td>       </tr>

If there is no thead, an error will be reported.

• BPaginate: whether to pagination. The default value is true.
• IDisplayLength: the number of lines per page. default number per page: 10
• SPaginationType: Paging style. Two built-in methods are supported: two_button and full_numbers. two_button is used by default.
• BLengthChange: whether to allow users to select the number of lines per page after the page is displayed in a drop-down list. The number of rows is 10, 25, 50,100. This setting must be supported by bPaginate. The default value is true.
• BFilter: Enables or disables data filtering. The default value is true. Note: If you use the filter function but want to disable the default filter input box, use sDom.
• BInfo: Allows or disables the display of table information. The default value is true.

The simplest way to use is the zero-configuration method.

/* * Example init */$(document).ready(function(){  $('#example').dataTable();});

The above is a detailed introduction to the usage of the jQuery table plug-in datatables. I hope it will be helpful for your learning.

Articles you may be interested in:

• JQuery plug-in iScroll implements drop-down refresh and scrolling pages.
• An example of a simple jQuery plug-in ajaxfileupload. js to implement ajax File Upload
• We recommend 10 best jQuery video plug-ins in 2014
• 8 jQuery lightweight Tree plug-ins are recommended
• Summary of jQuery special effect plug-ins commonly used by web Front-end designers
• JQuery right-click menu plug-in ContextMenu User Guide
• Jquery image playback browser plug-in prettyPhoto Usage Details
• Two jQuery plug-ins -- jquery. fileupload and artdialog
• JQuery plug-in instances that restrict the size and format of uploaded files
• JQuery plug-in slick implements responsive mobile client slide picture switching Effects