Таблицы данных с несколькими таблицами на одной странице

Question

Я ищу на сайте datatables.net некоторые пояснения или документацию, а не о том, что делать, если у вас более 1 таблицы на одной странице и вы хотите обрабатывать каждую из них по-разному.

Я попробовал очевидное. Назначение каждому отдельному идентификатору и затем выполнение кода для каждого в моем js, но по некоторым причинам это не позволяет. Я не получаю сообщение об ошибке, но datatables сам ломается и ничего не выполняет.

$(document).ready(function() {

var oTable = $('#inbox').dataTable( {
    "bAutoWidth": false, 
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ 0, -1 ] },
        { "sWidth": "20px", "aTargets": [ 0, -1 ] },
        { "sWidth": "100px", "aTargets": [ 1 ] },
        { "sWidth": "150px", "aTargets": [ 3 ] }
    ]
} );

var oTable = $('#sent').dataTable( {
    "bAutoWidth": false, 
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ 0, -1 ] },
        { "sWidth": "20px", "aTargets": [ 0, -1 ] },
        { "sWidth": "100px", "aTargets": [ 1 ] },
        { "sWidth": "150px", "aTargets": [ 3 ] }
    ]
} );

});

UPDATE

http://pastebin.com/4d3kPmk0

$(document).ready(function() {

var oTable = $('.dataTable').dataTable( {
    "bAutoWidth": false, 
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ 0, -1 ] },
        { "sWidth": "20px", "aTargets": [ 0, -1 ] },
        { "sWidth": "100px", "aTargets": [ 1 ] },
        { "sWidth": "150px", "aTargets": [ 3 ] }
    ]
} );

});

$(window).load(function(){
/*
 * Tabs
 */
$('#tab-panel-1').createTabs();
});

Answer 1

Вы переделываете одну и ту же переменную.

var oTable = $('#inbox').dataTable({ /* ... */ });

var oTable = $('#sent').dataTable({ /* ... */ });

Часть «oTable» - это то, что Аллан (автор) использует в своих примерах, чтобы соответствовать его соглашениям.Строчная буква «о» относится к чему-то, что является объектом, и это таблица.Но вы можете использовать любое имя, какое захотите.

У вас была правильная идея, но вам нужно использовать:

var inboxTable = $('#inbox').dataTable({ /* ... */ });

var sentTable = $('#sent').dataTable({ /* ... */  });

И затем, если вы будете следовать его другим примерам на сайте,вы просто заменяете свое собственное имя переменной на «oTable».

Живой пример: http://live.datatables.net/amixis/edit#javascript,html

---

[обновление]

Я должен отметить, что недавно яхранение нескольких таблиц во вложенном объекте;У меня есть механизм опроса, который перебирает определенные массивы таблиц (а не другие), поэтому пример объекта выглядит примерно так:

var oTables = {
  "polling" : [
    $('#someTable').dataTable(opts),
    $('#anotherTable').dataTable(opts)
  ],
  "nonpolling" : [
    $('#staticTable').dataTable(opts)
  ]
};

Чистый результат остается тем же.Но теперь я могу вызывать setTimeouts для моего массива объектов таблицы опроса:

if(someBoolean) {
  for(var i=0; i < oTables.polling.length; i++) {
    setTimeout(pollingFunction, 5000)
  }
}

(сильно упрощено)