How can i auto filter on javascript laravel?

Viewed 93

I don't want to redirect page when I want to filter the table so how can I make it in javascript? this is my javascript

javascript

    document.getElementById('inputdismissal').value = programId
    $('#modalAddDismissal').modal("show",function(){
    $('#inputdismissal').val(programId).trigger('change');
    $('#inputdismissal').change(function(){
            //fire your ajax call 
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        }); 
    })
    })

and i have this modal,

modal.php

  <div class="modal-header">
    <input class="form-control" id="inputdismissal" type="text" readonly/>
  </div>
  <div class="modal-body">
    <table id="tblDisNikName" class="table table-sm table-responsive table-hover table-bordered">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">Select</th>
                        <th scope="col">NIK</th>
                        <th scope="col">Nama</th>
                        <th scope="col">Position</th>
                        <th scope="col">Program</th>
                    </tr>
                </thead>
                <tbody id="myTable" class="cursor-pointer">
                    @foreach($dismissalcrew as $datadis)
                    <tr>
                        <td><input class="dismissalTest" type="checkbox"></td>
                        <td>{{$datadis->employee_nik}}</td>
                        <td>{{$datadis->employee_nama}}</td>
                        <td>{{$datadis->crewprogramposition_name}}</td>
                        <td>{{$datadis->show_name}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
  </div>

I already get my value into inputDismissal and show up on my modal. but the table didn't get filtered at all, how can I just show filtered table when I call the modal using inputDismisal, I mean getting filtered automatically as I call the modal

1 Answers

SO its basically very simple, i just use jquery and put the value

function filterInput(programId){
  $(document).ready(function(){
    var value = programId.toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
  $('#modalAddDismissal').modal("show")
}

just put the modal after the filter and it's work

Related