我有一个 laravel 应用程序，它显示带有数据 table 的 table。我正在使用 serverSide Datatables，数据集超过 15k 行

Question

我有一个 laravel 应用程序显示 table 和 YajraDatatable，数据是从 mongoDB 中获取的。我正在使用 serverSide Datatables，数据集有超过 20k 行。它真的很慢，给我错误 500 服务器错误。如果我将限制设置为 50000，则一切正常，每页 100 条记录或 10 条记录页需要一些时间。

/* 控制器功能 */

            $certificates =  DatatableUtils::checkRole('AddJob')
                ->with('fittingType:name')
                ->with('company:name')
                ->with('hosType:name')
                ->with('location')
                ->where('isScraped',false)
                ->select('created_at', 'trackingNumber', 'unit', 'location_id', 'diameterNumber', 'lengthFeet', 'lengthInch', 'hawpPsi', 'job_status', 'fittingId','hoseTypeId','companyId','image')
                ->orderBy('created_at','desc');
            return Datatables::of($certificates)->addIndexColumn()
                ->filter(function ($instance) use ($request) {
                    DatatableUtils::searchColumn($request, $instance);

                    /* Main filter */
                    DatatableUtils::mainFilter($request, $instance);
                })
                ->editColumn('staticTestDate', function($row){
                    return date('d/M/Y', strtotime($row->staticTestDate));
                })
                ->editColumn('image', function($row){
                    return DatatableUtils::getImg($row);
                })
                ->editColumn('staticReTestDate', function($row){
                    return date('d/M/Y', strtotime($row->staticReTestDate));
                })

                ->addColumn('date_created', function($row){
                    return $row->created_at;
                })
                ->editColumn('status', function($row){
                    $status = '';
                    for ($i = 0; $i < $row->job_status; $i++){
                        $status =  $status.'<div class="glyph">
                             <div class="glyph-icon simple-icon-star ml-1"></div>
                         </div>';
                    }
                    return '<div class="display-ruby">'.$status.'</div>';
                })
                ->addColumn('length', function($row){
                    return $row->lengthFeet .' / ' . $row->lengthInch;
                })
                ->addColumn('action', function($row){
                    return '<a href="'.route('certificates.show', $row['_id']).'" class="edit btn btn-outline-primary btn-sm">View</a>';
                })
                ->rawColumns(['status','Length', 'reasons', 'action','date_created'])
                ->make(true);
        }

