jquery form Plugin DataTables usage _jquery

Introduction of DataTables
DataTables is a jquery form plugin. This is a highly flexible tool, based on a step-by-step enhancement, which will add advanced interactive controls that support any HTML table. Main Features:

• Automatic page-handling
• Instant Tabular Data filtering
• Data sorting and automatic data type detection
• Automatically process column widths
• Custom styles can be customized through CSS
• Support for hidden columns
• Use
• Scalability and flexibility
• Internationalization
• Create a table dynamically
• Free of charge.

Second, how to use
in the background when there is no art and front-end engineers to cooperate with you to do the page, in order to show the data and have a certain sense of beauty, we can use jquery DataTables plug-ins to help us complete the task
1, the default configuration of DataTables

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

2, DataTables Some of the basic properties of the configuration

 "Bpaginate": true,//Paging function 
"Blengthchange": true,//change the number of display data per page 
"Bfilter": true,//Filter function 
"Bsort": false,// Sort function 
"binfo": true,//footer Information 
"bautowidth": true//automatic width 

3, Data sorting

$ (document). Ready (function () { 
$ (' #example '). DataTable ({ 
"aasorting": [ 
[4, "desc"] 
] 
}) ; 

Start with column No. 0, in reverse order in column 4th
4. Hide some 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": "Display _menu_ record per page") ", 
" szerorecords ":" Sorry, not Found ", 
" Sinfo ":" From _start_ to _end_/total _total_ data ", 
" Sinfoempty ":" No Data ", 
" Sinfofiltered ":" (retrieved from _max_ data) ", 
" Opaginate ": {" 
Sfirst ":" Home ", 
" sprevious ":" Previous page ", 
" Snext ":" Next page ", 
" Slast ":" Last " 
}, 
" Szerorecords ":" No Data Retrieved ", 
" sprocessing ":"  " 
} 
}); 
); 

6, sorting function:

$ (document). Ready (function () { 
$ (' #example '). DataTable ({ 
"aocolumns": [ 
null, 
{"assorting": [ "ASC"]}, 
{"assorting": ["desc", "ASC", "ASC"]}, 
{"assorting": []}, 
{"assorting": []} 
]
   } ); 

7, data acquisition support 4 kinds: The following

• DOM document data
  
• JavaScript Array js arrays
  
• Ajax source Ajax request data
  
• Server side processing server-side data

Third, the example explanation

1, requirements: as shown in the following figure, the content of the DataTables to add, edit, delete the operation.

2, Analysis: Add features---Click the Add button, pop-up dialog box, add new content.
Edit---Click DataTables to select a row to change the color, which is already selected, click the Edit button, and Eject dialog, which is the content of our selected row in this dialog. If no row is selected, clicking the Edit button does not eject the dialog. When you double-click a row in DataTables, the dialog is also popped, and the row that you double-click changes the color, and the contents of the dialog are the contents of our double click.
Delete feature---Click DataTables to select a row, click the Delete button, and eject the warning box to indicate that you want to delete the selection. When no content is selected, clicking the Delete button does not eject the warning box or delete the content.
3. Code:
attributes//Name

 <table id= "gridtable" class= "gridtable" >//statement jquery DataTables <thead> <tr> <th&gt ; 
    Name </th> <th>value </th> <th>displayorder </th> </tr> </thead> <tbody> ...//datatables content, omitted </tbody> </table> <inpu T type= "button" id= "Add" value= "Add"/>//Add button <input type= "button" id= "edit" value= "edit"/>//Edit button <input ty Pe= "button" id= "delete" value= "delete"/>//Delete button <div id= "e_attributes" >//declare dialog, asynchronous update @using (ajax.begin Form ("Update", "Product", new ajaxoptions {Updatetargetid = "d_attributes", onsuccess = "Dialogclose", Httpmeth OD = "Post",}) {<table> <tbody> <tr> <td>name& lt;/td> <td> <input id= "name" name= "name" type= "text" style= "width:250px" class= "Requir 
 Ed "/>*</td>       </tr> <tr> <td>Value</td> <td> <input Id= "Value" name= "value" type= "text" style= "width:250px" class= "required"/>*</td> </tr> &L t;tr> <td>DisplayOrder</td> <td> <input id= "Displayorder" name  
          = "Displayorder" type= "text" style= "width:128px" class= "required"/>*</td> </tr> <tr> <td> <input id= "Submit" type= "submit" name= "submit" value= "Submit"/> &L T;input id= "Hiddenvalue" type= "hidden" name= "Hiddenvalue"/> </td> </tr> &LT;/TB 
 Ody> </table>} </div>

The code above explains: This code is divided into two parts, the first part is the jquery DataTables statement, <table id= "gridtable" class= "gridtable" >; the second part is the declaration of dialog, And the action required by the operation, this part of the operation to choose Ajax No Refresh page technology. Required 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 () {//Declaration dataTable $ ("#gridtable"). DataTable (). Fndestroy ();           Editor = $ (' #gridtable '). DataTable ({"Binfo": false, "bserverside": false, ' bpaginate ': false, 
       is paging. 
       "Bprocessing": false,//whether the message is being processed when the DataTable gets the data. 
       ' Bfilter ': false,//whether the built-in filtering function is used. 
       ' Blengthchange ': false,//whether the user is allowed to customize the number of display bars per page. 
    ' Spaginationtype ': ' full_numbers ',//Pagination style}); Click, assign value, change style $ ("#gridtable tbody tr"). Click (function (e) {if ($ (this). Hasclass (' row_selected ')) {$ (t His). 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},//parameter name to be the same as the parameter name in action dataType: "htm 
              L ", Cache:false, success:function (Result) {$ (' #d_Attributes '). HTML (result); 
  $ ("#productAttributeID"). val (null);          } 
          }); 
 
    } 
      } 
    }); Null and remove the Input-validation-error style (this style can be removed regardless of whether there is any, so don't judge it) function Putnullvalue () {... Here omitted}//Assignment function Putvalue (adata) {... 
 
  omitted}}); 
