2011-12-29 2 views
5

В jquery Datatables можно определить столбцы с серверным скриптом? Мне нужно что-то вроде этого enter image description herejquery datatables - получить столбцы от json

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

+1

Почему бы вам не получить полные данные с помощью JSON, а затем создать HTML-таблицу, вы можете показать его пользователю – Moons

+0

я не совсем понимаю, что вы имеете в виду под «создавать HTML таблицы». Создать с помощью Javascript? – mik

+0

, когда вы получаете JSON, тогда вы можете проанализировать его с помощью JSON.parse, а затем вы можете перебирать объекты для создания таблицы HTML, используя JQuery – Moons

ответ

5

Чтобы расширить то, что говорит Камал Deep Singh:

Вы можете динамически создать таблицу на лету, а затем применить DataTables к нему, чтобы получить функциональность DataTables.

// up in the html 
<table id="myDatatable" class="... whatever you need..."></table> 

, а затем:

// in the javascript, where you would ordinarily initialize the datatable 
var newTable = '<thead><tr>'; // start building a new table contents 

// then call the data using .ajax() 
$.ajax({ 
    url: "http://my.data.source.com", 
    data: {}, // data, if any, to send to server 
    success: function(data) { 
     // below use the first row to grab all the column names and set them in <th>s 
     $.each(data[0], function(key, value) { 
      newTable += "<th>" + key + "</th>"; 
     }); 
     newTable += "</tr></thead><tbody>";     

     // then load the data into the table 
     $.each(data, function(key, row) { 
      newTable += "<tr>"; 
       $.each(row, function(key, fieldValue) { 
        newTable += "<td>" + fieldValue + "</td>"; 
       }); 
      newTable += "</tr>"; 
     }); 
     newTable += '<tbody>'; 

     $('#myDatatable').html(newTable); // replace the guts of the datatable's table placeholder with the stuff we just created. 
    } 
}); 

// Now that our table has been created, Datatables-ize it 
$('#myDatatable').dataTable(); 

Примечание Вы можете поставить настройки в этом .dataTable() как нормальное, однако, не «sAjaxSource» или любой из связанных функций данных пробивной - это применяя данные к уже существующей таблице, которую мы создали «на лету».

Итак, это своего рода хакерский способ сделать это, но он должен работать.

В настоящее время нет встроенного метода динамического преобразования данных с динамическими данными. Смотрите здесь: https://github.com/DataTables/DataTables/issues/273

+0

Спасибо, но я искал более удобный способ, похожий на этот «sAjaxSource»: «scripts/server_processing.php» – mik

5

Я думаю, что я нашел то, что вы искали

Я вставить код + разместить ссылку на аналогичную Q», в котором вы получите гораздо больше информации ...

$.ajax({ 
    "url": 'whatever.php', 
    "success": function (json) { 
     json.bDestroy = true; 
     $('#example').dataTable(json); 
    }, 
    "dataType": "json" 
}); 

где JSON-то вроде этого

{ 

"aaData": [ 
[ "2010-07-27 10:43:08", "..."], [ "2010-06-28 17:54:33", "..."], 
[ "2010-06-28 16:09:06", "..."], [ "2010-06-09 19:15:00", "..."] 
] , 

"aaSorting": [ 
    [ 1, "desc" ] 
], 

"aoColumns": [ 
    { "sTitle": "Title1" }, 
    { "sTitle": "Title2" } 
] 

} 

здесь ссылка на оригинальную резьбу

Column definition via JSON array (ajax)

 Смежные вопросы

  • Нет связанных вопросов^_^