How to filter the column with a button

How to filter the column with a button

syabizsyabiz Posts: 7Questions: 1Answers: 0
edited May 2021 in General

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?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    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

  • syabizsyabiz Posts: 7Questions: 1Answers: 0

    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)

  • syabizsyabiz Posts: 7Questions: 1Answers: 0

    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>
    
  • syabizsyabiz Posts: 7Questions: 1Answers: 0

    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>
    
  • syabizsyabiz Posts: 7Questions: 1Answers: 0

    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>
    
  • syabizsyabiz Posts: 7Questions: 1Answers: 0

    No happen when click the button

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736
    Answer ✓

    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

  • syabizsyabiz Posts: 7Questions: 1Answers: 0

    Thanks worked!
    May Allah Bless You

This discussion has been closed.