jQuery DataTables添加动态标题和未显示的表行

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

<table id="myTable" class="display" style="width:100%"></table>

$(document).ready(function() {
    var table = $('#myTable').DataTable({
        columns: [
            { title: "列1" },
            { title: "列2" },
            { title: "列3" }
        ]
    });
    
    // 动态添加标题
    table.columns().every(function() {
        var column = this;
        var title = $(column.header()).text();
        $(column.header()).html('<input type="text" placeholder="搜索 ' + title + '" />');
        
        // 监听输入框的变化事件
        $('input', column.header()).on('keyup change', function() {
            if (column.search() !== this.value) {
                column.search(this.value).draw();
            }
        });
    });
});