Si test of Datatables

DataTables is a plug-in for the jQuery JavaScript library that allows you to add advanced interaction controls to any HTML table, including adding search and paging features.

The DataTables documentation has lots of useful information. Please check there; it's highly likely that your question has already been answered. For example, want to control the number of rows returned per page?

Search for Superfund Sites Where You Live is a great example of this functionality.

Step 1. Add an HTML table with data

Add the following example HTML to the source code of your page to build a simple table with three rows:
<table id="datatable">
<thead>
  <tr>
   <th>Sites</th>
  </tr>
</thead>
<tbody>
  <tr>
   <td>Demo 1</td>
  </tr>
  <tr>
   <td>Demo 2</td>
  </tr>
  <tr>
   <td>Demo 3</td>
  </tr>
</tbody>
</table>

Step 2: Add the JavaScript

In Drupal WebCMS, you will see a "Page JavaScript" tab on the left side of the editing page, near the bottom. Click on the tab and add the code below.

<link rel="stylesheet" href="/sites/all/libraries/js/datatables-1.10.16/datatables.min.css">
<script src="/sites/all/libraries/js/datatables-1.10.16/datatables.min.js"></script>
<script>
  jQuery(function() {
    jQuery("#datatable").dataTable();
  })
</script>

Remove Sorting for a Specific Column

Give the datatable a unique ID name,  and follow Steps 1 and 2 to add the html and javascript.

​<link rel="stylesheet" href="/sites/all/libraries/js/datatables-1.10.16/datatables.min.css">
<script src="/sites/all/libraries/js/datatables-1.10.16/datatables.min.js"></script>

Linking to Datatables Files

Here is a list of all of the available files you can link to. Don't just willy-nilly link to all of them; select the files (both CSS and JS) for the feature(s) you need to enable in your datatables.

<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/DataTables-1.10.23/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/AutoFill-2.3.5/css/autoFill.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/Buttons-1.6.5/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/ColReorder-1.5.3/css/colReorder.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/FixedColumns-3.3.2/css/fixedColumns.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/FixedHeader-3.1.7/css/fixedHeader.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/KeyTable-2.5.3/css/keyTable.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/Responsive-2.2.7/css/responsive.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/RowGroup-1.1.2/css/rowGroup.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/RowReorder-1.2.7/css/rowReorder.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/Scroller-2.0.3/css/scroller.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/SearchBuilder-1.0.1/css/searchBuilder.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/SearchPanes-1.2.2/css/searchPanes.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/all/libraries/js/datatables-1.10.23/Select-1.3.1/css/select.dataTables.min.css"/>
 
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/DataTables-1.10.23/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/AutoFill-2.3.5/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/Buttons-1.6.5/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/ColReorder-1.5.3/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/FixedColumns-3.3.2/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/FixedHeader-3.1.7/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/KeyTable-2.5.3/js/dataTables.keyTable.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/Responsive-2.2.7/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/RowGroup-1.1.2/js/dataTables.rowGroup.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/RowReorder-1.2.7/js/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/Scroller-2.0.3/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/SearchBuilder-1.0.1/js/dataTables.searchBuilder.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/SearchPanes-1.2.2/js/dataTables.searchPanes.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/js/datatables-1.10.23/Select-1.3.1/js/dataTables.select.min.js"></script>