单击按钮时更新数据表(JQuery)

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

表格的代码

<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代码

$(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脚本(工作正常)是:

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

解决方法

看起来你应该在设置数据时指定fnServerData,如果你想使用ajax POST: http://datatables.net/ref#fnServerData

您也可以不需要调用fnReloadAjax(),而只需要调用fnDraw(). fnReloadAjax()是一个插件函数,所以我假设你以前加载过它.

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...