能否将DataTables搜索栏嵌入表头而非置于表格外部？

完全可以实现这个需求，直接按以下步骤修改你的代码就行：

1. 移除外部搜索栏 #

先删掉页面上原来的外部搜索栏模块：

<div class="row">
    <div class="col-md-4 mb-2">
        <div class="input-group">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <i id="searchIcon" class="fa fa-search"></i>
                    <div id="loadSpinner" class="spinner-border text-primary d-none" role="status" style="width: 24px; height: 24px;"></div>
                </div>
            </div>
            <input type="text" class="form-control" id="zoeken" placeholder="Zoek naar cursisten">
        </div>
    </div>
</div>

同时删除对应的全局搜索事件监听代码：

$('#zoeken').on('input', function() {
    var value = $(this).val();
    cursistenTable.search(value).draw();
});

2. 在DataTables初始化时添加表头筛选框 #

修改cursistenTable的初始化配置，新增initComplete回调，在表格渲染完成后给「Naam」列的表头插入专属输入框：

let cursistenTable = new DataTable('#cursistenTable', {
    dom: 'rtp',
    processing: true,
    serverSide: true,
    pageLength: 10,
    ordering: true,
    ajax: {
        url: "/sws_api/cursisten/<?php echo auth()->user()->resellerKlant()->id ?>",
        data: function(d) {
            d.excludedIds = selectedCursisten.map(item => item.id);
            d.selectedCursus = selectedCursus;
        },
    },
    columns: [
        { data: 'id', visible: false },
        { data: 'naam', title: 'Naam', render: DataTable.render.text() },
    ],
    responsive: true,
    language: {
        emptyTable: "Geen gegevens gevonden",
        zeroRecords: "Geen overeenkomende resultaten gevonden",
    },
    // 表格初始化完成后执行的回调
    initComplete: function() {
        // 定位到Naam列的表头单元格（索引为1，因为第一列是隐藏的id）
        const naamHeader = this.api().columns(1).header();
        // 插入带样式的输入框
        $(naamHeader).html(`
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" placeholder="Zoek naam..." style="width:100%;">
            </div>
        `);
        // 给输入框绑定列筛选事件
        $(naamHeader).find('input').on('input', function() {
            cursistenTable.column(1).search($(this).val()).draw();
        });
    }
});

3. 样式优化（可选） #

如果表头内的输入框显示不协调，可添加以下CSS调整：

.dataTables thead input {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    font-size: 0.9em;
}

修改完成后，「Naam」列的表头会出现专属搜索框，用户输入内容时只会筛选该列数据，完全替代原来的外部全局搜索逻辑。

内容的提问来源于stack exchange，提问作者user28906047