Описание тега jquery-datatables

Data-tables is a plug-in for the jquery javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any html-table.

Key features:

• Variable length pagination
• On-the-fly filtering
• Multi-column sorting with data type detection
• Smart handling of column widths
• Display data from almost any data source
• DOM, JavaScript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears, Python, etc.)
• Scrolling options for table viewport
• Fully internationalisable
• jQuery UI ThemeRoller support
• Rock solid - backed by a suite of 2600+ unit tests
• Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and more
• It's free!

Resources:

• Basic Initialisation
• Examples
• Styling
• API
• Development Roadmap
• Extras
• Plug-ins
• Blog
• FAQ's
• Forums
• Server-side examples
• Live Code Testing Sandbox

Coding:

Default HTML table:

The table (and also each row of it) should have and id attribute, a header surrounded with<thead></thead> and also the body surrounded with <tbody></tbody>.

<table id="example">
   <thead>
      <tr>
         <th>Company name</th>
         <th>Address</th>
         <th>Town</th>
      </tr>
    </thead>
    <tbody>
       <tr id="1">
          <td>Emkay Entertainments</td>
          <td>Nobel House, Regent Centre</td>
          <td>Lothian</td>
       </tr>
       <tr id="2">
          <td>The Empire</td>
          <td>Milton Keynes Leisure Plaza</td>
          <td>Buckinghamshire</td>
       </tr>
    </tbody>
</table>

Initializing the plugin

After the proper include of the required JavaScript/JQuery libraries the plug-in can be initialized with a few line of code. The text following the # character and the id attribute of the table must be identical.

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