单击按钮时更新数据表(JQuery) [英] Update datatables (JQuery) when button is clicked

问题描述

我已经创建了一个简单的表单，并且正在使用Datatables jQuery插件在其中显示一些数据.数据由php脚本(process.php)填充，该脚本以JSON格式返回正确的结果.在表单中，有一个按钮可将文本框的值发送到process.php. 问题是单击按钮时，我无法使用process.php脚本接收的新数据更新/更改数据表.

I've created a simple form and I'm using the Datatables jQuery plugin to display some data in it. Data are being populated by a php script (process.php) which returns the proper results in JSON format. In the form, there is a button that sends the value of the textbox to the process.php. The problem is that I cannot update/alter datatable with the new data received by process.php script when the button is clicked.

格式的代码:

<form name="myform" id="myform" action="" method="POST">  
    <label for="id">Enter an id:</label>  
    <input type="text" name="txtId" id="txtId" value=""/> 
    <input type="button" id="btnSubmit" name="btnSubmit" value="Search"> 
</form>

<div id="results">
    <table class="display" id="example">
        <thead>
            <tr>
                <th>id</th>
                <th>Surname</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <!-- data goes here -->
        </tbody>
    </table>
</div> 

要创建数据表，我正在使用以下JQuery代码:

To create the datatable, I'm using the following JQuery code:

    $(document).ready(function() {
            var oTable = $('#example').dataTable( {
                "sPaginationType": "full_numbers",
                "iDisplayLength": 10,
                //"bServerSide": true,
                "sAjaxSource": "process.php"
            } );

        $("#btnSubmit").click(function(){
            $.ajax({  
                type: "POST",  
                url: "process.php",  
                data: 'txtId=' + $("txtId").val(),  
                success: function(result) {  
                    oTable.fnReloadAjax();
                    oTable.fnDraw();
                }  
            });
        });
    } );

process.php脚本(可以正常运行)是:

process.php script (works fine) is:

<?php
$result="";
if (empty($_REQUEST["txtId"])) {    
    $result = '{"aaData":[["1","Surname1","Name1"]]}';
}
else {
    $result = '{"aaData":[["2","Surname2","Name2"]]}';
}
print $result;
?>

推荐答案

如果您想使用ajax POST，则在设置数据集时似乎还应该指定fnServerData:

It looks like you should also specify fnServerData when you setup your datable, if you want to use ajax POST: http://datatables.net/ref#fnServerData

也有可能您不需要呼叫fnReloadAjax()，而只需呼叫fnDraw(). fnReloadAjax()是一个插件功能，所以我假设您之前已经加载了它.

It's also possible that you don't need to call fnReloadAjax(), but only fnDraw(). fnReloadAjax() is a plugin function, so I assume you did previously load it.

这篇关于单击按钮时更新数据表(JQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！