A jQuery plugin for making HTML tables searchable and sortable

September 28, 2019 No comments jQuery Sorting Paging Table

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.

A jquery plugin for making html tables searchable sortable and with pagination

2. Plugin Overview

Library jQuery.fancyTable
Author Johan Johansson
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.3.1 or Latest version and Bootstrap 4.1.3

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.

{{ message }}

{{ 'Comments are closed.' | trans }}