DataTables - 使用列名而不是索引

Question

我有一個DataTables設置如下。

var pageData = [ 
    { 
     "id":"2", 
     "slug":"about\/history", 
     "title":"History", 
     "last_updated":"2013-04-21 09:50:41" 
    }, 

    { 
     "id":"3", 
     "slug":"about", 
     "title":"About", 
     "last_updated":"2013-04-21 10:42:22" 
    } 
]; 

$(function() { 
    $("#pageList").dataTable({ 
     "aaData"  : pageData, 
     "aoColumns" : [ 
      { 
       "sTitle" : "slug" 
      }, 
      { 
       "sTitle" : "title" 
      }, 
      { 
       "sTitle" : "last_updated" 
      }, 
      { 
       "sTitle" : "id" 
      } 
     ] 
    }); 
}); 

現在，當我運行它，我得到以下錯誤警報

DataTables warning (table id = 'pageList'): 
    Requested unknown parameter '0' from the data source for row 0 

而且我認爲這是因爲使用的數據表的索引，而不是列名的，從pageData訪問數據。我認爲sTitle會做這項工作，但事實並非如此。現在，我找不到一個適當的選項來指定除了sName之外的數據表列名，它僅在發送數據到服務器時使用。

我覺得解決方案將是我忽略的一個簡單的解決方案。那麼，我在這裏錯過了什麼？

Answer 1

jQuery數據表以數組數組的形式接受數據。所以你必須將數據從對象數組轉換爲數組數組。

var pageData = [{ 
    "id": "2", 
     "slug": "about\/history", 
     "title": "History", 
     "last_updated": "2013-04-21 09:50:41" 
}, 

{ 
    "id": "3", 
     "slug": "about", 
     "title": "About", 
     "last_updated": "2013-04-21 10:42:22" 
}]; 

var aaPageData = []; 
for (var i = 0; i < pageData.length; i++) { 
    var item = pageData[i]; 
    aaPageData[i] = [item.slug, item.title, item.last_updated, item.id]; 
} 

$(document).ready(function() { 
    $("#table").dataTable({ 
     "aaData": aaPageData, 
     "aoColumns": [{ 
      "sTitle": "slug", 
     }, { 
      "sTitle": "title" 
     }, { 
      "sTitle": "last_updated" 
     }, { 
      "sTitle": "id" 
     }] 
    }); 
}); 

演示：http://jsfiddle.net/BYcsk/

編輯：你不需要轉換。您可以通過爲列指定mData屬性來實現此目的。錯誤即將到來，因爲你還沒有給它。

var pageData = [{ 
    "id": "2", 
     "slug": "about\/history", 
     "title": "History", 
     "last_updated": "2013-04-21 09:50:41" 
}, 

{ 
    "id": "3", 
     "slug": "about", 
     "title": "About", 
     "last_updated": "2013-04-21 10:42:22" 
}]; 


$(document).ready(function() { 
    $("#table").dataTable({ 
     "aaData": pageData, 
     "aoColumns": [{ 
      "sTitle": "slug", 
      "mData": "slug" 
     }, { 
      "sTitle": "title", 
      "mData": "title" 
     }, { 
      "sTitle": "last_updated", 
      "mData": "last_updated" 
     }, { 
      "sTitle": "id", 
      "mData": "id" 
     }] 
    }); 
}); 

演示：http://jsfiddle.net/BYcsk/3/