Таблицы данных - использование имен столбцов вместо индексов

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 

И я предполагаю, что это происходит потому, что DataTables с помощью индексов вместо имен столбцов, чтобы получить доступ к данным из pageData. Я думал, что sTitle будет выполнять эту работу, но это не так. Теперь я не могу найти подходящую опцию для указания имен столбцов на datatable, кроме sName, которая используется только при отправке данных на сервер.

Я чувствую, что решение будет простым, которое я пропустил. Ну, что мне здесь не хватает?

Answer 1

jQuery datatable принимает данные как массив массивов. Поэтому вам нужно преобразовать ваши данные из массива объектов в массив массивов.

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/

EDIT: Вам не нужно конвертировать. Это можно сделать, указав для столбцов значение 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/