DataTables warning: table id=example1 - Ajax error
DataTables warning: table id=example1 - Ajax error
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
This question has an accepted answers - jump to answer
Answers
The 404 Not Found error means your server could not find the path in the URL. You will need to look at your web server logs and configuration to determine why it can find the path to
ajax/datat/ordersObjects.txt
.Kevin
Thanks Kevin,
you are right, my path (to ordersOjects.txt) was wrong.