AdminLTE-master很好用的分页查询排序模版，配置如下文所示-优快云博客

本文链接：https://blog.youkuaiyun.com/a813815/article/details/52585731

这篇博客介绍了如何利用AdminLTE-master模版进行分页查询和排序功能的配置。内容包括引入必要的CSS和JS文件，创建表格结构，以及通过DataTables插件实现表格的分页、搜索和排序功能。示例代码展示了如何根据城市和状态进行筛选操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<link rel="stylesheet" href="{{ asset('/AdminLTE-master/plugins/datatables/dataTables.bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('/AdminLTE-master/bootstrap/css/bootstrap.css') }}">

<table id="data1" class="table table-bordered table-hover col-md-8">
    <thead>
        <tr>
            <th>ID</th>
            <th>城市</th>
            <th>空间</th>
            <th>预约日期</th>
            <th>姓名</th>
            <th>电话</th>
            <th>提交时间</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody>

    @foreach($data as $each)
        <tr>
            <td><a href="{{ asset('backstage/appointment_info_') }}{{$each->id}}"  target="view_window">{{$each->id}}</a></td>
            <td>{{$each->city}}</td>
            <td>{{$each->space}}</td>
            <td>{{$each->visting_time}}</td>
            <td>{{$each->name}}</td>
            <td>{{$each->phone}}</td>
            <td>{{$each->created_at}}</td>
            <td>
                <input value="{{$each->state}}" id="no{{$each->id}}">
            </td>
        </tr>
    @endforeach

    </tbody>
</table>

{{--page--}}
<script src="{{ asset('/AdminLTE-master/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('/AdminLTE-master/plugins/datatables/dataTables.bootstrap.min.js')}}"></script>
<script src="{{ asset('/AdminLTE-master/plugins/slimScroll/jquery.slimscroll.min.js')}}"></script>
<script src="{{ asset('/AdminLTE-master/plugins/fastclick/fastclick.js')}}"></script>
<script src="{{ asset('/AdminLTE-master/dist/js/app.min.js')}}"></script>
<script src="{{ asset('/AdminLTE-master/dist/js/demo.js')}}"></script>

<script>

    var table;

    //        翻页，排序，搜索
    $(function () {
        table = $('#data1').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": false,
            "autoWidth": false,

        });

    });

    function city(city){
        table.column( 1 ).search( city ).draw();

    }

    function state(state){
        table.column( 3 ).search( state ).draw();
    }




</script>
*table.column( 1 ).search( city ).draw();
*列的搜索