Question

我使用JQuery DataTable。我在ajax成功的json文件中将数据发送到datatable onclick。第一次单击一切都很好，但是下一次单击我得到的数据是正确的，而dataTables_info的错误值总是显示dataTables_info的第一个值和paginatio AND行也是第一个结果。这是数据表中第一个数据显示：

所有下一次点击我只得到正确的数据：对于这个例子，他们是一个结果显示在下面的图片，但其他一切（信息，显示，分页）属于在第一张图片中显示的第一个搜索：

在第二个例子当我点击分页的任何页面时，我得到第一页结果的内容!! 这是我的功能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用于数据表：

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

感谢。

Answer 1

在按钮clik上你不需要清空你的表体并使用ajax再次启动数据表。

你必须再次调用你的ajax，因为你已经启动了文档就绪功能

只需使用

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

查看以下链接，您将有更好的想法。

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

如果这对您没有帮助，请告诉我

Answer 2

此链接Refreshing data in jQuery DataTables

是非常好的帮助，我鼓励它来解决我的问题。

Answer 3

我创建了这个简单的函数：

function refreshTable() {
  $('.dataTable').each(function() {
      dt = $(this).dataTable();
      dt.fnDraw();
  })
}

Answer 4

$("#Table_id").ajax.reload();无效。

我实施了 -

var mytbl = $("#Table_id").datatable();
mytbl.ajax.reload;

Answer 5

使用下面的代码..完美的工作，它保持你的分页而不会丢失当前页面

$（＆＃34;＃table-example＆＃34;）。DataTable（）。ajax.reload（null，false）;

Answer 6

我有同样的问题。我在一个处理这个问题的项目中找到了一个函数。这是我制作的一个简单的2列表。

<table id="memberships" class="table table-striped table-bordered table-hover"  width="100%">
        <thead>
            <tr>
                <th>Member Name</th>
                <th>Location</th>
            </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Member Name</th>
            <th>Location</th>
          </tr>
        </tfoot>
      </table>

这是我填充它的脚本：

function drawTable(){
var table = $('#memberships').DataTable();

table.destroy();

value = $("#memberName").val();
console.log("member name-->>" + value);
$('#memberships').DataTable({
responsive:true,
pageLength: 50,
ajax:{
    "url": `//BACKEND API CALL`,
    "type":"get",
    "dataSrc": 'members'//my data is in an array called members
},
columns: [
  {"data": "name_display" },
  {"targets": 0,
    "data": "membershipID",
    "render": function ( data, type, full, meta ) {
      return '<button type="button" class="btn btn-info btn-block" 
      onclick="editMember(' + data + ')">Edit Member</button><button 
      type="button" class="btn btn-danger btn-block" 
      onclick="deleteMember(' + data + ')">Delete</button>';
    }
  }
 ]
});
$.fn.dataTable.ext.errMode = 'none';
}

您可以忽略我的列渲染功能。我根据返回的数据需要2个按钮。关键是函数中的table.destroy。我在一个名为table的变量中创建了表。我在这个初始化中将其销毁，因为它允许我一遍又一遍地使用同样的功能。它第一次破坏一张空桌子。之后的每次调用都会破坏数据并从ajax调用中重新填充数据。

希望这有帮助。

Answer 7

.reload（）在我们传递一些参数之前无法正常工作

var  = $("#example").DataTable() ;
datatbale_name.ajax.reload(null, false );

Answer 8

像这样使用

$('#product_table').DataTable().ajax.reload();

Answer 9

尝试一下，我希望它能起作用

$（“＃datatable_id”）。DataTable（）。ajax.reload（）;

Answer 10

首先获取表ID，例如：

var table=('#tableid').Datatable();
table.draw();

只需将这些行放在 ajax success 函数之后即可重新加载数据表

Answer 11

$('.table').DataTable().ajax.reload(); 这对我有用..

ajax成功后重新加载数据表

11 个答案: