DataTables warning: table id=example1 - Ajax error

DataTables warning: table id=example1 - Ajax error

tontonodilontontonodilon Posts: 2Questions: 1Answers: 0

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
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',


In my app.blade.php I put the Javascript and CSS like this :
<title>{{ config('', 'Laravel') }}</title>

        <!-- HTML tables  -->
        <script type="text/javascript" src=""></script>
        <script type="text/javascript" src=""></script>
        <link rel="stylesheet" type="text/css" href=""/>
            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;

In my index.blade.php I put the html code and javascript like this :

Site Number Amount Mail
Site Number Amount Mail

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<td>First Name:</td>'+
            '<td>Last Name:</td>'+
$(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
        else {
            // Open this row
            row.child( format( ).show();
    } );

    $.fn.dataTable.ext.errMode = 'throw';
} );


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

Where I make the mistake ? :neutral:
There is surely something that I did not understand! :neutral:
I missing something :neutral:
Do you have an idea? :neutral:
You can help me ? :neutral:


This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 15,776Questions: 25Answers: 3,737
    Answer ✓

    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.


  • tontonodilontontonodilon Posts: 2Questions: 1Answers: 0

    Thanks Kevin,
    you are right, my path (to ordersOjects.txt) was wrong.

Sign In or Register to comment.