Question

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

我指的是＆＃34; https://github.com/yajra/laravel-datatables＆＃34;和＆＃34; https://datatables.net/＆＃34;

BookingController.php

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

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

web.php

/* 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 + '"/>' );
    });

booking.js

1#2017-06-13 19:00:11.247#0##2017-06-13 19:00:11.247#
2#2017-06-13 19:09:08.817#0##2017-06-13 19:00:11.247#123#
3#2017-06-13 18:44:07.980#1###
4#2017-06-13 09:39:18.367#11## #
5#2017-06-13 09:39:18.370#4###123#

Answer 1

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

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

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

如何使用laravel和数据表在html表中加载大量数据

1 个答案: