数据表不想从 API 中提取数据

Question

这是我第一次尝试数据表。我想显示来自 API 的数据，这个方法是 get 但数据不想出现，只出来 "loading"

我的脚本

 $(document).ready(function(){  
      $('#data-table').DataTable({  
           "ajax"     : "127.0.0.1:8080/api/v2/client/vendor",  
           "type"     : "GET",
           "columns"     :     [  
                {     "data"     :     "id"     },  
                {     "data"     :     "name"},  
                {     "data"     :     "class"}  
           ]  
      });  
 });  

我的响应 API

{
    "status": "success",
    "data": [
        {
            "id": 2,
            "name": misry,
            "class": 115

        },
        {
           "id": 2,
            "name": ahmad,
            "class": 76
        },

Answer 1

您可以导入 Datatables 外观。

 use Datatables;

创建一个方法来显示我们的视图和一个方法来处理我们的数据表 ajax 请求和控制器看起来像这样

namespace App\Http\Controllers;

use App\Http\Requests;
use App\User;
use Yajra\Datatables\Datatables;

class DatatablesController extends Controller
{
    /**
     * Displays datatables front end view
     *
     * @return \Illuminate\View\View
     */
    public function getIndex()
    {
        return view('datatables.index');
    }

    /**
     * Process datatables ajax request.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function anyData()
    {
        return Datatables::of(User::query())->make(true);
    }
}

让我们创建我们的视图和脚本 Ajex 调用

@push('scripts')
    <script>
    $(function() {
        $('#data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('datatables.data') !!}',
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'class', name: 'class' }
            ]
        });
    });



         </script>
     @endpush

在 app\Htpp\routes.php 中注册数据表路由

Route::controller('datatables', 'DatatablesController', [
    'anyData'  => 'datatables.data',
    'getIndex' => 'datatables',
]);

Answer 2

试试..请添加 csrf 令牌

 $(document).ready(function(){  
      var table = $('#data-table').DataTable({  
           "processing": true,
           "serverSide": true,
           "ajax"     : "127.0.0.1:8080/api/v2/client/vendor",  
           "type"     : "post",
           "data": function ( d ) {
                    d._token = "{{ csrf_token() }}";

                },
           "columns"     :     [  
                {"data":"id"},  
                {"data":"name"},  
                {"data":"class"}  
           ]  
      });  
 });