Динамическое формирование таблицы
Здравствуйте! Всем удачного дня и хорошего настроения!
Столкнулась с такой проблеммой - есть данные, полученные через Ajax и по этим данным нужно сформировать таблицу. Сложность в том, что количество столбцов мы узнаем только получив наши данные - количество, название, сами данные кот. нужно в эту таблицу поместить - все есть в получаемом файле. вот чего не понятно-то:
var default_options = { "
bProcessing": true ,
aaData":[['Москва','27612','2012-10-29 06:00','2.7','1000','270','2',],['Нара','27612','2012-10-29 06:00','3.7','1012','260','2',],['Малоярослявнец','27612','2012-10-29 06:00','4.7','1033','280','2',],] ,
aoColumns": [{ 'sTitle': 'Name'},{ 'sTitle': 'Sti'},{ 'sTitle': 'Date'},{ 'sTitle': 'ttt'},{ 'sTitle': 'ppp'},{ 'sTitle': 'dd'},{ 'sTitle': 'ff'},]
};
$('#example').dataTable(default_options);
вот такой код работает, табица формируется,но здесть я сама данные прописываю в скрипте, а если эти данные поместить в переменные и написать так:
var head="[{ 'sTitle': 'Name'},{ 'sTitle': 'Sti'},{ 'sTitle': 'Date'},{ 'sTitle': 'ttt'},{ 'sTitle': 'ppp'},{ 'sTitle': 'dd'},{ 'sTitle': 'ff'},] ";
var body="[['Москва','27612','2012-10-29 06:00','2.7','1000','270','2',],['Нара','27612','2012-10-29 06:00','3.7','1012','260','2',],['Малоярослявнец','27612','2012-10-29 06:00','4.7','1033','280','2',],]";
var default_options = { "
bProcessing": true ,
aaData": body,
aoColumns":head
};
$('#example').dataTable(default_options);
то получаю ошибку: DataTables warning (table id = 'example'): Requested unknown parameter '1' from the data source for row 0 Почему? или чтобы динамически сформировать таблицу есть какая-то хитрость? |
чем дальше тем интереснее)))
насчет подгрузки данных в таблицу - оказалось все гораздо проще..
$.getJSON("data_m.json", function (myJson) {
var table="<div id='demo'><table cellpadding='0' cellspacing='0' border='0' class='display' id='example'></table></div>";
$('#container').html('');
$('#container').append(table);
var default_options = {
"bProcessing": true ,
"aaData":myJson.aaData_0,
"aoColumns": [{ 'sTitle': 'Name'},{ 'sTitle': 'Sti'},{ 'sTitle': 'Date'},{ 'sTitle': 'ttt'},{ 'sTitle': 'ppp'},{ 'sTitle': 'dd'},{ 'sTitle': 'ff'},]
};
$('#example').dataTable(default_options);
});
Данные в таблицу загружаются просто...а вот как быть с названиями колонок?? строчка "aoColumns":myJson.Def_aaData_0.Abr делает так, что количество колонок верное, но названия не отображаются myJson.Def_aaData_0[ это Код:
"Def_aaData_0": { |
названия колонок устанавливаются так:
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Браузер" }
]
Но как это сделать через myJson? |
Здравствуйте)
Возможно ли динамически формировать колонки таблицы? уже давно не могу сообразить - как это сделать... Со строками таблицы все просто, а вот с колонками - сложнее: "aaData":myJson.aaData_0, "aoColumns":myJson.Def_aaData_0.Abr такой код правильно устанавливает число колонок, и заполняет строчки... Но вот названия колонок не отображаются... |
Цитата:
|
плохо...а если параметру "aoColumns" передать строку или массив?
таблицу мне менять потом не нужно, когда формируется html-страничка - формируется и моя табличка, просто каждый раз она будет с разным количеством столбцов..я вот чего понять не могу: почему такой код работает:
"aoColumns": [
{ "sTitle": "Name" },
{ "sTitle": "Sti" },
{ "sTitle": "Date" },
{ "sTitle": "ttt" },
{ "sTitle": "ppp"}
]
А такой нет? "aoColumns":mas где mas это массив { 'sTitle': 'Name'},{ 'sTitle': 'Sti'},{ 'sTitle': 'Date'},{ 'sTitle': 'ttt'},{ 'sTitle': 'ppp'} |
очевидно, что что-то не так с mas :) должно работать.
я не телепат, поэтому пишите где-нибудь рядом debugger, или console.log(mas) и вперёд, изучать свой скрипт. |
Так в том и дело, что все уже проверено и перепроверено..((((
на alert(mas); выводит { 'sTitle': 'Name'},{ 'sTitle': 'Sti'},{ 'sTitle': 'Date'},{ 'sTitle': 'ttt'},{ 'sTitle': 'ppp'},{ 'sTitle': 'dd'},{ 'sTitle': 'ff'} Что интересно-то - количество столбцов он формирует правильное! но названия не пишет((( я также пробовала со строкой msgh = [{ 'sTitle': 'Name'},{ 'sTitle': 'Sti'},{ 'sTitle': 'Date'},{ 'sTitle': 'ttt'},{ 'sTitle': 'ppp'},{ 'sTitle': 'dd'},{ 'sTitle': 'ff'},] если пишу "aoColumns":msgh то не работает(даже количество не правильное)...а если копирую в "aoColumns": то что мне alert(msgh); возвращает - то все работает не знаю что и делать уже...если бы я поняла в чем ошибка... или может можно как-то названия столбцов потом задать? количество-то правильно формируется в случае массива... |
с таблицей намучилась...в итоге заработало так:
$.getJSON("data.json", function (myJson) {
var table="<div id='demo'><table cellpadding='0' cellspacing='0' border='0' class='display' id='example'><thead id = 'headTable'></thead><tbody id = 'bodyTable'></tbody><tfoot></tfoot></table></div>";
$('#container').html('');
$('#container').append(table);
var colName="";
var mystr="<tr>";
for(var i=0; i<myJson.Def_aaData_0.Abr.length; i++){
colName="<th>"+myJson.Def_aaData_0.Abr[i]+"</th>"
mystr=mystr+colName;
}
mystr=mystr+"</tr>";
$('#headTable').html('');
$('#headTable').append(mystr);
//Таблица
var default_options = {
"aaData":myJson.aaData_0,
"aoColumns":myJson.Def_aaData_0.Abr
};
$('#example').dataTable(default_options);
});
если это проще можно сделать..поделитесь знаниями) только я не ручаюсь за работу в InternetExplorer..у меня не работает почему-то..но ошибка может быть и в другом месте) |
Доброго времени суток!
Не знаю как у кого, а у меня второй код из первого поста работает на ура.
var head=[{ 'sTitle': 'Name'},{ 'sTitle': 'Sti'},{ 'sTitle': 'Date'},{ 'sTitle': 'ttt'},{ 'sTitle': 'ppp'},{ 'sTitle': 'dd'},{ 'sTitle': 'ff'},];
var body=[['Москва','27612','2012-10-29 06:00','2.7','1000','270','2',],['Нара','27612','2012-10-29 06:00','3.7','1012','260','2',],['Малоярослявец','27612','2012-10-29 06:00','4.7','1033','280','2',],];
var default_options = {
bProcessing: true ,
aaData: body,
aoColumns: head
};
$('#example').dataTable(default_options);
|
| Часовой пояс GMT +3, время: 10:57. |