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> <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 Name</th>
<th>Package Ref / Name</th>
<th>Department</th>
<th>Contact Person</th>
<th>Telephone Number</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Select</th>
<th>Supplier Name</th>
<th>Package Ref / Name</th>
<th>Department</th>
<th>Contact Person</th>
<th>Telephone 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
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:
And here is the solution: