Create Custom Filtering in Bootstrap 4 Datatable Individual column searching

Create Custom Filtering in Bootstrap 4 Datatable Individual column searching

Hello folks, Today In this quick post I am gonna discuss Bootstrap 4 Datatable advanced Individual custom columns searching and filtering or Custom Filtering in Bootstrap 4 Datatable that’s very helpful to filter the very row amount of data. Here we will use Bootstrap 4 libraries and essential CSS and JS file for the Implementation of Datatable.

#1:- Here is the Necessary javascript and CSS file for Datatable. you need to include it in your file to work properly.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet">  
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>

#2:- Here is the Script for Individual custom filtering with Datatable including text filters. So you can search it globally as well individually bu text inputs.

<script>
$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable();
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
</script>



#3:- Your table structure should look like this:-

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Date</th>
                <th>Title</th>
                <th>Author</th>
                <th>Article link</th>
                <th>Demo</th>
                <th>Source Code</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Date</th>
                <th>Title</th>
                <th>Author</th>
                <th>Article link</th>
                <th>Demo</th>
                <th>Source Code</th>
            </tr>
        </tfoot>
        <tbody>
           <tr>
                <th>06-09-2017</th>
                <th>Facebook Like Face Detection Script in JQuery – Download Source Code</th>
                <th>Krishna Gupta</th>
                <th><a href="https://www.technologyshouters.com/facebook-like-face-detection-script-in-jquery/">Article</a></th>
                <th><a href="http://www.technologyshouters.com/facedetect/">Demo</a></th>
                <th><a href="#">Download</a></th>
            </tr>
            <tr>
                <th>08-09-2017</th>
                <th>Laravel 5.5 CRUD application from Scratch – Complete Source code</th>
                <th>Krishna Gupta</th>
                <th><a href="https://www.technologyshouters.com/laravel-5-5-crud-application-scratch-complete-source-code/">Article</a></th>
                <th><a href="#">Demo</a></th>
                <th><a href="#">Download</a></th>
            </tr>
             <tr>
                <th>10-09-2017</th>
                <th>Login and Register in Laravel 5.5 – Simple & Complete Guide</th>
                <th>Krishna Gupta</th>
                <th><a href="https://www.technologyshouters.com/login-and-register-in-laravel-5-5-simple-complete-guide/">Article</a></th>
                <th><a href="#">Demo</a></th>
                <th><a href="#">Download</a></th>
            </tr>
             <tr>
                <th>12-09-2017</th>
                <th>Upload Profile picture in Laravel 5.5 – Download Source Code</th>
                <th>Krishna Gupta</th>
                <th><a href="https://www.technologyshouters.com/upload-profile-picture-in-laravel-5-5/">Article</a></th>
                <th><a href="#">Demo</a></th>
                <th><a href="#">Download</a></th>
            </tr>
             <tr>
                <th>13-09-2017</th>
                <th>Create Your Own Web Text Editor Using HTML, CSS and Javascript.</th>
                <th>Krishna Gupta</th>
                <th><a href="https://www.technologyshouters.com/create-code-editor-using-html-css-javascript/">Article</a></th>
                <th><a href="#">Demo</a></th>
                <th><a href="#">Download</a></th>
            </tr>

        </tbody>
    </table>



Krishna Gupta

Krishna Ballabh Gupta is a Gold Medalist Full Stack Developer & Algorithm Designer and Founder of TechnologyShouters. He generally Blogs about Python, JavaScript, jQuery, AngularJS, Database, PHP, AJAX and something that interesting.

Related Posts

Create Account



Log In Your Account



1Subscribe to Our Live Updates.