在 Laravel 中使用数据表时如何加快加载表行

Question

我正在使用数据表，我面临着一个非常奇怪的情况。数据需要很长时间才能出现，尤其是在记录非常大的情况下。 我没有使用 Yajra，也没有寻找在 laravel 中使用它，数据表一切都很好，但这是我现在面临的问题，有什么解决方案可以快速处理数据吗？我知道我可能必须使用分页，但是没有 ajax 的分页是一个大问题，特别是在数据表中的搜索 希望你有解决这个问题的办法

控制器：

  public function index()
   {
    $data = User::all();

   return view('managedashboard.ownerdashboard.allcustomers.archive', compact('data'));
     }

数据表：

        TableDatatablesEditable = function() {
            var e = function() {
                var e = $("#sample_1"),
                    t = e.dataTable({
                        dom: "Bfrtip",
                        buttons: [{
                            extend: "print",
                       exportOptions: {
                             columns: ['.export'],
                                      },
                            className: "btn dark btn-outline"
                        }, {
                            extend: "pdf",
                        exportOptions: {
                             columns: ['.export'],
                                      },                       
                            className: "btn green btn-outline"
                        }, {
                            extend: 'csvHtml5',
                       exportOptions: {
                             columns: ['.export'],
                                      },


                       className: "btn-outline"
                        }],
                        language: {
                            lengthMenu: " _MENU_ records"
                        },
                        columnDefs: [{
                            orderable: !0,
                            targets: [0]
                        }, {
                            searchable: !0,
                            targets: [0]
                        }],
                        order: [
                            [2, "desc"]
                        ],
                        lengthMenu: [
                            [5, 10, 15, 20, -1],
                            [5, 10, 15, 20, "All"]
                        ],
                        pageLength: 20,
                        dom: "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
                    });
                $("#sample_editable_1_wrapper");
                e.on("click", ".delete", function(e) {
                    e.preventDefault();
                    var a = $(this).parents("tr")[0],
                        l = $(this).closest("tr").attr("id"),
                        n = {
                            _token: $("input[name='_token']").val()
                        };
                    n = jQuery.param(n), BootstrapDialog.confirm("Are you sure?", function(e) {
                        if (e) {
                            var o = n,
                                r = "/" + locationUrl[3]+"/"+locationUrl[4] + "/" + l;
                            ajaxCall("DELETE", r, o, "result", "", !1, "delete"), t.fnDeleteRow(a)
                        }
                    })
                })
            };
            return {
                init: function() {
                    e()
                }
            }
        }();
    jQuery(document).ready(function() {
        TableDatatablesEditable.init()
    });

php jquery ajax 数据集

Answer 1

试试这个例子。这只是一个例子。

根据您的要求进行更改。 包含在标题中

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>

你的桌子看起来像

<div class="row">
    <div class="col-md-12">
               <table class="table table-bordered" id="posts">
                    <thead>
                           <th>Id</th>
                           <th>Title</th>
                           <th>Body</th>
                           <th>Created At</th>
                           <th>Options</th>
                    </thead>                
               </table>
        </div>
</div>

您的 JavaScript 代码

<script>
    $(document).ready(function () {
        $('#posts').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax":{
                     "url": "{{ url('allposts') }}",
                     "dataType": "json",
                     "type": "POST",
                     "data":{ _token: "{{csrf_token()}}"}
                   },
            "columns": [
                { "data": "id" },
                { "data": "title" },
                { "data": "body" },
                { "data": "created_at" },
                { "data": "options" }
            ]    

        });
    });
</script>

最后你的控制器应该是。

public function allPosts(Request $request)
    {

        $columns = array( 
                            0 =>'id', 
                            1 =>'title',
                            2=> 'body',
                            3=> 'created_at',
                            4=> 'id',
                        );

        $totalData = Post::count();

        $totalFiltered = $totalData; 

        $limit = $request->input('length');
        $start = $request->input('start');
        $order = $columns[$request->input('order.0.column')];
        $dir = $request->input('order.0.dir');

        if(empty($request->input('search.value')))
        {            
            $posts = Post::offset($start)
                         ->limit($limit)
                         ->orderBy($order,$dir)
                         ->get();
        }
        else {
            $search = $request->input('search.value'); 

            $posts =  Post::where('id','LIKE',"%{$search}%")
                            ->orWhere('title', 'LIKE',"%{$search}%")
                            ->offset($start)
                            ->limit($limit)
                            ->orderBy($order,$dir)
                            ->get();

            $totalFiltered = Post::where('id','LIKE',"%{$search}%")
                             ->orWhere('title', 'LIKE',"%{$search}%")
                             ->count();
        }

        $data = array();
        if(!empty($posts))
        {
            foreach ($posts as $post)
            {
                $show =  route('posts.show',$post->id);
                $edit =  route('posts.edit',$post->id);

                $nestedData['id'] = $post->id;
                $nestedData['title'] = $post->title;
                $nestedData['body'] = substr(strip_tags($post->body),0,50)."...";
                $nestedData['created_at'] = date('j M Y h:i a',strtotime($post->created_at));
                $nestedData['options'] = "&emsp;<a href='{$show}' title='SHOW' ><span class='glyphicon glyphicon-list'></span></a>
                                          &emsp;<a href='{$edit}' title='EDIT' ><span class='glyphicon glyphicon-edit'></span></a>";
                $data[] = $nestedData;

            }
        }

        $json_data = array(
                    "draw"            => intval($request->input('draw')),  
                    "recordsTotal"    => intval($totalData),  
                    "recordsFiltered" => intval($totalFiltered), 
                    "data"            => $data   
                    );

        echo json_encode($json_data); 

    }