Ajax数据表在Laravel中无法正常工作

Question

我遇到了问题。

我有一个ajax Datatable，我需要通过ajax加载数据。当我实现代码Datatable分页和排序不起作用。控制台中不显示错误。不知道该怎么办。 这是我的代码...........

控制器功能

public function ajaxdata(Request $request)
    {

        $merchants  =   \DB::table('merchantsummary')->lists('id');
        $queryBuilder   =   OrderQueueModel::take($request->input('length'))
                            ->skip($request->input('start'))->select('order_queue.qid','order_queue.qorder_no','order_queue.created_at','customer.first_name','customer.last_name','merchant_queue_order.created_at as merchant_order_time')
                                        ->join('customer','customer.id','=','order_queue.customerid')
                                        ->join('merchant_queue_order','order_queue.qid','=','merchant_queue_order.order_queue_id')
                                        ->groupBy('merchant_queue_order.order_queue_id');




        $orders = $queryBuilder->get();

        $data = array();
        $i=1;
        foreach($orders as $order):
        $merchant           =   MerchantOrderQueueModel::select('merchantsummary.merchant_name','merchant_queue_order.order_queue_id')
                                                        ->join('merchantsummary','merchantsummary.id','=','merchant_queue_order.merchant_id')
                                                        ->WHERE('merchant_queue_order.order_queue_id',$order->qid)
                                                        ->get();
        $merchList = '';
        foreach($merchant as $mer):

            if($merchList!=''){
                $merchList .= ', ';
            }
            $merchList .= $mer->merchant_name;
        endforeach;
            $data[] = [ $i,
                        $order->qorder_no,
                        ucfirst($order->first_name).ucfirst($order->last_name),
                        date('d-m-Y H:i A', strtotime($order->created_at)),
                        date('d-m-Y H:i A', strtotime($order->merchant_order_time)),
                        $this->dateDifference($order->merchant_order_time,$order->created_at),
                        $merchList,
                        '<a href="'.url('admin/orderdetails',array('id' => $order->qid)).'" ><i class="fa fa-search"></i> View</a>',
                        ];
            $i++;
        endforeach;

        $totaldata = OrderQueueModel::count();
        $totalfiltered = $orders->count();

        $json_data = array(
                "draw"            => intval( $_REQUEST['draw'] ),
                "recordsTotal"    => intval( $totaldata ),
                "recordsFiltered" => intval( $totalfiltered ),
                "data"            => $data
        );

        echo json_encode($json_data);
    }

TableAjax.js

var orderRecords = function () {

        var grid = new Datatable();

        grid.init({
            src: $("#order_ajax"),
            onSuccess: function (grid) {
                // execute some code after table records loaded
            },
            onError: function (grid) {
                // execute some code on network or other general error  
            },
            onDataLoad: function(grid) {
                // execute some code on ajax data load

            },
            loadingMessage: 'Loading...',
            dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options 

                // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
                // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js). 
                // So when dropdowns used the scrollable div should be removed. 
                //"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",

                "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

                "lengthMenu": [
                    [5,10, 20, 50, 100],
                    [5,10, 20, 50, 100] // change per page values here
                ],

                "pageLength": 5, // default record count per page
                "serverSide": true,
                 "columnDefs":[
                    { // set default column settings 
                    'orderable': true, 'targets': [0] },
                    { "searchable": true, "targets": [0] },
                ],
                "ajax": {
                    "url": "order/data", // ajax source
                },
                "order": [
                    [1, "asc"]
                ]// set first column as a default sort by asc
            }
        });

        // handle group actionsubmit button click
        grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
            e.preventDefault();
            var action = $(".table-group-action-input", grid.getTableWrapper());
            if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
                grid.setAjaxParam("customActionType", "group_action");
                grid.setAjaxParam("customActionName", action.val());
                grid.setAjaxParam("id", grid.getSelectedRows());
                grid.getDataTable().ajax.reload();
                grid.clearAjaxParams();
            } else if (action.val() == "") {
                Metronic.alert({
                    type: 'danger',
                    icon: 'warning',
                    message: 'Please select an action',
                    container: grid.getTableWrapper(),
                    place: 'prepend'
                });
            } else if (grid.getSelectedRowsCount() === 0) {
                Metronic.alert({
                    type: 'danger',
                    icon: 'warning',
                    message: 'No record selected',
                    container: grid.getTableWrapper(),
                    place: 'prepend'
                });
            }
        });
    }

需要帮助!!等待回复..

Answer 1

应用服务器端数据表的最简单方法是：

Jquery的：

C

Php：$(document).ready(function() { $('#data_table').dataTable({ "sServerMethod": "POST", "bProcessing": true, "bServerSide": true, "sAjaxSource": "get_data.php" }); });

get_data.php

第一次理解代码有点困难，但它会呈现全功能的服务器端数据表