/* 可数据通用函数 */

    const columnsName = [];
    if (createdRow){
        $("#"+id+ " thead tr th").each(function(index){
            columnsName.push(this.innerHTML);
        });
    }
    const table = $("#"+id).DataTable({
        bLengthChange: false,
        processing: true,
        serverSide: true,
        pageLength: 10,
        ajax: {
            url: url,
            type: "get",
            dataType: "json",
            data: function (d) {
                // filters
                d.dateFilterMain     = $('#dateFilterMain').val()
                d.statusFilterMain   = $('#statusFilterMain').val()
                d.companyFilterMain  = $('#companyFilterMain').val()
                d.locationFilterMain = $('#locationFilterMain').val()
                d.YearFilterMain     = $('#YearFilterMain').val()
                d.companyFilter      = $('#companyFilter').val()

                // company filter location
                d.cFilterLocation    = $('#cFilterLocation').val()

                // searches
                d.searchDate         = $('#searchDate').val();
                d.searchCompany      = $('#searchCompany').val();
                d.searchType         = $('#searchType').val();
                d.searchUnit         = $('#searchUnit').val();
                d.searchLocation     = $('#searchLocation').val();
                d.searchStatus       = $('#searchStatus').val();
                d.searchTracking     = $('#searchTracking').val();
                d.searchFittings     = $('#searchFittings').val();
                d.searchRepairedBy   = $('#searchRepairedBy').val();

                // reasons searches
                d.searchFitting      = $('#searchFitting').val();
                d.searchClamp        = $('#searchClamp').val();
                d.searchTube         = $('#searchTube').val();
                d.searchCover        = $('#searchCover').val();

                // searches company
                d.cSearchDate        = $('#cSearchDate').val();
                d.cSearchName        = $('#cSearchName').val();
                d.cSearchCode        = $('#cSearchCode').val();
                d.cSearchSRetest     = $('#cSearchSRetest').val();
                d.cSearchHRetest     = $('#cSearchHRetest').val();
                d.cSearchVRetest     = $('#cSearchVRetest').val();
                d.cSearchNextNumber  = $('#cSearchNextNumber').val();
                d.cSearchEmail       = $('#cSearchEmail').val();
                d.cSearchPhone       = $('#cSearchPhone').val();


                // searches company user
                d.cUserName          = $('#cUserName').val();
                d.cUserEmail         = $('#cUserEmail').val();
                d.cUserPhone         = $('#cUserPhone').val();
                d.cUserCompany       = $('#cUserCompany').val();
                d.cUserStatus        = $('#cUserStatus').val();

                // searches location
                d.searchLocationName = $('#searchLocationName').val();
                d.searchLocationCode = $('#searchLocationCode').val();
                d.searchLocationNum  = $('#searchLocationNum').val();

                d.searchHoseName     = $('#searchHoseName').val();

                // searches fitting
                d.searchFittingName       = $('#searchFittingName').val();
                d.searchFittingDiam       = $('#searchFittingDiam').val();
                d.searchFittingType       = $('#searchFittingType').val();
                d.searchFittingVendor     = $('#searchFittingVendor').val();
            }
        },
        createdRow: function (row, data, dataIndex) {
            $(row).find('td').addClass('text-center');
            if (createdRow) {
                $.each(columnsName, function (key, column) {
                    if (column === data.month) {
                        $(row).find('td:eq(' + (parseInt(key) - 1) + ')').text(data.date);
                        $(row).find('td:eq(' + (parseInt(key) - 1) + ')').addClass(data.badge);
                    }
                });
            }
        },
        columns: dataColumns,
        buttons: [
            'copy',
            'excel',
            'csv',
            'pdf'
        ],
        destroy: true,
        info: false,
        sDom: '<"row view-filter"<"col-sm-12"<"float-left"l><"float-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
        columnDefs: [
            { "orderable": false, "targets": 0 }
        ],
        language: {
            paginate: {
                previous: "<i class='simple-icon-arrow-left'></i>",
                next: "<i class='simple-icon-arrow-right'></i>"
            }
        },
        drawCallback: function () {
            $($(".dataTables_wrapper .pagination li:first-of-type")).find("a").addClass("prev");
            $($(".dataTables_wrapper .pagination li:last-of-type")).find("a").addClass("next");
            $(".dataTables_wrapper .pagination").addClass("pagination-sm");
            const api = $(this).dataTable().api();
            $("#pageCountDatatable span").html("Displaying " + parseInt(api.page.info().start + 1) + "-" + api.page.info().end + " of " + api.page.info().recordsTotal + " items");
        }
    });
    // filter
    $('#companyFilter').on('change', function () {
        table.draw();
    } )
    $('#cFilterLocation').on('change', function () {
        table.draw();
    } )
    // searches
    $("#searchDate").on("keyup", function() {
        table.draw();
    });
    $('#searchTracking').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchCompany').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchUnit').on( 'keyup', function () {
        table.draw();
    } );
    $('#searchLocation').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchType').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchStatus').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchFittings').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchRepairedBy').on( 'keyup', function () {
        table.draw();
    } )

    $('#searchFitting').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchCover').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchTube').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchClamp').on( 'keyup', function () {
        table.draw();
    } )

    // company searches
    $('#cSearchDate').on( 'keyup', function () {
        table.draw();
    } )
    $('#cSearchName').on( 'keyup', function () {
        table.draw();
    } )
    $('#cSearchCode').on( 'keyup', function () {
        table.draw();
    } )
    $('#cSearchSRetest').on( 'keyup', function () {
        table.draw();
    } )
    $('#cSearchHRetest').on( 'keyup', function () {
        table.draw();
    } )
    $('#cSearchVRetest').on( 'keyup', function () {
        table.draw();
    } )
    $('#cSearchNextNumber').on( 'keyup', function () {
        table.draw();
    } )
    $('#cSearchEmail').on( 'keyup', function () {
        table.draw();
    } )
    $('#cSearchPhone').on( 'keyup', function () {
        table.draw();
    } )

    // searches company user
    $('#cUserName').on( 'keyup', function () {
        table.draw();
    } )
    $('#cUserEmail').on( 'keyup', function () {
        table.draw();
    } )
    $('#cUserPhone').on( 'keyup', function () {
        table.draw();
    } )
    $('#cUserCompany').on( 'keyup', function () {
        table.draw();
    } )
    $('#cUserStatus').on( 'keyup', function () {
        table.draw();
    } )

    // searches location
    $('#searchLocationNum').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchLocationCode').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchLocationName').on( 'keyup', function () {
        table.draw();
    } )

    // hose type search
    $('#searchHoseName').on( 'keyup', function () {
        table.draw();
    } )

    // fitting type search
    $('#searchFittingVendor').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchFittingType').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchFittingDiam').on( 'keyup', function () {
        table.draw();
    } )
    $('#searchFittingName').on( 'keyup', function () {
        table.draw();
    } )

    $("#pageCountDatatable .dropdown-menu a").on("click", function(event) {
        const selText = $(this).text();
        table.page.len(parseInt(selText)).draw();
    });
    $('#btnFilterSubmit').click(function(){
        table.draw();
    });
    $('table thead tr').find('th').addClass('text-center');
}

Answer 1

显然 YajraDatatable 不太适合table 大数据。相反，您应该使用 ->paginate() 方法创建自己的 table。您可以使用 Jquery.

更动态地编写

Answer 2

在 MongoDB 中使用 YajraDatatable 时。我们必须将 post 数据类型 'start' 和 'length' 从字符串转换为整数。

我们必须在调用 YajraDatatable 之前进行此类型转换。

$request->merge(array( 
    'start' => (int)$request->input('start'), 
    'length' => (int)$request->input('length') 
));

我有一个 laravel 应用程序，它显示带有数据 table 的 table。我正在使用 serverSide Datatables，数据集超过 15k 行

I have a laravel app that displays a table with Datatables. I am using serverSide Datatables, the dataset has morethan 15k rows

datatable

mongodb

laravel

yajra-datatable