Render checkbox in DataTables - php

Question

I have this table,
<table class="table is-fullwidth" id="users-table">
<thead>
<tr>
<th> </th>
<th> ID </th>
<th> FIRST NAME </th>
<th> LAST NAME </th>
<th> EMAIL </th>
<th> ROLE </th>
</tr>
</thead>
<tfoot>
<tr>
<th> </th>
<th> ID </th>
<th> FIRST NAME </th>
<th> LAST NAME </th>
<th> EMAIL </th>
<th> ROLE </th>
</tr>
</tfoot>
</table>
and dataTable javascript in my index.blade.php
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: 'systemusers/data',
columnDefs: [ {
orderable: false,
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]],
columns: [
{ data: 'select', name: 'select' },
{ data: 'id', name: 'id' },
{ data: 'first_name', name: 'users.first_name' },
{ data: 'last_name', name: 'users.last_name' },
{ data: 'email', name: 'users.email' },
{ data: 'role', name: 'roles.role' },
]
});
})
</script>
and this method in my controller
public function anyData()
{
$users = UserRole::selectRaw('users.id, users.first_name, users.last_name, users.email, roles.role')
->join('users', 'users.id', '=', 'user_roles.user_id')
->join('roles', 'roles.id', '=', 'user_roles.role_id');
return Datatables::of($users)
->addColumn('select', 'systemusers::data-table.checkbox')
->make(true);
}
and for data-table\checkbox.blade.php the content is this,
<input type="checkbox" name="" value="">
This is based on the documentation found here
https://yajrabox.com/docs/laravel-datatables/master/add-column and some example here https://datatables.yajrabox.com/eloquent/add-edit-remove-column
but when I look at the output, this was the result.
I print the checkbox html code, My question is how to render that into checkbox?

Answer 1

You can try {!! '<input type="checkbox" name="" value="">' !!} instead of {{ '<input type="checkbox" name="" value="">' }}

Answer 2

Since you are using the select extension and the checkbox is supposed to work along with that, you really not need to provide a checkbox yourself.
Just add className: 'select-checkbox' to the first column, i.e
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: 'systemusers/data',
columnDefs: [{
orderable: false,
targets: 0,
className: 'select-checkbox' //<--- here
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [
[1, 'asc']
],
columns: [
{ data: 'select', name: 'select' },
{ data: 'id', name: 'id' },
{ data: 'first_name', name: 'users.first_name' },
{ data: 'last_name', name: 'users.last_name' },
{ data: 'email', name: 'users.email' },
{ data: 'role', name: 'roles.role' },
]
});
See https://datatables.net/extensions/select/examples/initialisation/checkbox.html