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: January 6, 2024
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="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" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 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">
	<thead>
		<tr>
		<th>Col A</th>
		<th>Col B</th>
		<th>Col C</th>
		</tr>
	</thead>
	<tbody>
<!--  Table Content Goes Here -->
	</tbody>
</table>

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

$(document).ready(function() {
   $("#sampleTable").fancyTable();		
});

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

$("#sampleTable").fancyTable({
   inputPlaceholder: 'Search in Table'
});		

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

$("#sampleTable").fancyTable({
   inputStyle: 'color:black;'
});		

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

$("#sampleTable").fancyTable({
   pagination: true,
});		

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

$("#sampleTable").fancyTable({
   paginationClass: 'someClass'
});		

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

$("#sampleTable").fancyTable({
   pagClosest: 4
});		

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

$("#sampleTable").fancyTable({
   perPage: 5
});		

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

$("#sampleTable").fancyTable({
   searchable: false
});		

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

$("#sampleTable").fancyTable({
   sortable: false
});		

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

$("#sampleTable").fancyTable({
   sortColumn: 4
});		

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

$("#sampleTable").fancyTable({
   onInit:function(){
	// your code to execute
}
});		

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

$("#sampleTable").fancyTable({
   onUpdate:function(){
	// code to run
}
});		

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...