перезагрузка данных при каждом нажатии кнопки

Question

У меня проблема с перезаписью. Я хочу обновлять свои данные при каждом нажатии кнопки поиска. Я пытался все, чтобы решить эту проблему, но я не могу это сделать. Может ли кто-нибудь мне помочь?

<script>
function getData(){
    var URL_PREFIX="http://localhost:8983/solr/archiveCore/select?q=strSO:";
    var URL_MIDDLE="AND PackName:";
    var URL_SUFFIX="AND DocType:";
    var strSO="\"" + $("#ngramBoxstrSO").val() + "\"";
    var PackName="\"" + $("#ngramBoxPackName").val() + "\"";
    var DocType="\"" + $("#ngramBoxDocType").val() +"\"";
    var URL=URL_PREFIX + strSO + URL_MIDDLE + PackName + URL_SUFFIX + DocType;
    $.ajax({
        url:URL,
        dataType:'jsonp',
        jsonp : 'json.wrf',
        type :'get',
        cache :false,
        success: function(data){
            var docs=JSON.stringify(data.response.docs);
            var jsonData=JSON.parse(docs);
            var html='';
            $.each(jsonData,function(key,value){
                html+='<tr>';
                html+='<td>'+value.id+'</td>';
                html+='<td>'+value.strSO+'</td>';
                html+='<td>'+value.PackName+'</td>';
                html+='<td>'+value.DocType+'</td>';
                html+='<td>'+value.DocName+'</td>';
                html+='<td class="text-center"><button id="'+value.FilePath+""+'type="button onclick="openDocument(this.id)" class="btn btn-sm" >OPEN</td>';
                html+='</tr>';
            });
            $('#example').append(html);

            var table=$('#example').DataTable({
                "aaSorting" : [],
            });

        },
    });


};
</script>

и вот мой бег

когда я нажимаю кнопку поиска, как только она работает правильно, но я нажимаю более одного раза, это вызывает ошибку повторной инициализации, которую можно датировать.

<label for="strSO">Sales-Order: </label> <input id="ngramBoxstrSO"></input>
        <label for="PackName">PackName: </label> <input id="ngramBoxPackName"></input>
        <label for="DocType">DocType: </label> <input id="ngramBoxDocType"></input>
        <input type="button" value="SEARCH" onclick="getData()">
        <br><br>

        <table id="example" class="table table-primary table-bordered table-sm table-hover">

            <thead>
                <tr>
                    <th class="text-center" style="width: 4%">Id</th>
                    <th class="text-center" style="width: 7%">SalesOrder</th>
                    <th class="text-center" style="width: 15%">Document Name</th>
                    <th class="text-center" style="width: 15%">Package Type</th>
                    <th class="text-center" style="width: 20%">Document Type</th>
                    <th class="text-center" style="width: 5%">Open</th>

                </tr>
            </thead>

            <tbody id="tbody">

            </tbody>


            <tfoot>
                <tr>
                    <th class="text-center">Id</th>
                    <th class="text-center">SalesOrder</th>
                    <th class="text-center">Document Name</th>
                    <th class="text-center">Package Type</th>
                    <th class="text-center">Document Type</th>
                    <th class="text-center">Open</th>
                </tr>
            </tfoot>
        </table>

Answer 1

Попробуйте bDestroy

$('#example').DataTable({
   "aaSorting" : [],
   "bDestroy": true
});

Answer 2

Если бы вы дали образец html, то было бы лучше решить.Но вы можете попробовать это:

if (typeof table !== 'undefined') {    // write this before your datatable statement
        table.fnClearTable();
    }

var table=$('#example').DataTable({
         "aaSorting" : [],
});

Ничто не работает для вас, поэтому, пожалуйста, попробуйте следующее решение:

HTML это только без тега таблицы:

<label for="strSO">Sales-Order: </label> <input id="ngramBoxstrSO"></input>
        <label for="PackName">PackName: </label> <input id="ngramBoxPackName"></input>
        <label for="DocType">DocType: </label> <input id="ngramBoxDocType"></input>
        <input type="button" value="SEARCH" onclick="getData()">
        <br><br>
        <div class="tableDiv">
       </div>

