Skip to main content
U.S. flag

An official website of the United States government

Here’s how you know

Dot gov

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

HTTPS

Secure .gov websites use HTTPS
A lock (LockA locked padlock) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

    • Environmental Topics
    • Air
    • Bed Bugs
    • Cancer
    • Chemicals, Toxics, and Pesticide
    • Emergency Response
    • Environmental Information by Location
    • Health
    • Land, Waste, and Cleanup
    • Lead
    • Mold
    • Radon
    • Research
    • Science Topics
    • Water Topics
    • A-Z Topic Index
    • Laws & Regulations
    • By Business Sector
    • By Topic
    • Compliance
    • Enforcement
    • Laws and Executive Orders
    • Regulations
    • Report a Violation
    • Environmental Violations
    • Fraud, Waste or Abuse
    • About EPA
    • Our Mission and What We Do
    • Headquarters Offices
    • Regional Offices
    • Labs and Research Centers
    • Planning, Budget, and Results
    • Organization Chart
    • EPA History

Breadcrumb

  1. Home
  2. Template

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>
Sites Locations
Demo 1 Demo 7
Demo 2 Demo 8
Demo 3 Demo 9
Demo 4 Demo 10
Demo 5 Demo 11
Demo 6 Demo 12

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>

<script>
  jQuery(function() {
    jQuery("#datatable_sort").dataTable({
     "columnDefs": [
            { "orderable": true, "targets": 0 },
            { "orderable": false, "targets":1},
            { "orderable": false, "targets":2}
      ],
      "lengthMenu": [[-1, 10, 25, 100], ["ALL", 10, 25, 100]], "order": [[ 0, "desc" ]], stateSave: true
     });
  })
</script>​
 
 
Year Date News Headline
2018 July 23 News Headline 2
2017 July 18 News Headline 3
2016 July 5 News Headline 4
2015 June 20 News Headline 5

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>

Template

  • Basic Page 1
  • Basic Page 2
  • Publication Page for Template Compliancy
  • SI test of datatables
  • Slideshows example for template
  • Style Guide Test Page
  • Template Home
  • Template Test Page 2 for Events
  • Web Form Template
  • test of Boxes
Contact Us About Template Compliancy
Contact Us to ask a question, provide feedback, or report a problem.
Last updated on July 31, 2024
  • Assistance
  • Spanish
  • Arabic
  • Chinese (simplified)
  • Chinese (traditional)
  • French
  • Haitian Creole
  • Korean
  • Portuguese
  • Russian
  • Tagalog
  • Vietnamese
United States Environmental Protection Agency

Discover.

  • Accessibility Statement
  • Budget & Performance
  • Contracting
  • EPA www Web Snapshot
  • Grants
  • No FEAR Act Data
  • Plain Writing
  • Privacy
  • Privacy and Security Notice

Connect.

  • Data
  • Inspector General
  • Jobs
  • Newsroom
  • Regulations.gov
  • Subscribe
  • USA.gov
  • White House

Ask.

  • Contact EPA
  • EPA Disclaimers
  • Hotlines
  • FOIA Requests
  • Frequent Questions
  • Site Feedback

Follow.

​