Php 基于Ajax的搜索-如何将结果放入数据表

我试图进行基于ajax的搜索，但我对javascript和ajax非常陌生。我需要对结果进行排序、筛选等，所以我将结果放入数据表中。 首先，我使用的是标准html表单输入，它是主要的搜索字段：

<input type="text" class="form-control" formmethod="post" oninput="return delayExecute();" id="name" name="name" size="61" autofocus/>

当用户将某物放入表单时，它调用delayExecute函数。接下来，在用户完成编写脚本一秒钟后运行ajax请求。脚本如下所示：

<script>     
var typingTimer;
var doneTypingInterval = 700;

function delayExecute()
{
    clearTimeout(typingTimer);
    typingTimer = setTimeout(
        function(){makeAjaxRequest(name)},
        1000
        );
    return true;
}

function makeAjaxRequest(name) {
    $('#loading')
        .show()
var myrequest = $.ajax({
    url: 'ajax_search',
    type: 'post',
    data: {name: $('input#name').val()},
    ajaxSend: function() {


    },
    success: function(response) {

        $('table#dataTables-example tbody').html(response);

    },
    complete:function(){
        //
        $('#loading')
        .hide();   
         $('#dataTables-example').dataTable({
                // "destroy": true,
                "processing": true,
                 "aaSorting": [],
                 "iDisplayLength": 10,
                 "aLengthMenu":[[10, 15, 25, 35, 50, 100, -1], [10, 15, 25, 35, 50, 100, "All"]]
             }).columnFilter(
             {
                 aoColumns: [
                                 {type: "null"},
                                 {sSelector: "#mag_filter_column", type: "select"},

                             ]
             }
             );
    }
});

echo '<tr>';
echo '<td>'.$some_variable.'</td>';
echo '<td>'.$other_variable.'</td>';
echo '</tr>;

<table class="main-search table table-striped table-bordered table-hover" id="dataTables-example">
    <thead>
         <tr>
            <th>Col</th>
            <th>War</th>
            <th>Symbol</th>
             <th>Name</th>
             <th>Quantity</th>
             <th>Descripion</th>
             <th>Photo</th>
         </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
    <tbody>

    </tbody>
</table>

})；

在Php文件ajax_请求中，我从数据库中读取数据。接下来，我使用echo函数将内容放入表中，如下所示：

<script>     
var typingTimer;
var doneTypingInterval = 700;

function delayExecute()
{
    clearTimeout(typingTimer);
    typingTimer = setTimeout(
        function(){makeAjaxRequest(name)},
        1000
        );
    return true;
}

function makeAjaxRequest(name) {
    $('#loading')
        .show()
var myrequest = $.ajax({
    url: 'ajax_search',
    type: 'post',
    data: {name: $('input#name').val()},
    ajaxSend: function() {


    },
    success: function(response) {

        $('table#dataTables-example tbody').html(response);

    },
    complete:function(){
        //
        $('#loading')
        .hide();   
         $('#dataTables-example').dataTable({
                // "destroy": true,
                "processing": true,
                 "aaSorting": [],
                 "iDisplayLength": 10,
                 "aLengthMenu":[[10, 15, 25, 35, 50, 100, -1], [10, 15, 25, 35, 50, 100, "All"]]
             }).columnFilter(
             {
                 aoColumns: [
                                 {type: "null"},
                                 {sSelector: "#mag_filter_column", type: "select"},

                             ]
             }
             );
    }
});

echo '<tr>';
echo '<td>'.$some_variable.'</td>';
echo '<td>'.$other_variable.'</td>';
echo '</tr>;

<table class="main-search table table-striped table-bordered table-hover" id="dataTables-example">
    <thead>
         <tr>
            <th>Col</th>
            <th>War</th>
            <th>Symbol</th>
             <th>Name</th>
             <th>Quantity</th>
             <th>Descripion</th>
             <th>Photo</th>
         </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
    <tbody>

    </tbody>
</table>

视图中的表如下所示：

<script>     
var typingTimer;
var doneTypingInterval = 700;

function delayExecute()
{
    clearTimeout(typingTimer);
    typingTimer = setTimeout(
        function(){makeAjaxRequest(name)},
        1000
        );
    return true;
}

function makeAjaxRequest(name) {
    $('#loading')
        .show()
var myrequest = $.ajax({
    url: 'ajax_search',
    type: 'post',
    data: {name: $('input#name').val()},
    ajaxSend: function() {


    },
    success: function(response) {

        $('table#dataTables-example tbody').html(response);

    },
    complete:function(){
        //
        $('#loading')
        .hide();   
         $('#dataTables-example').dataTable({
                // "destroy": true,
                "processing": true,
                 "aaSorting": [],
                 "iDisplayLength": 10,
                 "aLengthMenu":[[10, 15, 25, 35, 50, 100, -1], [10, 15, 25, 35, 50, 100, "All"]]
             }).columnFilter(
             {
                 aoColumns: [
                                 {type: "null"},
                                 {sSelector: "#mag_filter_column", type: "select"},

                             ]
             }
             );
    }
});

echo '<tr>';
echo '<td>'.$some_variable.'</td>';
echo '<td>'.$other_variable.'</td>';
echo '</tr>;

<table class="main-search table table-striped table-bordered table-hover" id="dataTables-example">
    <thead>
         <tr>
            <th>Col</th>
            <th>War</th>
            <th>Symbol</th>
             <th>Name</th>
             <th>Quantity</th>
             <th>Descripion</th>
             <th>Photo</th>
         </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
    <tbody>

    </tbody>
</table>

这整件事几乎成功了。当我第一次进行搜索时，它会将所有内容加载到datatable中，并且所有内容都可以很好地分页、排序等。但是当我进行第二次搜索时，会更改一些单词，例如，ajax serch运行，它会找到一些内容，但数据不会加载到datatable中。我想我需要找到方法来刷新datatable插件。我试着使用datatable.clear、datatable.destroy和其他一些东西，但没有一个适合我。正确的方法是什么

我的datatable插件版本：DataTables 1.10.5

---

jquery版本：2.1.1

数据表有一个“重新加载”方法：。使用destroy时会发生什么？控制台中是否出现错误？要使用destroy，我将变量mytable分配给datatable初始化，如下所示：var mytable=$'dataTables-example'。datatable{….等等。它现在显示错误：mytable是未定义的。您使用如下内容：var table=$'mytable'。DataTable；table.destroy；您可以在oninput事件中添加。您的上一个答案帮助很大。我将您的代码放入我的函数delayExecute中，现在每次搜索某个内容时都会加载DataTable。但仍然有一个小错误问题。现在每次我在表单中添加一些字符时，它都会运行destroy。这会导致性能问题。我写东西时有点滞后。//编辑：我在htmlresponse之前将destroy代码放入ajax成功事件中，现在它工作得很好！对，是的，在oninput中会有问题。您可以在Blur上执行它，还是在按钮上执行它可能更好呃反正