CODEWITHSUNDEEP
phplaraveldatatables
Fil
Fil

Reputation: 8863

Render checkbox in DataTables

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. enter image description here

I print the checkbox html code, My question is how to render that into checkbox?

Upvotes: 0

Views: 5285

Answers (2)

davidkonrad
davidkonrad

Reputation: 85518

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

Upvotes: 1

James Nguyễn
James Nguyễn

Reputation: 36

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

Upvotes: 1

Related Questions