如何保存DataTable搜索框值并通过POST传递至其他页面？

当然可行！你当前的代码有几个小问题导致POST没成功，我来帮你修正：

问题分析 #

1. 事件绑定错误：你给表格#elencoprodotti绑定了change事件，但DataTables的搜索框是动态生成的，并非表格本身的元素，这个事件根本触发不了。而且DataTables有专门的搜索事件可以监听。
2. AJAX参数重复：你同时写了type:"POST"和method:"POST"，这两个属性是重复的（type是旧版写法，method是新版），保留一个即可。

修正后的前端代码 #

首先，用DataTables提供的search.dt事件来监听搜索框的变化，这个事件会在每次搜索操作（包括输入、清空）时触发：

$(document).ready(function() {
    var table = $('#elencoprodotti').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Italian.json",
            "decimal": ",",
            "thousands": "."
        },
        "ajax": {
            "url": modulo+"_get_elenco.php?tabella=",
            "dataSrc": ""
        },
        "columns": [
            { "data": "IMG" },
            { "data": "CODICE" },
            { "data": "CODICE_OBSOLETO" },
            { "data": "DESCRIZIONE" },
            { "data": "CATEGORIA" },
            { "data": "FORNITORE" },
            { "data": "UM_BREVE" },
            { "data": "QTA_NEW" },
            { "data": "SCORTA_MINIMA" }
        ],
        "columnDefs": [
            {
                "targets": [0],
                "searchable": false,
                "orderable": false
            }
        ]
    });

    // 监听DataTables的搜索事件
    table.on('search.dt', function() {
        var searchValue = $('.dataTables_filter input').val().trim();
        // 只有当搜索值不为空时才发送请求（可选，根据你的需求调整）
        if (searchValue) {
            $.ajax({
                method: "POST",
                url: "ciao.php",
                data: { 'searchValue': searchValue },
                success: function(response) {
                    console.log("搜索值已发送：", searchValue);
                    // 这里可以跳转到目标页面，或者处理返回结果
                    // 比如 window.location.href = "目标页面.php";
                },
                error: function(xhr) {
                    console.error("请求失败：", xhr);
                }
            });
        }
    });
});

目标页面（初始化新表格的实现） #

如果你是要跳转到另一个页面并使用这个搜索值初始化新的DataTable，直接异步AJAX跳转可能会有时序问题，推荐用以下两种更稳妥的方式：

方式1：用隐藏表单提交POST数据（推荐跳转场景） #

修改搜索事件的处理逻辑，创建一个临时隐藏表单来提交POST数据：

table.on('search.dt', function() {
    var searchValue = $('.dataTables_filter input').val().trim();
    if (searchValue) {
        // 创建隐藏表单
        var form = $('<form>', {
            'method': 'POST',
            'action': '目标页面.php'
        }).append($('<input>', {
            'type': 'hidden',
            'name': 'searchValue',
            'value': searchValue
        }));
        // 提交表单跳转到目标页面
        form.appendTo('body').submit();
    }
});

然后在目标页面（比如目标页面.php）中，接收POST值并初始化DataTable：

<?php
$initialSearch = isset($_POST['searchValue']) ? $_POST['searchValue'] : '';
?>

<script>
$(document).ready(function() {
    var table = $('#nuovaTabella').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Italian.json",
            "decimal": ",",
            "thousands": "."
        },
        "ajax": {
            "url": "你的数据源.php",
            "dataSrc": ""
        },
        "columns": [
            // 你的列配置
        ],
        // 初始化时自动设置搜索值
        "initComplete": function(settings, json) {
            var initialSearch = "<?php echo addslashes($initialSearch); ?>";
            if (initialSearch) {
                table.search(initialSearch).draw();
            }
        }
    });
});
</script>

方式2：用会话存储传递值（适合先处理数据再跳转的场景） #

如果需要先通过ciao.php处理搜索值，再跳转，可以把值存在会话中：

ciao.php代码：

<?php
session_start();
if (isset($_POST['searchValue'])) {
    $_SESSION['initialSearch'] = $_POST['searchValue'];
    echo "success";
}
?>

前端AJAX的success回调中跳转：

success: function(response) {
    if (response === "success") {
        window.location.href = "目标页面.php";
    }
}

目标页面读取会话值初始化表格：

<?php
session_start();
$initialSearch = isset($_SESSION['initialSearch']) ? $_SESSION['initialSearch'] : '';
// 用完销毁会话值，避免下次访问残留
unset($_SESSION['initialSearch']);
?>

<script>
// 初始化DataTable的代码和方式1的initComplete部分一致
</script>

这样就能完美实现把原页面DataTable的搜索值传递到新页面，并用它初始化新的DataTable了！

内容的提问来源于stack exchange，提问作者Jordan.M