DataTable中的值被切换

Question

我想在执行 ajax 后渲染一个 table。在这里，我使用 jQuery

var tableOfSomething = $('#some_id').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            "responsive": true,
        });

$.ajax({
   method: "POST",
   url: "someurl.com/getAll"
   data: {}
})
   .done(function(msg){
      var res = JSON.parse(msg);
      for(var i = 0; i < res.length; i++){
         $.ajax({
            method: "POST",
            url: "someurl.com/getDataById"
            data: {res[i]['id']}
         })
            .done(function(msg){
               var data = JSON.parse(msg);
               var body = data['body'];

               var result = res;

               tableOfSomething.row.add([
                  body['name'],
                  result[i]['a'],
                  result[i]['b'],
                  result[i]['c'],
                  result[i]['d']
               ]).draw(false);
            })
      }
   });

问题是，第一列经常互相切换。表示每行的 body['name'] 或 first column 是 Maria, Jonathan, Jon Doe。那个名字，经常变，但另一列没有。

我尝试使用success作为success的键，将done()中的函数移动为success的值，但结果是一样的。我尝试了很多我能做的事情，但都是一样的。我的代码有问题吗？任何人都可以帮助我吗？

Answer 1

您正在同步循环中使用异步变量。 i 在第一个 ajax 调用完成之前很久就已经增加到最后一个可能的值。未经测试，但相信这可以通过一个简单的闭包来解决 (i) :

    for(var i = 0; i < res.length; i++) {
      (function(i){
         $.ajax({
           method: "POST",
           url: "someurl.com/getDataById"
           data: {res[i]['id']}
         })
         .done(function(msg){
            var data = JSON.parse(msg);
            var body = data['body'];
            var result = res;
            tableOfSomething.row.add([
               body['name'],
               result[i]['a'],
               result[i]['b'],
               result[i]['c'],
               result[i]['d']
            ]).draw(false);
         })
      })(i);
   }

DataTable中的值被切换

The values in DataTable are switched

javascript

jquery

datatables-1.10