Js Files<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script" />Js Files<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script" />
custom column filter in DataTable

Updated : Dec 26, 2019 in Articles

Custom column filter in DataTable

In this article, we will learn how to implement the custom column filter in DataTable by using Jquery

Before going to implementing column filter in data table we need to require the given below plugin resources

these resources are available in github download we need to required js and CSS files

CSS files

<link href="Content/jquery.tabSlideOut.css" rel="stylesheet" />

Js Files

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Scripts/jquery.tabSlideOut.js"></script>

create an HTML page name like customcolumnfilterinDataTable.html and Add the given below implemented HTML code

<!DOCTYPE html>
<html>
<head>
    <style>
        .ui-slideouttab-top {
            top: 0px !important;
        }
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>

    <link href="/Content/dataTables.bootstrap.min.css" rel="stylesheet" />
    <link href="Content/jquery.tabSlideOut.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="Content/buttons.css" rel="stylesheet" />
</head>
<body>
    <div id="top" class="">
        <a class="handle ui-slideouttab-handle-rounded btn-warning"><i class="fa fa-cog" aria-hidden="true"></i>filters</a>
        <div class="dropdown-menus" id="DownloadFilterContent1">
        </div>
    </div>
    <h2>HTML Table</h2>

    <table id="demoGrid">
        <thead>
            <tr>
                <th data-id="0">Company</th>
                <th data-id="1">Contact</th>
                <th data-id="2">Country</th>
                <th data-id="3">Address</th>
            </tr>
        </thead>
        <tr>
            <td data-id="0">Alfreds Futterkiste</td>
            <td data-id="1">Maria Anders</td>
            <td data-id="2">Germany</td>
            <td data-id="3">Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016</td>
        </tr>
        <tr>
            <td data-id="0">Centro comercial Moctezuma</td>
            <td data-id="1">Francisco Chang</td>
            <td data-id="2">Mexico</td>
            <td data-id="3">Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016</td>
        </tr>
        <tr>
            <td data-id="0">Ernst Handel</td>
            <td data-id="1">Roland Mendel</td>
            <td data-id="2">Austria</td>
            <td data-id="3">Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016</td>
        </tr>
        <tr>
            <td data-id="0">Island Trading</td>
            <td data-id="1">Helen Bennett</td>
            <td data-id="2">UK</td>
            <td data-id="3">Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016</td>
        </tr>
        <tr>
            <td data-id="0">Laughing Bacchus Winecellars</td>
            <td data-id="1">Yoshi Tannamuri</td>
            <td data-id="2">Canada</td>
            <td data-id="3">Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016</td>
        </tr>
        <tr>
            <td data-id="0">Magazzini Alimentari Riuniti</td>
            <td data-id="1">Giovanni Rovelli</td>
            <td data-id="2">Italy</td>
            <td data-id="3">Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016</td>
        </tr>
    </table>

</body>
</html>

<script src="Scripts/jquery.tabSlideOut.js"></script>
<script src="Scripts/jquery.dataTables.min.js"></script>
<script src="Scripts/demo.js"></script>

For DataTable resources go through this link https://datatables.net/

Add advanced interaction controls to your HTML tables

Step 1: Include these two files

CSS: //cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css

Js: //cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js

Step 2: Call this single function

$(document).ready( function () {
    $('#myTable').DataTable();
} );

Add the given below implemented javascript functions

<script>
    $(document).ready(function () {
        $("#demoGrid").DataTable({

            "columnDefs":
                [{
                    "targets": [0],
                    "visible": true,
                    "searchable": false
                },
                {
                    "targets": [1],
                    "visible": true,
                    "searchable": false
                },
                {
                    "targets": [2],
                    "visible": true,
                    "searchable": false
                }],
        });
    });
</script>
<script type="text/javascript">
    $("#DownloadFilterContent1").html('');
    //get the table elem
    var myTable = document.getElementById("demoGrid");
    //get the th elements
    var ths = myTable.getElementsByTagName("th");
    for (i = 0; i < ths.length; i++) {
        if (ths[i].visible == false) {
        }
        else {
            if (i != 0) {
                $("#DownloadFilterContent1").append('<input  checked="true" type="checkbox" id="colfiltcheks" data-id="' + i + '" name="' + ths[i].outerText + '">' + ths[i].outerText);
            }
        }
    }
</script>
<script>
    $(document).on("click", '#colfiltcheks', function () {
        var fg = $("#demoGrid").DataTable();
        var column = fg.column($(this).attr('data-id'));
        // Toggle the visibility
        column.visible(!column.visible());
        fg.columns.adjust();
    });
</script>

try to run your page

custom column filter in DataTable using jquery

Latest posts by DuttaluruVijayakumar (see all)
Like
Like Love Haha Wow Sad Angry

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x