jQuery搜索仅搜索其上的页面

时间:2018-08-28 16:05:14

标签: javascript jquery laravel laravel-5

我有使用laravel默认分页器分页的laravel数据。

控制器

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

桌子是我的刀片模板,就像这样

<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>{{ trans('crud.users.id') }}</th>
            <th>{{ trans('Name') }}</th>
            <th>{{ trans('Email') }}</th>
            <th>{{ trans('Country') }}</th>
            <th>{{ trans('Contact No') }}</th>
            <th>{{ trans('counsellor') }}</th>
            <th>{{ trans('Submitted On') }}</th>
            <th>{{ trans('Status') }}</th>
            <th>{{ trans('crud.actions') }}</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>

以下是我要搜索的JS。当前,它仅搜索当前页面,而不仅仅是我所在的页面。

<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>

1 个答案:

答案 0 :(得分:1)

不确定“当前”页面和“我所在的页面”之间有什么区别,但是如果您不仅要过滤呈现的表格,还要过滤整个数据库,则应发送包含datetime,value1,value2...datetime. 内容的ajax请求,用它进行sql请求并接收结果列表。 可能更好的解决方案是在页面加载时从DB槽ajax获取整个列表,将其拆分并使用js框架呈现表。在这种情况下,您可以处理整个数据而无需不必要的ajax请求。