DataTables

Version3.1.1 (latest)

Released 1 week ago · Installed 3 days ago

jQuery-optional table plugin with sorting, searching, pagination, and a large extension ecosystem. This build is styled for Bootstrap 5.

Included in this bundle: DataTables 3.1.1, AutoFill, Buttons, ColReorder, ColumnControl, DateTime, FixedColumns, FixedHeader, KeyTable, Responsive, RowGroup, RowReorder, Scroller, SearchBuilder, Select

Load Bootstrap 5 CSS first, then DataTables CSS. Scripts: Bootstrap (for Buttons dropdowns) → DataTables. jQuery is optional in DataTables 3; use the vanilla new DataTable() API below.

<!-- CSS in <head>: Bootstrap + DataTables -->
<link rel="stylesheet" href="https://cdn.roste.org/bootstrap/latest/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.roste.org/datatables/latest/bs5/datatables.min.css" />

<!-- JS before </body>: Bootstrap → DataTables -->
<script src="https://cdn.roste.org/bootstrap/latest/bootstrap.bundle.min.js"></script>
<script src="https://cdn.roste.org/datatables/latest/bs5/datatables.min.js"></script>

<script>
  new DataTable('#myTable');
</script>

Download zip

<script src="https://cdn.roste.org/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.roste.org/bootstrap/latest/bootstrap.bundle.min.js"></script>
<script src="https://cdn.roste.org/datatables/latest/bs5/datatables.min.js"></script>
<script>$('#myTable').DataTable();</script>

Documentation & resources

Basic table

Default sorting, search, and pagination from a plain HTML <table>.

View HTML

<table id="dt-basic" class="table table-striped" style="width:100%">
  <thead>
    <tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td></tr>
    <!-- more rows... -->
  </tbody>
</table>
<script>
  new DataTable('#dt-basic');
</script>

JavaScript data source

Initialize from an array of objects with columns.data.

View HTML

<table id="dt-js" class="table table-striped" style="width:100%"></table>
<script>
new DataTable('#dt-js', {
  data: [
    { name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', salary: '$320,800' },
    { name: 'Garrett Winters', position: 'Accountant', office: 'Tokyo', salary: '$170,750' }
  ],
  columns: [
    { data: 'name', title: 'Name' },
    { data: 'position', title: 'Position' },
    { data: 'office', title: 'Office' },
    { data: 'salary', title: 'Salary' }
  ]
});
</script>

Responsive

Shrink the viewport (or widen columns) — child rows appear for hidden data. Resize the window to try it.

View HTML

<table id="dt-responsive" class="table table-striped nowrap" style="width:100%">...</table>
<script>
  new DataTable('#dt-responsive', { responsive: true });
</script>

Buttons (copy / CSV / print)

Export and print via the Buttons extension. Layout places controls with the layout option (DataTables 2+).

View HTML

<table id="dt-buttons" class="table table-striped" style="width:100%">...</table>
<script>
new DataTable('#dt-buttons', {
  layout: {
    topStart: {
      buttons: ['copy', 'csv', 'print']
    }
  }
});
</script>

Row selection

Click rows to select (multi). Uses the Select extension.

View HTML

<table id="dt-select" class="table table-striped" style="width:100%">...</table>
<script>
  new DataTable('#dt-select', { select: true });
</script>

Row grouping

Group rows by a column with the RowGroup extension.

View HTML

<table id="dt-rowgroup" class="table table-striped" style="width:100%">...</table>
<script>
new DataTable('#dt-rowgroup', {
  order: [[2, 'asc']],
  rowGroup: { dataSrc: 2 }
});
</script>