Question

我有这张桌子，

    <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>

和我index.blade.php中的dataTable javascript

<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>

以及此方法在我的控制器中

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);
}

对于data-table\checkbox.blade.php，内容就是这个，

<input type="checkbox" name="" value="">

这是基于此处的文档 https://yajrabox.com/docs/laravel-datatables/master/add-column和此处的一些示例https://datatables.yajrabox.com/eloquent/add-edit-remove-column

但是当我查看输出时，这就是结果。

我打印复选框html代码，我的问题是如何将其呈现到复选框中？

Answer 1

您可以尝试用{!! '<input type="checkbox" name="" value="">' !!}代替{{ '<input type="checkbox" name="" value="">' }}

Answer 2

由于您使用的是select扩展名，并且复选框应该与之配合使用，因此您实际上不需要自己提供一个复选框。

只需将className: 'select-checkbox'添加到第一列，即

$('#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' },
  ]
});

请参见 https://datatables.net/extensions/select/examples/initialisation/checkbox.html

数据表中的渲染复选框

2 个答案: