How to filter the column with a button

syabiz · May 2021

Hi

I have added a button to select the same column name / category in and hide the unselected button. I also added the "all" option to reopen all names / categories. but it doesn't work on me. I add java script code like this,

// table.column(1).visible(false);

$('button').on('click', 'a', function() {

    table
        .columns(2)
        .search($(this).text())
        .draw();
});

$('button').on('click', 'a.all', function() {

    table
        .search('')
        .columns(2)
        .search('')
        .draw();
});

Is there something I forgot?

kthorngren · May 2021

but it doesn't work

What isn't working? Please provide more details of what happens and if there are errors in the console.

There is nothing obvious from the code you provided. Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

syabiz · May 2021

i get this error on console element on browser

test.html?m=1:4157 Uncaught ReferenceError: table is not defined
at HTMLAnchorElement.<anonymous> (test.html?m=1:4157)
at HTMLButtonElement.dispatch (jquery-3.3.1.js:5183)
at HTMLButtonElement.elemData.handle (jquery-3.3.1.js:4991)

syabiz · May 2021

In Head

<head>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<title>test</title>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>

<style type='text/css'>
html {
    height: 100%;
}

a{text-decoration:none}

body {
    background: #fff;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
    cursor: default;
    margin: 0px;
    padding: 0px;
    height: 100%;
}
.link {
    color: #006ead;
    cursor: hand;
    cursor: pointer;
}

.link:hover {
    text-decoration: underline;
}


.dataTables_wrapper .dataTables_length {
float: left;
text-align: left;
margin-top: 7px;
}
.dataTables_wrapper .dataTables_filter {
float: right;
text-align: right;
}
.dataTables_wrapper .dataTables_paginate {
float: center;
text-align: center;
}
.dataTables_wrapper .dataTables_info {
float: center;
text-align: center;
}

table.dataTable.compact thead th,
table.dataTable.compact tfoot th,
td {
padding: 4px 17px 0px 3px;
text-align: left;
}
.dataTables_wrapper 
.dataTables_paginate
.paginate_button {
padding: 0em 0.5em;
  }

.btsize {
    width: 60px !important;
    margin-right: 2px;
    margin-bottom: 5px;
}
</style>

<script class='init' type='text/javascript'>
//<![CDATA[  
$(document).ready(function() {
    var table = $('#coba').DataTable( {
        responsive: true,
        pagingType: 'numbers',
        pageLength: 10,
        lengthMenu: [
            [10, 20, 50, 100, -1],
            [10, 20, 50, 100, 'All']
        ],
        columnDefs: [
            {
                targets: [ 0 ],
                visible: false,
                searchable: false
            },
        ],
        language: {
            zeroRecords: '<b>Sorry, not yet this Item for this Category to display</b>',    //changes words used
            lengthMenu: '<b>_MENU_</b>',                                                    //changes words used
            info: '<b>&raquo; _START_ to _END_ of _TOTAL_</b>',                             //changes words used
            search: '',                                                                     //changes words used originally - Search programs:
            searchPlaceholder: 'Search Item',
            infoFiltered: '<b>(filtered from _MAX_ total Items)</b>'
        }
    });
} );

    // table.column(1).visible(false);

    $('button').on('click', 'a', function() {

        table
            .columns(2)
            .search($(this).text())
            .draw();
    });

    $('button').on('click', 'a.all', function() {

        table
            .search('')
            .columns(2)
            .search('')
            .draw();
    });
//]]>  
</script>   

<script type="text/javascript" language="javascript">
    function countdown(elementName, minutes, seconds) {
        var element, endTime, hours, mins, msLeft, time;

        function twoDigits(n) {
            return (n <= 9 ? "0" + n : n);
        }

        function updateTimer() {
            msLeft = endTime - (+new Date);
            if (msLeft < 1000) {
                element.innerHTML = "Ready!";
            } else {
                time = new Date(msLeft);
                hours = time.getUTCHours();
                mins = time.getUTCMinutes();
                element.innerHTML = (hours ? hours + ':' + twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds());
                setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
            }
        }

        element = document.getElementById(elementName);
        endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
        updateTimer();
    }
