Question

我有一个网页，其中包含2个部分（1）带有特定输入的表单（搜索过滤器）（2）DataTable（https://datatables.net/），它们会对提交作出反应。

有没有办法可以在表单提交时重新加载或刷新DataTable？用户可以查看数据;在表单中调整搜索条件并重新提交。

现在我预先在页面加载时使用默认数据填充DataTable。如何使用表单数据来提交（）按钮并重新加载/重绘自己？

<script>
$(document).ready(function() {
            $('#dtQryResults').DataTable({
            responsive: true,
            "bProcessing": true,
            "serverSide": false,
            "order" : [[2, "desc"]],
            "ajax":{
                url :"./include/mysql/qryresults.php?tx=default", // json datasource
                type: "GET",  // type of method  ,GET/POST/DELETE
                error: function(){
                    $("#dtQryResults").css("display","none");
                }
            }
    });   
</script>

Answer 1

我尝试通过将表单输入序列化为变量然后在DataTable设置中使用该变量来解决此问题。目前它正在运行，但我还没有做太多测试。

var searchFilter = "tx=default"; //this is for default criteria

$("#queryform").submit(function(e) {
    e.preventDefault();
    e.stopPropagation();    
    searchFilter=$('#queryform').serialize();
    $('#dtQryResults').DataTable().ajax.reload();
});

更改＆＃34; ajax＆＃34;以下内容：

"ajax":{
    url :"./include/mysql/qryresults.php", // json datasource
    type: "GET",  // type of method - GET/POST/DELETE
    data: function( d ) {
            d.tx=searchFilter;
        },
    error: function(){
        $("#dtQryResults").css("display","none");
    }
},

在表单上重新加载数据表中的数据提交

1 个答案: