DataTables 警告：table id=DataTables_Table_0 - Ajax 错误 - Laravel

Question

我在尝试为我的 laravel 项目设置数据 table 时遇到错误。

DataTables 警告：table id=DataTables_Table_0 - Ajax 错误。有关此错误的详细信息，请参阅 http://datatables.net/tn/7

这是我的控制器。

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Transaction;
use DataTables;
use Illuminate\Support\Facades\DB;

class TestTableController extends Controller
{
public function index()
{
    return view('testtable');
}


public function getTestTable(Request $request)
{
    if ($request->ajax()) {
        $data = DB::table('transactions')->get();
        return Datatables::of($data)
            ->addIndexColumn()
            ->addColumn('action', function($row){
                $actionBtn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
                return $actionBtn;
            })
            ->rawColumns(['action'])
            ->make(true);
    }
}
}

这是我的路线。

Route::get('testtable', [TestTableController::class, 'index']);
Route::get('testtable/list', [TestTableController::class, 'getTestTable'])->name('testtable.list');

View/blade.

<body>
<div class="container mt-5">
    <h2 class="mb-4">Laravel 7|8 Yajra Datatables Example</h2>
    <table class="table table-bordered yajra-datatable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Amount</th>
                <th>Charge</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
</script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"> 
</script>

<script type="text/javascript">
$(function () {

var table = $('.yajra-datatable').DataTable({
    processing: true,
    serverSide: true,
    ajax: "{{ route('testtable.list') }}",
    columns: [
        {data: 'id', name: 'id'},
        {data: 'amount', name: 'amount'},
        {data: 'charge', name: 'charge'},
        {
            data: 'action',
            name: 'action',
            orderable: true,
            searchable: true
        },
    ]
});

});
</script>

这是来自 laravel 调试栏的错误。

但是查询确实有结果。

这是我回显查询时的输出。

$data = DB::table('transactions')->get();
echo $data;

还有什么我想念的吗？如果我在新的 laravel 安装中进行测试，则完全相同的代码可以正常工作。这是我尝试实现 datatables 的现有项目。我想一定是当前项目配置中的某些东西导致了这个问题。

Answer 1

如果应用程序代码一切正常，你可能会松开 yajra 的配置.. 所以要配置它，您可以转到应用程序根目录中的配置文件夹，然后从那里打开 app.php 文件并将此行添加到提供程序..

Yajra\DataTables\DataTablesServiceProvider::class

结果将是这样的：

    'providers' => [
     ..
     .. 
     ..
Yajra\DataTables\DataTablesServiceProvider::class,
    ]

并将此行添加到别名中：

Yajra\DataTables\Facades\DataTables::class

这样试试：

