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.
But the query did have results.
This is the output if I echo the query.
$data = DB::table('transactions')->get();
echo $data;
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.
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.