CODEWITHSUNDEEP
javascriptjquerydatatables
Dev1ce
Dev1ce

Reputation: 5944

Datatable Hide rows

I need help to HIDE the rows from the Datatable,

When User selects "Show All" from the Dropdown, the complete Datatable should be rendered,

Otherwise when the User selects "Hide USA",
I want to hide the rows whose Country Column's value is "USA".
So need some kind of hide/show toggle functionality of Datatable depending on the column's value.

Here's my Sample code -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-1.12.3.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">

    <script type="text/javascript">
        $(document).ready(function() {

            var table = $('#example').DataTable();

            $("#choice").on("change",function(){

                var _val = $(this).val();

                 if(_val == 2){   
                        table
                        .columns(2)
                        .search('USA',true)
                        .draw();
                  }
                  else{
                    table
                    .columns()
                    .search('')
                    .draw(); 
                  }
            });
        } );



    </script>

    <style>
        #choice{
            width: 135px;
            height: 35px;
            margin-bottom: 20px;
        }
    </style>

</head>

<body>

    <select name="choice" id="choice">
        <option value="1">Show All</option>
        <option value="2">Hide USA</option>
    </select>

    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Country</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Country</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>61</td>
                <th>USA</th>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>63</td>
                <th>USA</th>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>61</td>
                <th>Mexico</th>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>45</td>
                <th>Brazil</th>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>56</td>
                <th>Japan</th>
            </tr>

        </tbody>
    </table>

</body>
</html>

My current code is Hiding "Non USA" rows,
Whereas I want to hide rows, whose "Country" column has "USA"

Upvotes: 2

Views: 16599

Answers (1)

CMedina
CMedina

Reputation: 4222

You can use search of DataTable, and specified the value with regex, for example:

Hide Non 61 Age

table
    .columns(1)
    .search('^(?:(?!61).)*$\r?\n?', true, false)
    .draw();

Show All

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

Result: https://jsfiddle.net/cmedina/egsqb68u/1/

UPDATE:

Hide USA:

table
    .columns(2) //The index of column to search
    .search('^(?:(?!USA).)*$\r?\n?', true, false) //The RegExp search all string that not cointains USA
    .draw();

Result: https://jsfiddle.net/cmedina/egsqb68u/2/

Upvotes: 8

Related Questions