Laravel项目中将默认DataTable改造为服务端渲染的问题求助

1. 调整前端HTML结构 #

服务端渲染模式下DataTables会自动异步拉取数据填充表格，不需要提前在blade中循环渲染tbody内容，调整后的HTML代码如下：

<div class="panel-body">
    <table id="datatable" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>id</th>
                <th>RS</th>
                <th>Secteur</th>
                <th>Telephone</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <!-- 留空，由DataTables自动渲染 -->
        </tbody>
    </table>
</div>
<!-- 提前定义编辑路由前缀，方便JS拼接参数 -->
<script>
const EDIT_ROUTE_PREFIX = "{{ route('CP_edit', ['id' => '']) }}";
</script>

2. 修正DataTables JS配置 #

你之前的配置列数和thead不匹配，缺少操作列的配置，所以会出现渲染异常，调整后的JS代码如下：

$(document).ready(function () {
    $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('CP') }}",
        columns: [
            { data: "id" },
            { data: "RS" },
            { data: "secteur" },
            { data: "Tel1" },
            {
                data: null,
                orderable: false, // 操作列不需要排序
                searchable: false, // 操作列不需要搜索
                render: function (data) {
                    // 拼接操作按钮
                    let btnHtml = `<div style="display:flex">
                        <div>
                            <a href="${EDIT_ROUTE_PREFIX}/${data.id}">
                                <button style="background-color:#584F6C" type="button" class="btn btn-secondary btn-sm"> Modifier</button>
                            </a>
                        </div>
                        <div style="margin-left:20px">`;
                    if (data.active == 0) {
                        btnHtml += `<a onclick="activate(this)" data-id="${data.id}">
                            <button style="background-color:#3CB371" type="button" class="btn btn-secondary btn-sm" value="${data.active}"> Activate</button>
                        </a>`;
                    } else {
                        btnHtml += `<a onclick="activate(this)" data-id="${data.id}">
                            <button style="background-color:#B22222" type="button" class="btn btn-secondary btn-sm" value="${data.active}"> Deactivate</button>
                        </a>`;
                    }
                    btnHtml += `</div></div>`;
                    return btnHtml;
                }
            }
        ]
    });
});

原有activate函数无需修改，可直接复用。

3. 后端服务端逻辑适配 #

使用Laravel适配的DataTables扩展包处理后端逻辑即可：

1. 安装扩展包

composer require yajra/laravel-datatables-oracle

2. 编写路由对应的控制器方法，示例代码如下：

use App\Models\Company;
use Yajra\DataTables\Facades\DataTables;

public function getCompanyList()
{
    return DataTables::of(Company::query())
        // 按需添加字段处理逻辑即可
        ->rawColumns(['action'])
        ->make(true);
}

3. 确认CP路由指向上述控制器方法即可正常运行。

内容的提问来源于stack exchange，提问作者mnm.mtl