</script>

</head>

syabiz · May 2021

Buttons

<div style="text-align:center">
<button type="button" class="btn btsize btn-default"><a><span><img src="https://icons.iconarchive.com/icons/emey87/social-button/24/g-icon.png" title="Bitcoin"><br /><b>Cat1</b></span></a></button>

<button type="button" class="btn btsize btn-default"><a><span><img src="https://icons.iconarchive.com/icons/emey87/social-button/24/facebook-icon.png" title="Bitcoin"><br /><b>Cat2</b></span></a></button>

<button type="button" class="btn btsize btn-default"><a><span><img src="https://icons.iconarchive.com/icons/emey87/social-button/24/yahoo-icon.png" title="Bitcoin"><br /><b>Cat3</b></span></a></button>

<button type="button" class="btn btsize btn-default"><a><span><img src="https://icons.iconarchive.com/icons/emey87/social-button/24/tree-icon.png" title="Bitcoin"><br /><b>All</b></span></a></button>
</div>

syabiz · May 2021

Table

<table class="table" cellspacing="0" id="coba" class="display responsive no-wrap" width="100%" >
    <thead>
        <tr>
            <th>ID</th>
            <th>Website</th>
            <th>Category</th>
            <th>Price</th>
            <th>Timer</th>
        </tr>
    </thead>                                                                
        <tbody>
            <tr>
                <td>0001</td>
                <td><a onclick='countdown("0001", 60,0);' href="https://www.google.com" title="Google" target="_blank"><b>Google</b></a></td>
                <td>Categor1 1</td>
                <td>USD100</td>
                <td><div id="0001">Ready!</div></td>
            </tr>
            <tr>
                <td>0002</td>
                <td><a onclick='countdown("0002", 60,0);' href="https://www.facebook.com" title="Facebook" target="_blank"><b>Facebook</b></a></td>
                <td>Category 2</td>
                <td>USD200</td>
                <td><div id="0002">Ready!</div></td>
            </tr>
            <tr>
                <td>0003</td>
                <td><a onclick='countdown("0003", 60,0);' href="https://www.yahoo.com" title="Yahoo!" target="_blank"><b>Yahoo!</b></a></td>
                <td>Category 3</td>
                <td>USD300</td>
                <td><div id="0003">Ready!</div></td>
            </tr>

syabiz · May 2021

No happen when click the button

kthorngren · May 2021

Uncaught ReferenceError: table is not defined

You are referencing the variable table which is not within the scope of the click event function in this code snippet:

<script class='init' type='text/javascript'>
//<![CDATA[ 
$(document).ready(function() {
    var table = $('#coba').DataTable( {
        responsive: true,
        pagingType: 'numbers',
        pageLength: 10,
        lengthMenu: [
            [10, 20, 50, 100, -1],
            [10, 20, 50, 100, 'All']
        ],
        columnDefs: [
            {
                targets: [ 0 ],
                visible: false,
                searchable: false
            },
        ],
        language: {
            zeroRecords: '<b>Sorry, not yet this Item for this Category to display</b>',    //changes words used
            lengthMenu: '<b>_MENU_</b>',                                                    //changes words used
            info: '<b>&raquo; _START_ to _END_ of _TOTAL_</b>',                             //changes words used
            search: '',                                                                     //changes words used originally - Search programs:
            searchPlaceholder: 'Search Item',
            infoFiltered: '<b>(filtered from _MAX_ total Items)</b>'
        }
    });
} );
 
    // table.column(1).visible(false);
 
    $('button').on('click', 'a', function() {
 
        table
            .columns(2)
            .search($(this).text())
            .draw();
    });
 
    $('button').on('click', 'a.all', function() {
 
        table
            .search('')
            .columns(2)
            .search('')
            .draw();
    });
//]]> 
</script>

Move your two click events inside the $(document).ready(function() { .. }) function so the table variable is in the same scope.

Kevin

syabiz · May 2021

Thanks worked!
May Allah Bless You

How to filter the column with a button

How to filter the column with a button

Answers

Howdy, Stranger!

Categories

DataTables

How to filter the column with a button

How to filter the column with a button

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables