在ajax成功之后重新加载数据表 [英] reload datatable after ajax success

问题描述

我使用JQuery DataTable.我将数据发送到ajax成功的json文件中的数据表onclick.第一个结果. 这是数据表中数据的首次显示:

I use JQuery DataTable. I send data to datatable onclick in json file at ajax succes .the first click everything is good,But the next click I get only the right data ANd wrong value of dataTables_info it display always the first value of dataTables_info And paginatio AND row too from the first result. This is the first display of data in datatable:

所有下一个单击我仅获得正确的数据": 对于这个示例，它们是下图中显示的一个结果，但其他所有内容(信息，显示，分页)都属于在第一张图中显示的第一个搜索:

ALL the next Click I get only right data: For this exemple they are one result showing in picture below but everything else(info ,show,pagination) belong to first search showing in the first picture :

在第二个示例中，当我单击分页的任何页面时，我都会得到第一页结果的内容！！ 这是我的函数ONclick:

In the second Exemple When I click at any page of pagination I get the content of the first page result!! This is my function ONclick:

    $ ( '#ButtonPostJson' ).on('click',function() {

             $("tbody").empty();
             var forsearch = $("#searchItem").val();

    $.ajax({
        processing: true,
        serverSide: true,
        type: 'post',
        url: 'searchData.json',
        dataType: "json",
        data: mysearch,
       /* bRetrieve : true,*/

        success: function(data) {
            $.each(data, function(i, data) {
                var body = "<tr>";
                body    += "<td>" + data.name + "</td>";
               ..........................
               ..........................
                body    += "</tr>";
                $('.datatable-ajax-source table').append(body);

            })
        ;
            /*DataTables instantiation.*/
     $('.datatable-ajax-source table').dataTable();
    },

        error: function() {
            alert('Processus Echoué!');
        },
        afterSend: function(){
    $('.datatable-ajax-source table').dataTable().reload();
 /* $('.datatable-ajax-source table').dataTable({bRetrieve : true}).fnDestroy();    
    $(this).parents().remove(); 
$('.datatable-ajax-source table').dataTable().clear();*/
    }
    });
    });

我尽一切努力，我不知道我想念什么. 我将此jQuery用于数据表:

I try everything and i dont know what I miss. I use this jquery for datatable:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

谢谢.

推荐答案

在单击按钮时，您无需清空表主体并使用Ajax重新启动数据表.

On a button clik you dont need to empty your table body and make initiate the datatable again with the ajax.

您只需重新调用ajax，因为您已经启动了文档就绪功能

you just have to call your ajax again as you have already initiate on document ready function

只需使用

$("#Table_id").ajax.reload();

检查下面的链接，您将有更好的主意.

check the below link, you will have better idea.

https://datatables.net/reference/api/ajax.reload()

让我知道这是否对您没有帮助

Let me know if this doesn't help you

这篇关于在ajax成功之后重新加载数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！