2013-03-29 4 views
4

Так таблица на страницеJQuery DataTable AJAX население


<table width="100%" id="ticketListTable" class="genmed"></table> 

Затем я использую AJAX, чтобы вернуть данные


$.ajax({ 
    type: 'POST', 
    url: "ticketAjax.php", 
    data: '&m=swapTicketList', 
    dataType: "json", 
    success: function(resultData) { 
     $('#ticketListTable').dataTable({ 
      "aaData": resultData, 
      "aaSorting": [[0, "desc"]], 
      "bJQueryUI": true, 
      "bScrollInfinite": true, 
      "bScrollCollapse": true, 
      "bDestroy": true, 
      "bDeferRender": true, 
      "iDisplayLength": 100, 
      "sScrollY": "1000px", 
      "sDom": "Rlfrtip", 
     }); 
    } 
}); 

на основе AJAX работает и возвращающимся


[{"ID":["17316","17314","17313","17312","17311","17310","17309","17308","17307".... 

Однако aaData не заполняет таблицу данными Json. Я не понимаю, как это работает? Я прочитал довольно много форумов и сообщений, и все они, похоже, приводят к такому типу использования.

ответ

1

Ok, так что WASN» так легко, как я думал. В AJAX мне пришлось построить массив, а затем вернуть его с помощью json_encode внутри другого массива.

json_encode(array('tickets' => $tickets)) //-- WHERE $tickets = array(array(1, 'Options 1'), array(2, 'Options 2')) 

Я также должен был вернуться в заголовки столбцов массива

json_encode(array('tickets' => $tickets, 'headers' => $headers)) //-- WHERE $headers = array('ID', 'Options', etc..) 

Сумма элементов в $ заголовков должен соответствовать $ билеты или это не будет инициализировать таблицу.

Тогда часть JS для заголовков был

  aoColumnArray = []; 
     $.each(resultData.headers, function(index, value) { 
      var aoColumns = new Object; 
      aoColumns['sTitle'] = value; 
      aoColumns['sClass'] = 'genmed'; 
      aoColumnArray.push(aoColumns); 
     }); 

Теперь построить DataTable объект

  ticketTable= []; 
     ticketTable.aaData = resultData.tickets; 
     ticketTable.aaSorting = [[0, "asc"], [1, "desc"], [2, "desc"]]; 
     ticketTable.aoColumns = aoColumnArray; 
     ticketTable.bJQueryUI = true; 
     ticketTable.bScrollInfinite = true; 
     ticketTable.bScrollCollapse = true; 
     ticketTable.bDestroy = true; 
     ticketTable.bDeferRender = true; 
     ticketTable.iDisplayLength = 50; 
     ticketTable.sScrollY = '400px'; 
     ticketTable.sDom = 'Rlfrtip'; 
     $('#ticketTable').dataTable(ticketTable); 

Используйте параметры, которые вы хотите использовать. Важной частью является результат обработки данных. aaData & aoColumns - это где используются данные AJAX. Все это инициализируется в функции успеха вызова ajax.

Надеюсь, это поможет кому-то еще!

2

Вам необходимо предоставить массив массивов для данных, а не объектов. Также укажите свои столбцы. Суб массивы будут представлять отдельные строки, основной массив оборачивает все строки

Следуйте JS Array пример

http://www.datatables.net/release-datatables/examples/data_sources/js_array.html

Примечания Структуры вложенных массивов предоставленной aaData и следовать этой структуре

+0

Если это место, то почему [{"sTitle": "ID", "sClass": "genmed"}, {"sTitle": "Options", "sClass": "genmed"}, {" sTitle ":" Created "," sClass ":" genmed "}, {" sTitle ":" Status "," sClass ":" genmed "}], не заполняя столбцы? –

+0

Ни один из данных или кода, который вы показали, не соответствует этой структуре – charlietfl

+0

Я все понял, добавив его в сообщение для других, спасибо, что нашли время, чтобы помочь! –