skip to Main Content

i have a table with dataTable, in this table i have a filter with label All, Software Enginer

when i klik the label Software Enginer the value is the result is appropriate with label, but when i klik all label the value in dataTable is missing/zero data

the code of my table like this:

<div class="position-relative content">
            <div class="position-absolute w-100 row" style="z-index: 50;">
                <div class="col-6">
                    <div class="filter-wrapper">
                        <input type="radio" class="filter-checkbox" name="filter" value="all" checked="checked" />
                        All
                        <input type="radio" class="filter-checkbox" name="filter" value="Software Engineer" />
                        Software Engineer
                        <input type="radio" class="filter-checkbox" name="filter" value="Accountant" />
                        Accountant
                    </div>
                </div>
            </div>
        </div>
        <table id="example" class="table" style="z-index: 30;">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Status</th>
                    <th>Hidden</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                    <td>
                        <div class="badge status-badge badge-info">
                            Draft
                        </div>
                    </td>
                    <td>DRF</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                    <td>
                        <div class="badge status-badge badge-info">
                            Draft
                        </div>
                    </td>
                    <td>DRF</td>
                </tr>
            </tbody>
        </table>
    </div>

an then this is my javascript code for dataTable and filter for position field:

$(document).ready(function() {
            dataTable = $("#example").DataTable({
                columnDefs: [{
                    targets: [7],
                    visible: false
                }],
                "bInfo": false,
                "bPaginate": true,
                "bLengthChange": false,
                "buttons": [],
                "ordering": false,
                language: {
                    paginate: {
                        next: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-right"></i>',
                        previous: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-left"></i>'
                    }
                },
            });

            $(".filter-checkbox").on("change", function(e) {
                var searchTerms = [];
                $.each($(".filter-checkbox"), function(i, elem) {
                    if ($(elem).prop("checked")) {
                        searchTerms.push("^" + $(this).val() + "$");
                    }
                });
                dataTable.column(1).search(searchTerms.join("|"), true, false, true).draw();
            });
        });

this is my jsdfile:
https://jsfiddle.net/4y9u8xnq/

this is my picture for the result code:
the_result

someone can help. how to show all data when i click the radio button with value all?

2

Answers


  1. This works for me.

    I skip the push in the searchTerms array if the value of the checked radiobutton is equals to ‘all’

    $(".filter-checkbox").on("change", function(e) {
        var searchTerms = [];
        $.each($(".filter-checkbox"), function(i, elem) {
            if ($(elem).prop("checked")) {
                if($(this).val() != "all"){
                    searchTerms.push("^" + $(this).val() + "$");
                }
            }
        });
        dataTable.column(1).search(searchTerms.join("|"), true, false, true).draw();
    });
    
    Login or Signup to reply.
  2. The accepted answer certainly works.

    But with some changes, the JavaScript can be greatly simplified.

    This alternative approach uses a custom attribute in each of the radio button elements.

    We can further simplify the code by recognizing that we only ever select one radio button value at a time from the single group of options (these are not checkboxes, where multiple values could be selected at once).

    An final simplification can be made by not using the DataTables regex functionality here, since we want to match on the exact string.

    Combining all of the above approaches gives the following:

    $(document).ready(function() {
        dataTable = $("#example").DataTable({
            columnDefs: [{
                targets: [7],
                visible: false
            }],
            "bInfo": false,
            "bPaginate": true,
            "bLengthChange": false,
            "buttons": [],
            "ordering": false,
            language: {
                paginate: {
                    next: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-right"></i>',
                    previous: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-left"></i>'
                }
            },
        });
    
        $(".filter-checkbox").on("change", function(e) {
            let searchTerm = $('input[name="filter"]:checked').attr("data-filter");
            dataTable.column(1).search(searchTerm, false, false, true).draw();
        });
    });
    <!doctype html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Demo</title>
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
      <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
      <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
    
    </head>
    
    <body>
    
    <div style="margin: 20px;">
    
        <div class="position-relative content">
                <div class="position-absolute w-100 row" style="z-index: 50;">
                    <div class="col-6">
                        <div class="filter-wrapper">
                            <input type="radio" class="filter-checkbox" name="filter" data-filter="" value="all" checked="checked" />
                            All
                            <input type="radio" class="filter-checkbox" name="filter" data-filter="software engineer" value="Software Engineer" />
                            Software Engineer
                            <input type="radio" class="filter-checkbox" name="filter" data-filter="accountant" value="Accountant" />
                            Accountant
                        </div>
                    </div>
                </div>
            </div>
            <table id="example" class="table" style="z-index: 30;">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                        <th>Status</th>
                        <th>Hidden</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                        <td>
                            <div class="badge status-badge badge-info">
                                Draft
                            </div>
                        </td>
                        <td>DRF</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                        <td>
                            <div class="badge status-badge badge-info">
                                Draft
                            </div>
                        </td>
                        <td>DRF</td>
                    </tr>
                </tbody>
            </table>
        </div>
    
    
    </div>
    
    
    
    </body>
    </html>

    In the above approach, we add a data-filter custom attribute to every radio button.

    For the all radio button, this is set to be an empty string: "". This is because searching for an empty string (when regex is disabled) means that no records are filtered out – all records are returned by the search.

    <input type="radio" 
           class="filter-checkbox" 
           name="filter" 
           data-filter="" 
           value="all" 
           checked="checked" />
    

    In the JavaScript code, we remove the unnecessary concatenation logic searchTerms.join("|").

    We also use our new data-filter attribute when retrieving the one and only selected value:

    let searchTerm = $('input[name="filter"]:checked').attr("data-filter");
    

    We also change the regex parameter to false:

    search(searchTerm, false, false, true)
    

    If we were using checkboxes instead of radio buttons, then several of the above steps would need to be reversed – for example, the concatenation would still be needed.

    The regex option would also be needed again – and to make that work, the HTML attribute would need to be changed from this:

    data-filter="" value="all"
    

    to this:

    data-filter=".*" value="all"
    

    But with grouped radio buttons (as used in the question), the entire search logic can be reduced to 2 lines:

    let searchTerm = $('input[name="filter"]:checked').attr("data-filter");
    dataTable.column(1).search(searchTerm, false, false, true).draw();
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search