Render checkbox in DataTables

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?

Seems like laravel is escaping html special characters for the cell/column — user2575725
– user2575725, Commented Sep 20, 2018 at 3:59
@Fil.you can use Raw Column yajrabox.com/docs/laravel-datatables/master/raw-columns — Vision Coderz
– Vision Coderz, Commented Sep 20, 2018 at 4:00

James Nguyễn · Accepted Answer · 2018-09-20 04:37:22Z

1

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

answered Sep 20, 2018 at 4:37

James Nguyễn

362 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

davidkonrad · Accepted Answer · 2018-09-20 08:09:51Z

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

Collectives™ on Stack Overflow

Render checkbox in DataTables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related