Enhance HTML Table With Pagination Sorting Filtering - tableManager

A simple yet powerful jQuery table management plugin that provides an easy way to sort/filter/paginate tabular data in an HTML table.

Key Features:

• Split table rows into multiple pages with pagination controls.
• Filter tabular data by columns & keywords.
• Sort table rows alphabetically or numerically.

How to use it:

1. Load the tableManager plugin after jQuery library and then call the function on the exisiting HTML table. That's it.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/tableManager.js"></script>

<table class="tablemanager">
  <thead>
    ...
  </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

$('.tablemanager').tablemanager();

2. Disable the sorting functionality on specific columns.

<thead>
  <tr>
    <th class="disableSort">Number</th>
    ...
  </tr>
</thead>

// or via JavaScript

$('.tablemanager').tablemanager({
  disable: ["last"] // last column
});

$('.tablemanager').tablemanager({
  disable: [3] // column 3
});

3. Determine how to sort the table columns on page load. The first parameter determines which column(s) should be sorted on init, and the second parameter allows you to determine the order (asc or 0 = ascending, desc or 1 = descending).

$('.tablemanager').tablemanager({
  firstSort: [[3,0],[2,0],[1,'asc']]
});

4. Disable the filtering functionality on specific columns.

<thead>
  <tr>
    <th class="disableSort">Number</th>
    ...
    <th class="disableFilterBy">Actions</th>
  </tr>
</thead>

// or via JavaScript

$('.tablemanager').tablemanager({
  disableFilterBy: ["last"] // last column
});

$('.tablemanager').tablemanager({
  disableFilterBy: [3] // column 3
});

5. Determine whether to create a 'Filter By Column' select on the top of the table. Default: true.

$('.tablemanager').tablemanager({
  appendFilterby: false
});

6. Enable/disable pagination controls. Default: true.

$('.tablemanager').tablemanager({
  pagination: true,
  showrows: [5,10,20,50,100]
});

7. Customize the date format used to sort your tabular data by date.

$('.tablemanager').tablemanager({
  dateFormat: [[4,"mm-dd-yyyy"]]
});

8. Customize the label text.

$('.tablemanager').tablemanager({
  vocabulary: {
    voc_filter_by: 'Filter By',
    voc_type_here_filter: 'Filter...',
    voc_show_rows: 'Rows Per Page'
  }
});

9. Determine the number of rows to show

$('.tablemanager').tablemanager({
  showrows: false
});

Changelog:

2020-06-23

• Bugfixes
• Add option to set the number of pages to show

---

This awesome jQuery plugin is developed by pietrantonio91. For more Advanced Usages, please check the demo page or visit the official website.