为了账号安全,请及时绑定邮箱和手机立即绑定

Laravel 5.8:Bootstrap 数据表的雄辩分页

Laravel 5.8:Bootstrap 数据表的雄辩分页

PHP
胡子哥哥 2021-08-28 10:11:30
我找不到任何这样的问题。所有其他问题都没有像我一样使用 Bootstrap 数据表 - 他们构建了自己的表。我的 Laravel 5.8 应用程序当前返回可搜索数据表中的用户列表。问题是,它一次返回所有用户,因此页面加载速度非常慢,因为应用程序有很多用户。我的routes\web.php:Route::get('/admin/customers', 'Admin\CustomerController@renderPage')->name('admin.customers');我的app\Http\Controllers\Admin\CustomerController.php:<?phpnamespace App\Http\Controllers\Admin;use Illuminate\Http\Request;use App\Http\Controllers\Controller;use ConsoleTVs\Charts\Facades\Charts;use App\User;class CustomerController extends Controller{    public function renderPage() {        $customers = User::get();        return view('pages.admin.customers')->with([                'customers' => $customers            ]);    }}我在视图中的表格是这样resources\views\pages\admin\customers.blade.php生成的(我已经删除了不相关的 HTML 代码):<!-- Bootstrap --><link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><!-- Datatables --><link rel="stylesheet" href="/css/dataTables.bootstrap.min.css"><div class="table-responsive">    <table class="table table-condensed table-hover" id="customers-table">        <thead>            <tr>                <th>#</th>                <th>First name</th>                <th>Last Name</th>                <th>Email Address</th>            </tr>        </thead>        <tbody>            @foreach($customers as $customer)            <tr>                <td>{{ $customer->id }}</td>                <td>{{ $customer->first_name }}</td>                <td>{{ $customer->last_name }}</td>                <td>{{ $customer->email }}</td>            </tr>            @endforeach        </tbody>    </table></div><!-- Datatables --><script src="/js/jquery.dataTables.min.js"></script><script src="/js/dataTables.bootstrap.min.js"></script>                }            }        });    } );</script>所以问题是:为了添加对分页的支持,我需要更新什么?
查看完整描述

2 回答

?
拉丁的传说

TA贡献1789条经验 获得超8个赞

尝试通过 Ajax 加载 DataTable,而不是在服务器上呈现 html。


HTML


<table id="data-table" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed">

    <thead>

    <tr>

        <th>ID</th>

        <th>First name</th>

        <th>Last name</th>

        <th>E-Mail</th>

        <th>Action</th>

    </tr>

    <tfoot></tfoot>

</table>

JavaScript


const table = $('#customer-table').DataTable({

    'processing': true,

    'serverSide': true,

    'ajax': {

        'url': 'customers/list',

        'type': 'POST'

    },

    'columns': [

        {'data': 'id'},

        {'data': 'first_name'},

        {'data': 'last_name'},

        {'data': 'email'},

        {

            'orderable': false,

            'searchable': false,

            'data': null,

            'render': function (data, type, row, meta) {

                  // render custom html

                  return '<button type="button" class="btn btn-info">Edit</button>';

            }

        }

    ],

});

PHP


在服务器端获取 POST 请求参数并构建一个动态查询(使用 QueryBuilder)。


然后将结果集映射到 DataTable 兼容的 JSON 响应中:


控制器动作



// Build dynamic query

// ...


// Fetch result set

// ...


return response()->json([

    'recordsTotal' => $count,

    'recordsFiltered' => $count,

    'draw' => $draw,

    'data' => $rows,

];


查看完整回答
反对 回复 2021-08-28
?
慕妹3146593

TA贡献1820条经验 获得超9个赞

public function renderPage() {

    $customers = DB::table('users')->paginate(15);


    return view('pages.admin.customers')->with([

            'customers' => $customers

        ]);

}


查看完整回答
反对 回复 2021-08-28
  • 2 回答
  • 0 关注
  • 143 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信