第21章 JQuery DataTables对角色的渲染显示

$(document).ready(function() {
    $('#roles-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('datatables.roles') !!}',
        columns: [
            { data: 'id', name: 'id', visible: false },
            { data: 'name', name: 'name' },
            { data: 'display_name', name: 'display_name' },
            { data: 'description', name: 'description' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ],
        initComplete: function () {
            this.api().columns().every(function () {
                var column = this;
                var input = document.createElement("input");
                $(input).appendTo($(column.footer()).empty())
                    .on('change', function () {
                        column.search($(this).val(), false, false).draw();
                    });
            });
        }
    });
});

这段代码使用了JQuery DataTables插件来渲染一个ID为roles-table的表格。它配置了处理和服务器端处理模式，从指定的路由获取数据，并定义了列的数据和名称。initComplete函数用于初始化完成后，为每一列添加一个搜索输入框，以便用户可以对表格的数据进行搜索。