Search in HTML Table Using JavaScript – jQuery fancyTable

Create search functionality in HTML table using (JavaScript) jQuery fancyTable that offers to make html tables searchable and sort-able with pagination. The plugin is compatible with Bootstrap & other JavaScript frameworks.

Plugin Overview

Plugin: fancyTable
Author: Johan Johansson
Licence: MIT Licence
Published: March 27, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Bootstrap 4.1.3
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 10.1 KB

How to add Search in HTML Table Using JavaScript:

1. To make search functionality in HTML table, load the jQuery (JavaScript library), Bootstrap framework and fancyTable’s js file into HTML document.

<!-- jQuery -->
<script src=""></script>

<!-- Bootstrap CSS -->
<link href="" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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

2. Create HTML table with the following mention classes.

<table id="sampleTable" class="table table-striped sampleTable">
		<th>Col A</th>
		<th>Col B</th>
		<th>Col C</th>
<!--  Table Content Goes Here -->

3. Initialize the fancyTable plugin in jQuery document ready function.

$(document).ready(function() {

4. The placeholder text for search input. Default: ‘Search’, type: string

   inputPlaceholder: 'Search in Table'

5. CSS style for search input. Default: ”, type: string

   inputStyle: 'color:black;'

6. To enable / disable pagination for table. Default: false, type: bool

   pagination: true,

7. To add custom class in pagination. Default: ‘btn btn-light’, type: string

   paginationClass: 'someClass'

8. Create pagination buttons for tbe n closest pages. Default: 3, type: number

   pagClosest: 4

9. Rows per page when using pagination. Default: 10, type: number

   perPage: 5

10. Should the table be searchable or not. Default: true, type: bool

   searchable: false

11. Should the table be sortable or not. Default: true, type: bool

   sortable: false

12. Column number for initial sorting. Default: undefined, type: number

   sortColumn: 4

13. To add custom callback function on input in search field.

	// your code to execute

14. To execute a custom function after each update (table sort and search).

	// code to run

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.