mardi 28 août 2018

jQuery search only searching the page its on

I have laravel data which is paginated using laravels default paginator like so.

Controller

    $applications = Application::onlyTrashed()->latest()->paginate(25);
    return view('index', compact('applications'));

The table is my blade template is like this

  <label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
    <table class="table table-striped table-bordered table-hover" id="my-table1">
        <thead>
        <tr class="header">
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        @foreach ($archivedApplications as $row)
            <tr>
                <td>{!! $row->id !!}</td>
                <td>{!! $row->name ?: 'No Name Provided'!!}</td>
                <td>{!! $row->email !!}</td>
                <td>{!! $row->country['name'] ?: 'No Country Provided' !!}</td>
                <td>{!! $row->contact_no ?: 'No Number Provided' !!}</td>
                <td>{!! ((isset($row->counsellor->name))?$row->counsellor->name:'') !!}</td>
                <td>{!! $row->created_at !!}</td>

                <!-- additional td -->
                <td>
                    <span class="blockify-button btn-warning">{!! trans('Archived') !!}</span>
                </td>
</tr>
@endforeach
</tbody>
</table>

The below is my JS for searching. It currently only searches the current page, not just the one I'm on.

<script>
$(document).ready(function(){
    // Write on keyup event of keyword input element
    $("#kwd_search").keyup(function(){
        // When value of the input is not blank
        var term=$(this).val()
        if( term != "")
        {
            // Show only matching TR, hide rest of them
            $("#my-table1 tbody>tr").hide();
            $("#my-table1 td").filter(function(){
                   return $(this).text().toLowerCase().indexOf(term ) >-1
            }).parent("tr").show();
        }
        else
        {
            // When there is no input or clean again, show everything back
            $("#my-table1 tbody>tr").show();
        }
    });
});

</script>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire