Можно ли интегрировать панель поиска в заголовок таблицы (DataTables) вместо того, чтобы размещать ее снаружи? ⇐ Php

[Anonymous]

При работе с DataTables я хотел бы переместить панель поиска, которая в настоящее время находится за пределами таблицы, непосредственно в заголовок таблицы. Например, у меня есть столбец с надписью «Имя», и я хочу поместить поле ввода текста в заголовок этого столбца, чтобы пользователи могли фильтровать данные по имени. Вопрос в том, возможно ли это с помощью DataTables и как это можно эффективно реализовать. Вот код:

Код: Выделить всё

@extends('v3.layouts.main')
@include('v3.cursus.components.bevestiging')
@section('content')




Cursus bestelverzoek:

Selecteer een cursus
@foreach($cursussen as $cursusOption)
id == $cursus->id && !isset($_GET['herhaling'])) selected @endif
>
{{ $cursusOption->naam }}

@if($cursusOption->heeft_herhalingstraining == 1)
id == $cursus->id && ($_GET['herhaling'] ?? 0) == 1) selected @endif
>
{{ $cursusOption->naam_herhaling }}

@endif
@endforeach










[i][/i]






















@csrf



Verstuur bestelverzoek







$(document).ready(function() {
let selectedCursisten = [];
let selectedCursus = null;

$('#cursusSelect').on('change', function() {
selectedCursus = $(this).val();
if (selectedCursus) {
$(this).prop('disabled', true);
$('#contentWrapper').fadeIn(); // Laat de inhoud zien
}
cursistenTable.ajax.reload();
$('#hiddenCursusId').val(selectedCursus);
});

let cursistenTable = new DataTable('#cursistenTable', {
dom: 'rtp',
processing: true,
serverSide: true,
pageLength: 10,
ordering: true,
ajax: {
url: "/sws_api/cursisten/",
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",
}
});

let cursistenSelectedTable = new DataTable('#cursistenSelectedTable', {
dom: 'rtp',
processing: true,
serverSide: false,
pageLength: 10,
ordering: true,
columns: [
{ data: 'naam', title: 'Naam', render: DataTable.render.text() },
],
responsive: true,
language: {
emptyTable: "Geen cursisten geselecteerd",
zeroRecords: "Geen overeenkomende resultaten gevonden",
}
});

$('#cursistenTable tbody').on('click', 'tr', function() {
let data = cursistenTable.row(this).data();
if (data) {
cursistenSelectedTable.row.add(data).draw(false);
cursistenTable.row(this).remove().draw(false);
selectedCursisten.push(data);
cursistenTable.draw(false);
$('#hiddenCursisten').val(JSON.stringify(selectedCursisten));
}
});

$('#cursistenSelectedTable tbody').on('click', 'tr', function() {
let data = cursistenSelectedTable.row(this).data();
if (data) {
cursistenTable.row.add(data).draw(false);
cursistenSelectedTable.row(this).remove().draw(false);
selectedCursisten = selectedCursisten.filter(item => item.id !== data.id);
cursistenTable.draw(false);
$('#hiddenCursisten').val(JSON.stringify(selectedCursisten));
}
});

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


@endsection

.fixed-table {
height: 445px;
background-color: #f8f9fa;
overflow-y: auto;
border: 1px solid #dee2e6;
}
.fixed-table table {
margin-bottom: 0;
}
dee2e6

Мне интересно, возможно ли это.

Подробнее здесь: https://stackoverflow.com/questions/793 ... datatables