将表单数据发送到 DataTables ajax 调用答案

【问题标题】：Sending form data to DataTables ajax call将表单数据发送到 DataTables ajax 调用
【发布时间】：2016-10-21 13:15:06
【问题描述】：

我正在使用 jQuery 插件“DataTables”来显示我的数据库中的数据。我已成功将其配置为对返回 JSON 编码数据的 PHP 脚本进行 ajax 调用。一切正常，表格显示正确。

我遇到的问题是我希望用户能够填写带有其他搜索条件的表单。一旦用户点击提交按钮，它就需要重新加载 DataTables，而不是仅仅对 PHP 文件进行 ajax 调用，它还需要将表单数据发送到 PHP 文件。这样我就可以使用逻辑返回正确的 JSON 响应。

所以有两个问题：

如何在ajax调用中传递表单数据
如何在#narrowSearch点击事件上重新加载表格

想知道是否有人知道如何做到这一点？

jQuery:

$(document).ready(function() {
    $('#table').DataTable( {
        ajax: {
            //////////////////////////////////////////////////////////////////////
            //need a way to pass #zipRefine and #milesFromZip to index-process.php
            //////////////////////////////////////////////////////////////////////
            url: 'index-process.php',
            dataSrc: ''
        },
        columns: [
            { data: 'First Name' },
            { data: 'Last Name' },
            { data: 'City' },
            { data: 'Email' }

        ]
    });
});

HTML：

<input type="text" name="zipRefine" id="zipRefine"/>
<input type="text" name="milesFromZip" id="milesFromZip"/>
<input type="submit" id="narrowSearch" value="Search By Zip Code"/>

<table id="table" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>City</th>
            <th>Email</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>City</th>
            <th>Email</th>
        </tr>
    </tfoot>
</table>

PHP index-process.php：

if(isset($_POST['zipRefine']) && isset($_POST['milesFromZip'])){
     $refinedData = array("First Name"=>"","Last Name"=>"","City"=>"","Email"=>"");
     ///query refined set of data
     echo json_encode($refinedData);
}else{
     $defaultData = array("First Name"=>"","Last Name"=>"","City"=>"","Email"=>"");
     ////query default set of data
     echo json_encode($defaultData);
}

【问题讨论】：

标签： jquery ajax datatables

【解决方案1】：

这对我有用https://stackoverflow.com/a/38908085/1231402

还要重新加载表：oTable.ajax.reload(); 是工作脚本

【讨论】：

【解决方案2】：

使用ajax.data 选项在数据表请求中传递其他参数：

var oTable = $('#table').DataTable( {
   'serverSide': true,
    'ajax': {
        url: 'index-process.php',
        "data": function (d) {
            return $.extend({}, d, {
                "zipRefine": $('#zipRefine').val(),
                "milesFromZip": $('#milesFromZip').val()
            });
        }
    },
   'columns': [
        { data: 'First Name' },
        { data: 'Last Name' },
        { data: 'City' },
        { data: 'Email' }

    ]
});

自定义参数可以在服务器端代码中以与标准数据表参数相同的方式访问。请注意，我在初始化代码中添加了'serverSide': true，以确保确实发送了这些参数。

要重新加载表格，您只需在点击事件中调用draw，假设oTable 在范围内：

$('#narrowSearch').click(function () {
    oTable.draw();
}

【讨论】：