如何使用 laravel 和数据表在 html 表中加载海量数据答案

【问题标题】：How to load huge data in html table using laravel and data table如何使用 laravel 和数据表在 html 表中加载海量数据
【发布时间】：2017-11-25 11:01:29
【问题描述】：

我有一个预订数据。目前它有10000行。如何在不占用太多加载时间的情况下使用 laravel 和 datatable 列出数据。目前我曾尝试列出预订，但初始加载需要 20 秒。当前使用 ajax 请求从数据库中获取所有数据。请检查我的代码并纠正我。

我指的是“https://github.com/yajra/laravel-datatables”和“https://datatables.net/”

BookingController.php

    public function index()
    {
      return view('backend.bookings'/*, ['bookingDetails' => $bookings]*/);
    }

    public function dataTables(Request $request)
    {
        $bookings = Booking::where('is_delete', 0)
            ->get();

        // Functionality for laravel datatables
        $bookingDetails = Datatables::collection($bookings)
            ->addColumn('action', function ($bookings) {
                return '<a href="/bookings/'.$bookings->_id.'" class="btn btn-xs btn-danger deleteEvent" data-id="'.$bookings->_id.'"><i class="glyphicon glyphicon-trash"></i> Delete</a>';
            })
            ->make(true);

        return $bookingDetails;
    }

web.php

    /* Listing bookings */
        Route::get('/bookings', 'BookingController@index');

   /* Show datatable page */
        Route::post('/bookings/datatables', 'BookingController@dataTables')->name('bookings.datatables');

booking.js

/* Functionality for data table begin */
    var table = $('#dataTable').DataTable({
        /*"processing": true,
        "serverSide": true,*/
        /*"dom": '<"toolbar">frtip',*/
        "order": [],
        "ajax": {
            "type": "POST",
            "url": '/admin/bookings/datatables',
            "contentType": 'application/json; charset=utf-8',
            "data": { "_token": "" }
        },
        /*"ajax": '/bookings/datatables',*/
        "dataType": "jsonp",
        "columns": [
        {"data": function(data){
            return '<input type="checkbox" name="id[]" value="'+ data._id +'" />';
        }, "orderable": false, "searchable": false, "name":"_id" },
        {"data": function ( data ) {
            if(!data.invoice_number){
                return '<span class="label label-default">No data</span>'
            }
            else {
                return '<a class="nounderline modalBooking" data-toggle="modal" data-target="#bookingModal_'+ data._id +'" data-modalID="'+ data._id +'">'+data.invoice_number+'</a>';
            }
        }, "name": "invoice_number"},
        {"data": "usrEmail", "name": "usrEmail"},
        {"data": "checkin_from", "name": "checkin_from"},
        {"data": "reserve_to", "name": "reserve_to"},
        {"data": "beds", "name": "beds"},
        {"data": "dormitory", "name": "dormitory"},
        {"data": "sleeps", "name": "sleeps"},
        {"data": "status", "name": "status"},
        {"data": "payment_status", "name": "payment_status"},
        {"data": "payment_type", "name": "payment_type"},
        {"data": "total_prepayment_amount", "name": "total_prepayment_amount"},
        {"data": "txid", "name": "txid"},
        {"data": "action", "name": "action", "orderable": false, "searchable": false}
    ],
        "columnDefs": [{
        "defaultContent": "-",
        "targets": "_all"
    }],
});

    $('#dataTable tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search ' + title + '"/>' );
    });

【问题讨论】：

标签： laravel-5 datatables laravel-5.4

【解决方案1】：

我遇到了同样的问题，现在我决定采用另一种方法，该方法依赖于 APIs 并将数据库保存在客户端上。

基本上，客户端在连接时下载数据库并将其存储在 JSON 变量中。加载页面时，您只需传递一个Vue component 即可拉取数据库并呈现表格。

如果您希望维护当前系统，您可以使用pagination，但任何类型的数据过滤都应通过另一个 AJAX 请求进行管理，而不是依赖客户端。

【讨论】：