phplaraveldatatables

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

I'm getting an error when trying to setup a datatables with my laravel project.

DataTables warning: table id=DataTables_Table_0 - Ajax error. For more information about this error, please see http://datatables.net/tn/7

This is my controller.

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);
    }
}
}

This my route.

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>

This is the error from laravel debugbar.

Text

But the query did have results.

This is the output if I echo the query.

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

Text

Anything else I'm missing? The exact same code is working if I tested in a new fresh laravel installation. This is an existing project that I try to implement datatables. I guess there must be something from current project configuration that causing the issue.

Solution

  • Your code in getTestTable function look fine. You got in the debugbar:

    No query results for model [App\Frontend] testtable

    But the code in getTestTable has nothing related to testtable so I guess route('testtable.list') doesn't get to that function. And the reason may be because you put a route like Route::get('testtable/{id}',... before Route::get('testtable/list', so when you call testtable/list, it will take list as id and go to other function.

    If my guess is true, you can fix it by putting testtable/list before testtable/{id} route.