'aliases' => [
 ..
 ..
 ..
 ..
 'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]

最后，像上面一样保存文件（config\app.php），然后打开 cmd 或终端并尝试使用 fallowing 清除应用缓存文件（包括配置缓存）命令：

php artisan optimize

Answer 2

我与我的项目中的示例代码分享了完整的详细信息，下面的示例代码是我项目中的管理角色数据表。请逐步参考并尝试理解它。

首先你需要使用下面的 Composer 命令安装Laravel Yajra DataTable

composer require yajra/laravel-datatables-oracle

然后在 web.php 中定义路由之后，就像我的示例代码一样

Route::get('/', [\App\Http\Controllers\Admin\RoleController::class, 'index'])->name('admin.roles.index');  //index all the data view...

Route::post('/', [\App\Http\Controllers\Admin\RoleController::class, 'getIndexUsers'])->name('admin.roles.getIndexRoles');  //Get Users for Laravel Yajra Datatable Index Page record...

然后在为其创建视图文件后，我从我的项目中分享示例

<div class="card-body">
   <table id="role_table" class="table table-bordered table-striped w-100">
       <thead>
          <tr>
             <th>No.</th>
             <th>Role Name</th>
             <th>Role Slug</th>
             <th>Action</th>
          </tr>
       </thead>
                  
       <tfoot>
            <tr>
               <th>No.</th>
               <th>Role Name</th>
               <th>Role Slug</th>
               <th>Action</th>
            </tr>
       </tfoot>
   </table>
</div>
<!-- /.card-body -->

& 在页脚脚本中定义用于初始化 DataTable 的函数，如下所示，

<script type="text/javascript">
    var dataTable = $('#role_table').DataTable({
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        processing: true,
        serverSide: true,
        order: [],
        searchDelay: 500,
        "scrollX": "auto",
        "responsive": true,
        // "lengthChange": false,
        "autoWidth": true,
        ajax: {
            url: '{{ route("admin.roles.getIndexRoles")}}',
            type: 'post',
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          data: function (data) {
                // data.fromValues = $("#filterUserType").serialize();
            },
        },
        columns: [
            {data: 'SrNo', //try with data: 'SrNo' OR data: 'id',
                render: function (data, type, row, meta) {
                    // return meta.row + meta.settings._iDisplayStart + 1;
                    return meta.row + 1;
                }, searchable: false, sortable: false
            },
            {data: 'role_name', name: 'role_name'},
            {data: 'role_slug', name: 'role_slug'},
            {data: 'action', name: 'action', searchable: false, sortable: false},
        ],
    });
  </script>

然后在您的控制器中 加载 Yajra DataTable Class 以供使用

use Yajra\DataTables\DataTables; //for Laravel DataTable JS...

现在，像这样创建显示视图文件的函数，

public function index()
{
    return view('admin.roles.index');
}

现在我为 Ajax 请求 DataTable 初始化

创建了函数方法

public function getIndexUsers(Request $request)
{
    $roles = Role::select('roles.*');
    if($request->order ==null){
        $roles->orderBy('id', 'desc');
    }
    $detail_data = $roles;
    return Datatables::of($detail_data)
        ->addColumn('action', function ($data) {
            return $this->DataTableAction($data);
        })
    ->rawColumns(['action'])
    ->make(true);
}

public function DataTableAction($data){
    $btn = '<div class="btn-group">';
        if($data->id == "1" || $data->id == "2"){
            $btn .= '<button type="button" class="btn btn-danger dropdown-toggle ml-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>Action
                </button>';
        }else{
            $btn .= '<button type="button" class="btn btn-danger dropdown-toggle ml-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action
                    </button>';
        }
            $btn .= '<div class="dropdown-menu">';
            $btn .= '<a class="dropdown-item" href="'.route('admin.roles.edit',$data->id).'" style="color: black;" onmouseover=\'this.style.background="#dee2e6"\' onmouseout=\'this.style.background="none"\'><i class="far fa-edit text-primary"></i> Edit</a>';
            $btn .= '<div class="dropdown-divider"></div>';
            $btn .= '<a role_id="'.$data->id.'" class="dropdown-item deleteRole" href="#" style="color: black;" onmouseover=\'this.style.background="#dee2e6"\' onmouseout=\'this.style.background="none"\'><i class="far fa-trash-alt text-danger"></i> Delete</a>';
    $btn .= '</div>
        </div>';
    return $btn;
}

重要提示：-目前我使用Laravel 8 所以，没必要定义 Yajra 服务提供商 Class 在 config/app.php 中。但是，如果您在不同的 Laravel 版本中遇到任何错误，那么您需要在 config/app.php... 中定义 Yajra Service Provider Class 以定义它步骤

**

Note that, below step not compulsory, its depends on your Laravel version

**

config/app.php

.....
'providers' => [
    ....
    Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
    ....
    'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....

然后运行命令下方

php artisan optimize

如果遇到任何问题，请尝试使用

清除缓存

php artisan cache:clear

Important Note:- If you define Service Provider Class in config/app.php & run optimize command, then May be Laravel will load it in autoload which is automatically called when your code references a class or interface that hasn't been loaded yet, I'm not sure

Answer 3

您在 getTestTable 函数中的代码看起来不错。您进入了调试栏：

No query results for model [App\Frontend] testtable

但是 getTestTable 中的代码与 testtable 没有任何关系，所以我猜 route('testtable.list') 没有得到那个函数。原因可能是因为你在 Route::get('testtable/list', 之前放了一条像 Route::get('testtable/{id}',... 这样的路由，所以当你调用 testtable/list 时，它将把 list 当作 id 并转到其他函数。

如果我的猜测是正确的，你可以通过在 testtable/{id} 路由之前放置 testtable/list 来修复它。

DataTables 警告：table id=DataTables_Table_0 - Ajax 错误 - Laravel

DataTables warning: table id=DataTables_Table_0 - Ajax error - Laravel

php

datatables

laravel