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/