如何将从API中提取的数据添加到HTML DataTable？

Question

我正在尝试使用从API收集的信息来完成DataTable。

我做了一个“捣鼓”这里更容易地帮助和理解我的意思： http://live.datatables.net/jujofoye/3/edit

我从仅包含ID的HTML表开始。然后我使用该ID在rowCallback调用的API，并在表中使用jQuery $('td:eq(1)', nRow).html(json.Title);

function customFnRowCallback(nRow, aData, iDisplayIndex) { 
    var imdbID = aData[0]; 

    fetch("http://www.omdbapi.com/?i="+imdbID+"&plot=short&r=json&tomatoes=true") 
    .then(function(response) { 
    return response.json(); 
    }) 
    .then(function(json) { 
    $('td:eq(1)', nRow).html(json.Title); 
    }) 
    .catch(function(error) { 
    console.log('There has been a problem with your fetch operation: ' + error.message); 
    }); 
} 

写入获取值但这里的问题是，你不能排序的第二列。即使你可以很好地看到数据。我敢打赌，DataTable并不真的知道有新的数据，你最终会排序空值而不是你添加的值。

同样问题的第二个效果（不会显示在我的小提琴中）是折叠的行（行数在宽度不足时折叠）在展开行时也显示为空。
第三个影响是搜索对取出的数据不起作用。

有没有一种方法可以真正将提取的数据添加到DataTable？不美观的是。

（注：所有我能找到的答复是有关填充一个完整的数据表中有一个AJAX请求我只将数据添加到已经填充的DataTable）

Answer 1

我采取了不同的方法。我将DataTable ajax与when/done一起使用，所以在处理所有获取之前它不会刷新表。

我设置了排序，因此列表将按字母顺序排列，即使那些不是列表的顺序。 我也从imdb中获得了独特的一组值。

http://jsbin.com/yojoka/edit?html,js,output

<script type="text/javascript"> 
    // Sample return set from 
    var sampleReturn = { "Title": "Seven Samurai", "Year": "1954", "Rated": "UNRATED", "Released": "19 Nov 1956", "Runtime": "207 min", "Genre": "Adventure, Drama", "Director": "Akira Kurosawa", "Writer": "Akira Kurosawa (screenplay), Shinobu Hashimoto (screenplay), Hideo Oguni (screenplay)", "Actors": "Toshirô Mifune, Takashi Shimura, Keiko Tsushima, Yukiko Shimazaki", "Plot": "A poor village under attack by bandits recruits seven unemployed samurai to help them defend themselves.", "Language": "Japanese", "Country": "Japan", "Awards": "Nominated for 2 Oscars. Another 5 wins & 6 nominations.", "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_SX300.jpg", "Metascore": "98", "imdbRating": "8.7", "imdbVotes": "238,165", "imdbID": "tt0047478", "Type": "movie", "Response": "True" }; 
    var deferreds = []; 
    var newData = []; 
    $(function ($) { 
     var dt = $("#example").DataTable({ 
      columnDefs:[{targets:[0, -1], width:"150px"}], 
      columns: [ 
       { data: "imdbID" }, 
       { data: "Title" }, 
       { "data": "Year" } 
      ], 
      deferLoading: 0, 
      deferRendering: true, 
      "order": [[ 1, "asc" ]], 
      ajax: function (data, cb, setting) { 
       // get the list of ids created by DataTables from the embedded html 
       var curData = $("#example").DataTable().rows().data(); 
       // if you don't clear, you will end up with double entries 
       $("#example").DataTable().clear(); 
       $.each(curData, function (i, item) { 
        var sr = { i: item.imdbID, plot:"short", r:"json", "tomatoes":true}; 
        deferreds.push(
        $.get("http://www.omdbapi.com/", sr) 
        .then(function (response) { 
         // push the response into the global array 
         newData[newData.length] = response; 
        }) 
       ); 
       }); 

       // now make all of the calls. When done, use the callback to return the data and populate the table 
       $.when.apply(null, deferreds) 
        .done(function() { 
         cb({ data: newData }) 
       }); 
      } 
     }); 
    }); 
</script> 

Answer 2

您在数据表是正确的不知道表中有什么要排序。 我会说完成表完成后运行该功能。

$('#example').find('tbody tr').each(customFnRowCallback); 

function customFnRowCallback() 
{ 
    var $this = $(this); 
    var imdbID = $this.find('td:eq(0)').text(); 

    fetch("http://www.omdbapi.com/?i="+imdbID+"&plot=short&r=json&tomatoes=true") 
    .then(function(response) { 
    return response.json(); 
    }) 
    .then(function(json) { 
    $this.find('td:eq(1)').text(json.Title); 
    }) 
    .then(function() { 
    $('#example').DataTable(); 
    }) 
    .catch(function(error) { 
    console.log('There has been a problem with your fetch operation: ' + error.message); 
    }); 
}