CODEWITHSUNDEEP
javascriptjquery
JSTR
JSTR

Reputation: 151

How to filter html table using javascript without reloading the page?

I have these codes already working using plain javascript and got it in W3schools which filtering table data using input text. I added a Select dropdown for filtering table. I've found some answers here but its not working to my codes.

I tried using Jquery but its not working. JQUERY CDN is located at the header

 <head>
   <script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
   </script>
  </head>

   <table class="table table-bordered" id = "tbl_main_content">
        <thead>
            <tr>
                <th>Title</th>
                <th style = "display: none;">Description</th>
                <th>Category</th>
                <th style = "display: none;">Status</th>
                <th width="400px">Action</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

 //my input
 <input type="text" class="form-control" id="txt_list_search" 
 placeholder="Enter keyword..."  onkeyup="myFunction()">

 //my select
<select class="form-control" id = "sort">
<option >Select Sort</option>
<option value = "HTML">Html</option>
<option value = "JAVASCRIPT">Javascript</option>
<option value = "CSS">Css</option>
<option value = "PHP">PHP</option>
<option value = "LARAVEL">Laravel</option>
<option value = "AJAX">Ajax</option>
</select>

 <script>
   function myFunction() 
    {
    var input, filter, table, tr, td, i, txtValue; 
    input = document.getElementById("txt_list_search");
    filter = input.value.toUpperCase();
    table = document.getElementById("tbl_main_content");   
    tr = table.getElementsByTagName("tr");  
    for (i = 0; i < tr.length; i++)
        {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) 
                {
                    txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1)
                        {
                            tr[i].style.display = "";
                        } else {
                                 tr[i].style.display = "none";
                                }
                }       
        }
    }

   var options = $("#sort");
   $("#tbl_main_content tr:not(.header)").each(function() {
   options.append($("<option />").val($(this).find("td:first- 
   child").text()).text($(this).find("td:first-child").text()));
   });

   $("#txt_list_search").on('input', function() {
   myFunction($(this).val());
   });

   $("#sort").on('change', function() {
   myFunction($(this).val());
   });
   </script>

     // AJAX METHOD TO DISPLAY DATA FROM DB
     <script>
     getPageData();
     function getPageData() {
     $.ajax({
     dataType: 'json',
     url: url,
     data: {page:page}
     }).done(function(data){
     manageRow(data);
         });
     }

     function manageRow(data) {
     console.log(data)
     var    rows = '';
     $.each( data, function( key, value ) {
     rows = rows + '<tr>';
     if(value.status == 0){
     rows = rows + '<td style = "color: #FF0000">'+value.title+'</td>';
     } else{
     rows = rows + '<td style = "color: #000">'+value.title+'</td>';
     }
     rows = rows + '<td style = "display: none;">'+value.details+'</td>';
     rows = rows + '<td>'+value.category+'</td>';
     rows = rows + '<td style = "display: none;">'+value.status+' </td>';
     rows = rows + '<td data-id="'+value.id+'">';
     rows = rows + '<a href = my-posts-sub/'+value.id+'><button class="btn 
     btn-secondary manage-sub-item"><img src="/media/icon_manage.png" 
     width = "20">&nbsp&nbsp<i>Manage Sub</i></button> </a>';
     rows = rows + '<button data-toggle="modal" data-target="#edit-item" 
     class="btn btn-secondary edit-item"><img src="/media/icon_edit.png" 
     width = "20">&nbsp&nbsp<i>Edit</i></button> ';
     rows = rows + '<button class="btn btn-secondary remove-item"><img 
     src="/media/icon_delete.png" width = "20"></button>';
     //---------------------class------bootstrap--variable
     rows = rows + '</td>';
     rows = rows + '</tr>';
     });

     $("tbody").html(rows);

     }
      </script>

Upvotes: 2

Views: 2329

Answers (1)

Programnik
Programnik

Reputation: 1555

The onchange event for select is passing value of the select as an argument to myFunction, but myFunction is not accepting any arguments. Change myFunction to 

 function myFunction(filter) 
    {  

    if (filter == undefined)
        filter = document.getElementById("txt_list_search").value.toUpperCase();

    var table = document.getElementById("tbl_main_content");   
    var tr = table.getElementsByTagName("tr");  
    for (var i = 0; i < tr.length; i++)
        {
            var td = tr[i].getElementsByTagName("td")[0];
            if (td) 
                {
                    var txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1)
                    {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }       
          }
    }

Upvotes: 1

Related Questions