Questions tagged [datatables]

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

Do not confuse this tag with datatable which is for table constructs in other languages like .NET's DataTable type! Using both tags together should only be done when displaying .NET DataTable content as jQuery DataTables in a web page.

##Key features:##

• Variable length pagination
• On-the-fly filtering
• Multi-column sorting with data type detection
• Smart handling of formatted data for display, filtering and sorting
• 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
• Supports internationalization
• 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:##

• Getting Started
• Examples
• Styling
• API
• FAQs
• Extensions
• Plug-ins
• Blog
• FAQ's
• Forums
• Server-side examples

##Coding:##

Add recent version of all libraries

<link  href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

###Default HTML table###

For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a body (tbody). An optional footer (tfoot) can also be used.

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

###Initializing the plugins:###

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();
});

###Fiddle:###

• When asking questions it is a good idea to provide a Fiddle or JS Bin which reproduces your problem. This greatly increases the possibility for others to debug your problems.