A jQuery plugin for making HTML tables searchable and sortable

1. Introduction

jQuery.fancyTable is a jQuery plugin created to extend any HTML table with additional features like paging, sorting or filtering. The plugin comes with many customization options: you can add global searching for all columns, change the pagination class, change the initial sort order and many more.

2. Plugin Overview

Demo

3. How to install and use jQuery.fancyTable jQuery plugin

Follow the below steps to install jQuery.fancyTable jQuery plugin on your website.

3.1. Load the required jQuery and Bootstrap libraries, and attach jQuery.fancyTable JavaScript file:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- fancyTable Js -->
<script src="src/fancyTable.js"></script>

3.2. Create any Bootstrap HTML table:

<table id="sampleTable" class="table table-striped sampleTable">
    <thead>
        <tr>
        <th>Col A</th>
        <th>Col B</th>
        <th>Col C</th>
        </tr>
    </thead>
    <tbody>
        [...]
    </tbody>
</table>

3.3. Initialize the jQuery.fancyTable plugin:

$(document).ready(function() {
        $(".sampleTable").fancyTable({
            sortColumn:0,
            pagination: true,
            perPage:10,
            globalSearch:true
        });        
});

4. Conclusion

In this article, we presented jQuery.fancyTable jQuery plugin that makes every HTML table searchable, sortable and with pagination. With that script, you can extend your tables with nice features easily without much effort. Users of your website will appreciate that they can navigate tables fast and search interesting values easily.