Usage of datatables in jQuery table plug-in _ jquery

This article mainly introduces the usage of the jQuery table plug-in datatables, including paging and sorting functions. it is a basic part of the jQuery table plug-in datatables. For more information, see 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

 
 
 
  
  
// Declare jquery datatables
  
  
    ... // Datatables content, which is omitted here 
  
 
   
 
    
Name
 
    
Value
 
    
DisplayOrder
 
   
 
  
   
  
  
 
 
 
 // Add button// Edit button// Delete button
// Declare dialog and asynchronously update @ using (Ajax. beginForm ("Update", "Product", new AjaxOptions {UpdateTargetId = "d_Attributes", OnSuccess = "dialogClose", HttpMethod = "Post ",})){
 
 
       
  
  
 
   
 
    
Name
 
    
 *
 
   
 
   
 
    
Value
 
    
 *
 
   
 
   
 
    
DisplayOrder
 
    
 *
 
   
 
   
 
    
   
 
   
 
  
     
 
 
}
 

The above code description: This code mainly consists of two parts: the first part is the declaration of jquery datatables,

The second part is the dialog declaration and the action required for the operation. The operation in this part is based on the ajax No-refreshing page technology. Js code: