locked
Fetching filtered members from other pages in HTML Table. RRS feed

  • Question

  • User-1549556126 posted

    I have created a filter to show the records that matches the criteria, for table pagination I am using dataTables.js, I am filtering the table on key up event on the text box. The issue I am facing is when I filter the table it only works on the first page meaning if there are any records on the 2nd or 3rd page of the table it should shift to page 1 which is not happening.

    Here's my code to filter:

     function filterMember(columnIndex) {
                var input, filter, table, tr, td, i, txtValue;
                if (columnIndex == 0) {
                    input = document.getElementById("txtMemberName");
                    document.getElementById("txtMemberType").value = "";
                } else if (columnIndex == 1) {
                    input = document.getElementById("txtMemberType");
                    document.getElementById("txtMemberName").value = "";
                }
                
                filter = input.value.toUpperCase();
                var rows = document.querySelector("#data tbody").rows;
                for (var i = 0; i < rows.length; i++) {
                    var firstCol = rows[i].cells[0].textContent.toUpperCase();
                    
                    if (columnIndex == 0) {
                        if (firstCol.indexOf(filter) > -1) {
                            rows[i].style.display = "";
                        } else {
                            rows[i].style.display = "none";
                        }
                    } else if (columnIndex == 1) {
                        if (rows[i].cells[3].textContent.toUpperCase().indexOf(filter) > -1) {
                            rows[i].style.display = "";
                        } else {
                            rows[i].style.display = "none";
                        }
                    }
                }
            }

    I have created table with two columns so I have separate filter for each of the two by passing the columnIndex as a parameter. Assuming a simple HTML table with id="data" having two columns memberName & memberType using dataTables as follows:

    // Pagination of HTML Table
                                $(document).ready(function () {
                                    $('#data').DataTable({
                                        "lengthMenu": [[5, 10, 25, 50, 100, 500, 1000, -1], [5, 10, 25, 50, 100, 500, 1000, "All"]],
                                        "filter": false, // Hide inbuilt filter my manual one is performing better
                                        "info": true, // Hide "Show 8 of 100" text
                                        "pageLength": 50, // Setting Default page length to 25
                                        "pagingType": "full_numbers",
                                        paging: true,
                                        deferRender: true,
                                        "oLanguage": {
                                            "oPaginate": {
                                                "sFirst": "<< First", // This is the link to the first page
                                                "sPrevious": "< Prev", // This is the link to the previous page
                                                "sNext": "Next >", // This is the link to the next page
                                                "sLast": "Last >>" // This is the link to the last page
                                            }
                                        },
                                        language: { "zeroRecords": " " }, // To remove No Data Available Text From the Table
                                        "dom": "ft<'row'<'col-lg-4'l><'col-lg-8'p>>"
                                    });
                                });

    This is what I am doing in HTML To apply filter for textbox.

    <div class="content">
                <div class="focus-link theme-bg-medium-blue reopen-shim col-md-4">
                    <input type="text" id="txtMemberName" class='form-control' placeholder="Filter by member names, CAI or Provisioning ID.." onkeyup="filterMember(0)" style="width:100%; font-size:12px;" />
                </div>
                <div class="focus-link theme-bg-medium-blue reopen-shim col-md-4">
                    <input type="text" id="txtMemberType" class='form-control' placeholder="Filter by member type.." onkeyup="filterMember(1)" style="width:100%; font-size:12px;" />
                </div>
    </div>

    How do I push the members matching filter criteria to the front when filter executes?

    Friday, August 23, 2019 4:17 PM

Answers

  • User665608656 posted

    Hi vyasnikul,

    According to your requirement, If you want use your custom filter, you can add index to the ID name of your search box that corresponds to the column you queried.

    In this way, the DataTable is rebounded in the Keyup event. And you need to enable filtering, then hide the search box through css.

    For more details, you could refer to the following code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title> 
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
        <script type="text/javascript" src="  https://code.jquery.com/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
        <script type="text/javascript">
    // Pagination of HTML Table
                                $(document).ready(function () {
                                  $('#data').DataTable({
    "lengthMenu": [[5, 10, 25, 50, 100, 500, 1000, -1], [5, 10, 25, 50, 100, 500, 1000, "All"]],
                                       //"filter": false, // remove this line
                                        "info": true, // Hide "Show 8 of 100" text
                                        "pageLength": 50, // Setting Default page length to 25
                                        "pagingType": "full_numbers",
                                        paging: true,
                                        deferRender: true,
                                        "oLanguage": {
                                            "oPaginate": {
                                                "sFirst": "<< First", // This is the link to the first page
                                                "sPrevious": "< Prev", // This is the link to the previous page
                                                "sNext": "Next >", // This is the link to the next page
                                                "sLast": "Last >>" // This is the link to the last page
                                            }
                                        },
                                        language: { "zeroRecords": " " }, // To remove No Data Available Text From the Table
                                        "dom": "ft<'row'<'col-lg-4'l><'col-lg-8'p>>"
                                    });
                                });
    
    function filterMember(i){
     $('#data').DataTable().column(i).search( $('#txtMember_'+i).val() ).draw();
    } 
        </script>
        <style typei="text/css">
            .dataTables_filter {
                display: none;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="content">
                <div class="focus-link theme-bg-medium-blue reopen-shim col-md-4">
                    <input type="text" id="txtMember_0" class='form-control' placeholder="Filter by member names, CAI or Provisioning ID.." onkeyup="filterMember(0)" style="width: 100%; font-size: 12px;" />
                </div>
                <div class="focus-link theme-bg-medium-blue reopen-shim col-md-4">
                    <input type="text" id="txtMember_1" class='form-control' placeholder="Filter by member type.." onkeyup="filterMember(1)" style="width: 100%; font-size: 12px;" />
                </div>
    
                <table id="data" class="table table-striped table-bordered table-sm">
                    <thead>
                        <tr>
                            <th style="font-size: 1rem; font-weight: bold">Task</th>
                            <th style="font-size: 1rem; font-weight: bold">status</th>
    
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Task 1</td>
                            <td>Complete</td>
    
                        </tr>
                        <tr>
                            <td>Task 2</td>
                            <td>Complete</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
    
                    </tbody>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    You can refer to this link : https://datatables.net/examples/api/regex.html

    Here is the result of my work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 26, 2019 5:35 AM

All replies

  • User665608656 posted

    Hi vyasnikul,

    According to your requirement, If you want use your custom filter, you can add index to the ID name of your search box that corresponds to the column you queried.

    In this way, the DataTable is rebounded in the Keyup event. And you need to enable filtering, then hide the search box through css.

    For more details, you could refer to the following code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title> 
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
        <script type="text/javascript" src="  https://code.jquery.com/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
        <script type="text/javascript">
    // Pagination of HTML Table
                                $(document).ready(function () {
                                  $('#data').DataTable({
    "lengthMenu": [[5, 10, 25, 50, 100, 500, 1000, -1], [5, 10, 25, 50, 100, 500, 1000, "All"]],
                                       //"filter": false, // remove this line
                                        "info": true, // Hide "Show 8 of 100" text
                                        "pageLength": 50, // Setting Default page length to 25
                                        "pagingType": "full_numbers",
                                        paging: true,
                                        deferRender: true,
                                        "oLanguage": {
                                            "oPaginate": {
                                                "sFirst": "<< First", // This is the link to the first page
                                                "sPrevious": "< Prev", // This is the link to the previous page
                                                "sNext": "Next >", // This is the link to the next page
                                                "sLast": "Last >>" // This is the link to the last page
                                            }
                                        },
                                        language: { "zeroRecords": " " }, // To remove No Data Available Text From the Table
                                        "dom": "ft<'row'<'col-lg-4'l><'col-lg-8'p>>"
                                    });
                                });
    
    function filterMember(i){
     $('#data').DataTable().column(i).search( $('#txtMember_'+i).val() ).draw();
    } 
        </script>
        <style typei="text/css">
            .dataTables_filter {
                display: none;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="content">
                <div class="focus-link theme-bg-medium-blue reopen-shim col-md-4">
                    <input type="text" id="txtMember_0" class='form-control' placeholder="Filter by member names, CAI or Provisioning ID.." onkeyup="filterMember(0)" style="width: 100%; font-size: 12px;" />
                </div>
                <div class="focus-link theme-bg-medium-blue reopen-shim col-md-4">
                    <input type="text" id="txtMember_1" class='form-control' placeholder="Filter by member type.." onkeyup="filterMember(1)" style="width: 100%; font-size: 12px;" />
                </div>
    
                <table id="data" class="table table-striped table-bordered table-sm">
                    <thead>
                        <tr>
                            <th style="font-size: 1rem; font-weight: bold">Task</th>
                            <th style="font-size: 1rem; font-weight: bold">status</th>
    
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Task 1</td>
                            <td>Complete</td>
    
                        </tr>
                        <tr>
                            <td>Task 2</td>
                            <td>Complete</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
                        <tr>
                            <td>Task 3</td>
                            <td>In-Progress</td>
    
                        </tr>
    
                    </tbody>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    You can refer to this link : https://datatables.net/examples/api/regex.html

    Here is the result of my work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 26, 2019 5:35 AM
  • User-1549556126 posted

    Thanks For the response YongQing!

    This does work properly, the data is being drawn from other pages while filtering, just a little query, so instead of a single column index 'i' that we are passing in the column(i).search(), is there a way via loop to do the same from few multiple columns on single textbox and rest of the other columns on the other textboxes?

    Eg: In case, I have 4 columns I would like to give filter to first 3 columns to txtMember_0 & 4th column filter to txtMember_1.

    Here's what I did:

    function filterMember(columnIndex) {
                if (columnIndex == 0) {
                    for (var i = 0; i <= 2; i++) {
                        $('#data').DataTable().column(i).search($('#txtMember_0').val()).draw();
                    }
                    document.getElementById("txtMember_1").value = "";
                } else if (columnIndex == 1) {
                    $('#data').DataTable().column(3).search($('#txtMember_1').val()).draw();
                    document.getElementById("txtMemberMember_0").value = "";
                }

    Thanks,

    Nikul

    Monday, August 26, 2019 5:26 PM