Теперь в вашей getdata функции:

    function getData(){
        var URL_PREFIX="http://localhost:8983/solr/archiveCore/select?q=strSO:";
        var URL_MIDDLE="AND PackName:";
        var URL_SUFFIX="AND DocType:";
        var strSO="\"" + $("#ngramBoxstrSO").val() + "\"";
        var PackName="\"" + $("#ngramBoxPackName").val() + "\"";
        var DocType="\"" + $("#ngramBoxDocType").val() +"\"";
        var URL=URL_PREFIX + strSO + URL_MIDDLE + PackName + URL_SUFFIX + DocType;

    $('.tableDiv').html('');
    tableContent = '<table id="example" class="table table-primary table-bordered table-sm table-hover">

            <thead>
                <tr>
                    <th class="text-center" style="width: 4%">Id</th>
                    <th class="text-center" style="width: 7%">SalesOrder</th>
                    <th class="text-center" style="width: 15%">Document Name</th>
                    <th class="text-center" style="width: 15%">Package Type</th>
                    <th class="text-center" style="width: 20%">Document Type</th>
                    <th class="text-center" style="width: 5%">Open</th>

                </tr>
            </thead>

            <tbody id="tbody">

            </tbody>


            <tfoot>
                <tr>
                    <th class="text-center">Id</th>
                    <th class="text-center">SalesOrder</th>
                    <th class="text-center">Document Name</th>
                    <th class="text-center">Package Type</th>
                    <th class="text-center">Document Type</th>
                    <th class="text-center">Open</th>
                </tr>
            </tfoot>
        </table>';
$('.tableDiv').append(tableContent);
        $.ajax({
            url:URL,
            dataType:'jsonp',
            jsonp : 'json.wrf',
            type :'get',
            cache :false,
            success: function(data){
                var docs=JSON.stringify(data.response.docs);
                var jsonData=JSON.parse(docs);
                var html='';
                $.each(jsonData,function(key,value){
                    html+='<tr>';
                    html+='<td>'+value.id+'</td>';
                    html+='<td>'+value.strSO+'</td>';
                    html+='<td>'+value.PackName+'</td>';
                    html+='<td>'+value.DocType+'</td>';
                    html+='<td>'+value.DocName+'</td>';
                    html+='<td class="text-center"><button id="'+value.FilePath+""+'type="button onclick="openDocument(this.id)" class="btn btn-sm" >OPEN</td>';
                    html+='</tr>';
                });
                $('#example tbody').append(html);

                var table=$('#example').DataTable({
                    "aaSorting" : [],
                });

            },
        });


    };

Answer 3

Попробуйте изменить функцию getData () с помощью этой функции.

function getData(){
var URL_PREFIX="http://localhost:8983/solr/archiveCore/select?q=strSO:";
var URL_MIDDLE="AND PackName:";
var URL_SUFFIX="AND DocType:";
var strSO="\"" + $("#ngramBoxstrSO").val() + "\"";
var PackName="\"" + $("#ngramBoxPackName").val() + "\"";
var DocType="\"" + $("#ngramBoxDocType").val() +"\"";
var URL=URL_PREFIX + strSO + URL_MIDDLE + PackName + URL_SUFFIX + DocType;
$.ajax({
    url:URL,
    dataType:'jsonp',
    jsonp : 'json.wrf',
    type :'get',
    cache :false,
    success: function(data){
        var docs=JSON.stringify(data.response.docs);
        var jsonData=JSON.parse(docs);

        $('#example').DataTable().destroy();
        $('#example').DataTable({
            data: jsonData,
            columns: [
                { data: 'id' },
                { data: 'strSO' },
                { data: 'PackName' },
                { data: 'DocType' },
                { data: 'DocName' },
                { data: 'FilePath',
                  render: function (data, type, full, meta) {
                              return '<button type="button" onclick="openDocument(' + data + ')" class="btn btn-sm" >OPEN</button>';
                  } 
                }
            ]
        })
    },
});

Answer 4

Добавить это снаружи getData() функция

if($.fn.dataTable.isDataTable( '#example' )){
    table = $('#example').DataTable();
}

Добавить это внутри ajax success функция

table.destroy();
$('#example').append(html);
table=$('#example').DataTable({
    "aaSorting" : []
});