Question

我正在使用jQuery插件＆＃34; DataTables＆＃34;显示我的数据库中的数据。我已成功配置它以对返回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);
}

Answer 1

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

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

Answer 2

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

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();
}

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

2 个答案: