Question

我正在使用Laravel 5.4并且我在管理面板中有一个用户列表我想在我的用户列表顶部添加搜索框来搜索它们，我希望结果是实时的（当键入单词结果显示时）我想应该使用Ajax（不确定！）

假设这是我的用户列表代码：

@foreach ($users as $user)
  <td>{{ $user->first_name }}</td>
  <td>{{ $user->last_name }}</td>
  <td>{{ $user->username }}</td>
  <td>{{ $user->email }}</td>
@endforeach

如何使用该搜索进行搜索？

我应该安装任何插件还是只使用Vue.Js或......？

感谢。

Answer 1

你实际上必须使用ajax技术。但只有一次..让angularJS或vue做搜索功能.. 我其实想在这里发布一个片段，但似乎是一个bug ..所以这里有sample你可能想要看到..

Answer 2

您可以使用https://datatables.net/

包含在您的HTML中（如果您正在使用gulp，请在您的文件中使用来控制依赖项）


    <table id="myTable">
        <thead>
            <th>First name</th>
            <th>Last name</th>
            <th>Username</th>
            <th>Email</th>
        </thead>
        <tbody>
            @foreach($users as $user)
            <td> {{ $user->first_name }} </td>
            <td> {{ $user->last_name }} </td>
            <td> {{ $user->username}} </td>
            <td> {{ $user->email }} </td>
            @endforeach
        </tbody>
    </table>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/dataTables.bootstrap.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.js">

    <script>
    $(document).ready(function(){
        $('#myTable').DataTable();
    });
    </script>

使用实时结果在laravel数据库中搜索

2 个答案: