Skip to content

Instantly share code, notes, and snippets.

@willchambers99
Created January 30, 2020 16:56
Show Gist options
  • Save willchambers99/0e857e41019ca0f6c41ec2c6fecfab41 to your computer and use it in GitHub Desktop.
Save willchambers99/0e857e41019ca0f6c41ec2c6fecfab41 to your computer and use it in GitHub Desktop.
How to construct your view for yajra datatables.
<div class="users-div">
<div class="table-responsive" style="width: 100.8%">
<table class="users-table cell-border">
<thead>
<th>User ID</th>
<th>Name</th>
<th>Actions</th>
</thead>
</table>
</div>
</div>
<script>
$(function () {
var datatable = $('.users-table').DataTable({
processing: true,
serverSide: true,
// this route points to our datatables controller that creates the table in other gist
ajax: '{{ route('datatables.data') }}',
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{
data: 'users',
sortable: false,
render: function (users, nullable, usersObject) {
let actions = '<a href="'+usersObject.view+'"title="View User"><button class="btn btn-primary btn-sm">View<i class="fa fa-eye" aria-hidden="true"></i></button></a><a href="'+usersObject.edit+'" title="Edit User"><button class="btn btn-primary btn-sm float-right">Edit <i class="fa fa-pencil-square-o" aria-hidden="true"></i></button></a>';
return actions;
}
}
],
targets: 'no-sort',
bSort: false,
paging: true,
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment