Of Stack

Summary of datatables usage in jQuery tabular plug in

  • 2020-03-30 03:54:17
  • OfStack

Official website and download address: http://www.datatables.net

The latest version for 1.10.2, readers can click here to (link: http://xiazai.jb51.net/201409/yuanma/DataTables-1.10 (jb51.net). Rar).

Its main features are as follows:

Usage:

First look at the following code: 


<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">

Js and CSS files are introduced in the code above. You can copy that in the demo. Note the path address.

Then take a look at the following code: 


<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "/SSS/dataTables/de_DE.txt"
},
"bStateSave": true,
//"bJQueryUI": true,  // use jqueryui  . It doesn't show very well when I use it 
"sPaginationType": "full_numbers"// paging 
} );
} );
</script>

</head>
<body id="dt_example">//Here is the id of the body

<div id="container" align="center">//*div is the table, table including thead, etc., the best format to write *
<h1> Item type management </h1>
<div id="demo">
<table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//Don't forget to id
<thead>
<tr>
<th> Item number </th>
<th> Item name </th>
<th> Items unit </th>
<th> Edit state </th>
<th> casually </th>
</tr>
</thead>

<tr class="gradeX">//Here can be gradeA,gradeX, etc., but gradeB alternate color effect is very good
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
</tfoot>  
</table>
</div>    
</div>

Above you can create the effect shown in the figure, paging. Sorting. And so on.

Finally, the individual attributes (where the main additions are) 


//$(document).ready(function() {
  //$('#example').dataTable( {// loading 
    //"bPaginate": true,// Paging button 
    //"bLengthChange": true,// Displays the number of records per line 
    //"bFilter": true,// Search bar 
    //"bSort": true,// The sorting 
    //"bInfo": true,//Showing 1 to 10 of 23 entries  The total number of records does not show how much information 
    //"bAutoWidth": true } );
//} );

//$(document).ready(function() {
  //$('#example').dataTable( {
    //"aaSorting": [[ 4, "desc" ]]// Sort the list   , the first parameter represents the array   . 4  is css grade The column. The second parameter is  desc or asc
  //} );
//} );

//$(document).ready(function() {
  //$('#example').dataTable( {
    //"aoColumns": [ 
    //    null, // The default 
    //   null,
    //   { "bSearchable": false, // unsearchable 
    //           "bVisible":  false },// invisible 
    //   { "bVisible":  false },// invisible 
    //    null
    //] } );
//} );

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

//$(document).ready(function() {
  //$('#example').dataTable( {
    //"sDom": '<"top"i>rt<"bottom"flp<"clear">'// This is a custom layout. It's complicated.   * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class  * Examples: <"wrapper"flipt>, <lf<t>ip>

  //} );
//} );

//$(document).ready(function() {
//  $('#example').dataTable( {
  //  "bStateSave": true // Save state to cookie ***************  It is very important   .   When the page is refreshed, the search will disappear. Using this property can be avoided 
  //} );
//} );

//$(document).ready(function() {
  //$('#example').dataTable( {
    //"sPaginationType": "full_numbers" // Paging, two styles   Another for two_button  is datatables The default 
  //} );
//} );

//$(document).ready(function() {
  //$('#example').dataTable( { // The paging information   It's not hard to understand. 
    //"oLanguage": {
      //"sLengthMenu": "Display _MENU_ records per page",
      //"sZeroRecords": "Nothing found - sorry",
      //"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
      //"sInfoEmtpy": "Showing 0 to 0 of 0 records",
      //"sInfoFiltered": "(filtered from _MAX_ total records)"
    //}
  //} );
//} )

$(document).ready(function() {
  oTable = $('#example').dataTable({
    "bJQueryUI": true, //The UI theme that can add jqury requires adding CSS
    "sPaginationType": "full_numbers"
  });
} );

The default language is English and of course it can be internationalized:
"SUrl ": "/SSS/dataTables/ de_de.txt" just add an internationalized file. Whatever the name is, whatever the path is. The content of the internationalization file I wrote is as follows, which can be directly copied to TXT for use. 


{
"sProcessing": "Bitte warten...",
"sLengthMenu": " According to _MENU_ article  ",
"sZeroRecords": " There is nothing for you to search for ",
"sInfo": " from _START_  to  _END_  Bar records -- the total number of records is  _TOTAL_  article ",
"sInfoEmpty": " Record number as 0",
"sInfoFiltered": "( Total number of records  _MAX_  article )",
"sInfoPostFix": "",
"sSearch": " search ",
"sUrl": "",
"oPaginate": {
"sFirst":  " The first page ",
"sPrevious": "  The previous page  ",
"sNext":   "  The next page  ",
"sLast":   "  The last page  "
}
}

These are the basics of datatables. Easier to grasp.

Related articles: