Laravel 8:
Error: DataTables warning: table id=example1 - Ajax error:
Description of problem: Hi,
I use laravel 8.
I have a mysql table : orders
I have a route in my web.php
Route::resource(name:'orders',controller:\App\Http\Controllers\OrdersController::class);
here is my controller :
use Illuminate\Http\Request;
use App\Models\Orders;
class OrdersController extends Controller
{
public function index()
{
$orders = Orders::all();
return view('orders.index', compact('orders'));
}
Here is my Orders class :
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Orders extends Model
{
use HasFactory;
protected $fillable = [
'site', 'number', 'amount', 'mail',
'first_name', 'last_name', 'address',
'user_updated_id',
];
}
In my app.blade.php I put the Javascript and CSS like this :
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- HTML tables datatables.net -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css"/>
<style>
td.details-control {
background: url('/images/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('/images/details_close.png') no-repeat center center;
}
</style>
In my index.blade.php I put the html code and javascript like this :
| Site | Number | Amount | ||
|---|---|---|---|---|
| Site | Number | Amount |
</x-app-layout>
<script>
console.log('00');
/* Formatting function for row details - modify as you need */
function format ( d ) {
console.log('11');
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>First Name:</td>'+
'<td>'+d.first_name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Last Name:</td>'+
'<td>'+d.last_name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Address:</td>'+
'<td>'+d.address+'</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example1').DataTable( {
"ajax": "../ajax/data/ordersObjects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "site" },
{ "data": "number" },
{ "data": "amount" },
{ "data": "mail" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example1 tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
$.fn.dataTable.ext.errMode = 'throw';
} );
</script>
And I have a empty file : ordersObjects.txt into the [myWebSite/ajax/data/ordersObjects.txt]
And I have a empty file : ordersObjects.txt into the [myWebSite/ajax/data/ordersObjects.txt]
On the Chrome's developer console I have a this message :
GET http://myWebSite:82/ajax/data/ordersObjects.txt?_=1627054814614 404 (Not Found)
Uncaught Error: DataTables warning: table id=example1 - Ajax error. For more information about this error, please see http://datatables.net/tn/7
Where I make the mistake ? 
There is surely something that I did not understand!
I missing something
Do you have an idea?
You can help me ?
Thanks
