如何將從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/MV5BMTc5MDY1MjU5MF5BMl5BanBnXkFtZTgwNDM2OTE4MzE@._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); 
    }); 
}