$.ajaxsetup ({cache:false}); </script>

The code above states: This Code is dialog declaration, DataTables declaration to add,edit,delete operation.
Add a functional Effect chart

Edit Functional Effects Chart:

To delete an effect chart:

In this, the functionality has been fully implemented, and the required code has been posted.
4, paging implementation

Introducing CSS files 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>---------------------------------------------------------------------- 
---------------Easiest way: $ (document). Ready (function () {$ (#example). dataTable (); 
  
}); 
      ----------can also define individual properties: <script type= "Text/javascript" language= "JavaScript" > $ (document). Ready (function () {        $ ("#example"). DataTable ({//"bpaginate": true,//switch, whether to show the pager//"Binfo": true,//switch, show some information about the table//    ' Bfilter ': true,//switch, whether to enable the client filter//"Sdom": "<>lfrtip<>",//    "Bautowith": false,//"Bdeferrender": false,//"Bjqueryui": false,//switch, enable jQueryUI style//"B" Lengthchange ": true,//switch, display dropdown box per page size//" bprocessing ": true,//" Bscrollinfinite ": false,//" SS        Crolly ": 800px",//whether to turn on vertical scrolling, and specify the size of the scrolling area, can be set value: ' Disabled ', ' 2000px '//' Bsort ': true,//switch, enable columns to have the ability to sort by column// ' Bsortclasses ': true,//' Bstatesave ': false,//switch, whether to turn on the client state logging feature. This data is recorded in cookies, after opening this record, even if the page is refreshed once, or reopen the browser, before the state is saved-------when the value is true aocolumndefs cannot hide columns//"SSCROLLX": "50%",/ /whether to turn on horizontal scrolling, and specify the size of the scrolling area, to set the value: ' Disabled ', ' 2000% '//' aasorting ': [[0, ASC ']],//"aocolumndefs": [{"Bvisible" 
        : false, "atargets": [0]}]//Hidden column//"Sdom": ' < "H" if>t< "F" if> ', "bautowidth": false,//adaptive width "Aasorting": [[1, ASC]], "Spaginationtype": "Full_numbers", "Olanguage": {"sprocess 
      ing ":" "in Loading ...", "Slengthmenu": "Show _menu_ per page",    "Szerorecords": "Sorry, the query does not have the relevant data!" "," semptytable ":" There is no data in the table! 
          "," Sinfo ":" The current display _start_ to the _end_ bar, a total of _total_ records "," sinfofiltered ":" The data table for the _max_ record ", "Ssearch": "Search", "opaginate": {"Sfirst": "Home", "sprevious": "Prev", "sNe 
    XT ": Next Page", "Slast": "Last"}}//Multi-Language configuration}); 
  }); 
 </script>

For DataTables, the table must be described by 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 will be the error.

• Bpaginate: Pagination, default to True, paging
• Idisplaylength: Number of lines per page, default number per page: 10
• Spaginationtype: Pagination style, supports two built-in ways, Two_button and full_numbers, using Two_button by default.
• Blengthchange: Allows the user to select the number of rows per page after paging through a drop-down list. The number of rows is 10,25,50,100. This setting requires Bpaginate support. The default is true.
• Bfilter: Enables or disables data filtering, which defaults to true. Note that if you use filtering, but you want to turn off the default filter input box, you should use the Sdom
• Binfo: Allow or disable display of table information, default to True, display information.

The easiest way to use it is the 0 configuration.

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

The above is about the jquery form plug-in DataTables usage detailed introduction, hope for everybody's study to be helpful.