Datatables not populating using laravel v6.0, datatables v1.10.20 and yajra/laravel-datatables-oracle v9.10

Question

As mentioned above, my datatable isn't populating using the versions mentioned in the subject line above!

Below is some of my code as well as a Code Snippet.

oSupplierTable = $( "#supplier-table" ).dataTable({
   ajax: "{{ url( 'admin/supplier/get-suppliers' ) }}"
   ,columns: [
    {
     data:   "supplier_id",
     render: function ( data, type, row ) {
      if ( type === 'display' ) {
       return "<input class=\"editor-active\" type=\"checkbox\" value=" + data + " />";
      }
      return data;
     },
     className: "dt-body-center"
    }
    ,{ "class": "nowrap", "data": 'supplier_name', "targets": 2 }
    ,{ "data": 'supplier_reference', "targets": 3 }
    ,{ "data": 'department', "targets": 4 }
    ,{ "data": 'contact_person', "targets": 5 }
    ,{ "data": 'telephone_number', "targets": 6 }
    ,{ "data": 'email', "targets": 7 }
    ,{
     data:   "supplier_id",
     render: function ( data, type, row ) {
      if ( type === 'display' ) {
       return "<a onclick=\"open_supplier_dialog('" + data + "');\">Edit</a>&nbsp;<a onclick=\"delete_supplier('" + data + "');\">Delete</a>";
      }
      return data;
     },
     className: "dt-body-center"
    }
   ]
   ,fixedColumns:   {
    leftColumns: 1,
    rightColumns: 1
   }
   ,"pagingType": "full_numbers"
   ,processing: true
   ,serverSide: true
   ,scrollCollapse: true
   ,scrollX: true
   ,stateSave: true
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css" rel="stylesheet"/>
<table class="dataTable" id="supplier-table">
  <thead>
            <tr>
                <th>Select</th>
                <th>Supplier&nbsp;Name</th>
                <th>Package&nbsp;Ref&nbsp;/&nbsp;Name</th>
                <th>Department</th>
                <th>Contact&nbsp;Person</th>
    <th>Telephone&nbsp;Number</th>
    <th>Email</th>
    <th>Action</th>
            </tr>
        </thead>
  <tfoot>
            <tr>
                <th>Select</th>
                <th>Supplier&nbsp;Name</th>
                <th>Package&nbsp;Ref&nbsp;/&nbsp;Name</th>
                <th>Department</th>
                <th>Contact&nbsp;Person</th>
    <th>Telephone&nbsp;Number</th>
    <th>Email</th>
    <th>Action</th>
            </tr>
        </tfoot>
 </table>

Here is a snippet of my routes/web.php file:

Route::get('admin/supplier/get-suppliers', 'Auth\SupplierController@getData');

Here is a snippet of my Controller:

use App\Models\Supplier as supplier;
use Yajra\Datatables\Datatables;

class SupplierController extends Controller
{
    public function getData() {
        return Datatables::of(Supplier::query())->make(true);
    }
....
}

Here is a snippet of my Model:

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Http\Request;
use Yajra\DataTables\DataTable;

class Supplier extends Model
{
    public static function getSupplier(Supplier $model) {
        return $model->all();
    }
....
}

The data is returned correctly when viewing Developer Tools > Network > Preview as shown below:

> {draw: 1, recordsTotal: 1, recordsFiltered: 1,…}
data: [{supplier_id: "1", supplier_name: "NOX Rentals", supplier_reference: "", department: "", 
…}]        
draw: 1
input: {draw: "1", columns: [{data: "supplier_id", name: null, searchable: "true", orderable: "true",…},…],…}
queries: [{,…},…]
recordsFiltered: 1
recordsTotal: 1

score 0 · Answer 1 · answered Apr 29 '20 at 16:13

I found my problem to the issue I was experiencing!

I was referencing jQuery twice, once in the <head> and again at the bottom before the </body> tags, hence the dataTable not rendering correctly.

Below is a code snippet of the issue:

<head>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    ...
</head>
<body>
    ....
    <script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
    ...
</body>

And here is the solution:

<head>
    <!-- Scripts -->
    <!-- <script src="{{ asset('js/app.js') }}" defer></script> -->
    ...
</head>
<body>
    ....
    <script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
</body>

Datatables not populating using laravel v6.0, datatables v1.10.20 and yajra/laravel-datatables-oracle v9.10

1 Answers1