Динамическое формирование таблицы

[Sveta]

Здравствуйте! Всем удачного дня и хорошего настроения!
Столкнулась с такой проблеммой - есть данные, полученные через 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

Почему? или чтобы динамически сформировать таблицу есть какая-то хитрость?

[Sveta]

чем дальше тем интереснее)))
насчет подгрузки данных в таблицу - оказалось все гораздо проще..

$.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": {
    "Name":["Station name","Station ID","Observation date","Temperaature","Pressure","Wind direction","Wind speed"],
    "Abr": ["Name","Sti","Date","ttt","ppp","dd","ff"]
    
  },

[Sveta]

названия колонок устанавливаются так:

"aoColumns": [
	{ "sTitle": "Engine" },
	{ "sTitle": "Браузер" }
             ]

Но как это сделать через myJson?

[Sveta]

Здравствуйте)
Возможно ли динамически формировать колонки таблицы? уже давно не могу сообразить - как это сделать...
Со строками таблицы все просто, а вот с колонками - сложнее:

"aaData":myJson.aaData_0,
"aoColumns":myJson.Def_aaData_0.Abr

такой код правильно устанавливает число колонок, и заполняет строчки...
Но вот названия колонок не отображаются...

[melky]

Возможно ли динамически формировать колонки таблицы? уже давно не могу сообразить - как это сделать...

такого нет в API -> нет возможности добавить столбец.

[Sveta]

плохо...а если параметру "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'}

[melky]

очевидно, что что-то не так с mas должно работать.

я не телепат, поэтому пишите где-нибудь рядом debugger, или console.log(mas) и вперёд, изучать свой скрипт.

[Sveta]

Так в том и дело, что все уже проверено и перепроверено..((((
на 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); возвращает - то все работает
не знаю что и делать уже...если бы я поняла в чем ошибка...
или может можно как-то названия столбцов потом задать? количество-то правильно формируется в случае массива...

[Sveta]

с таблицей намучилась...в итоге заработало так:

$.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..у меня не работает почему-то..но ошибка может быть и в другом месте)

[mistbow]

Доброго времени суток!
Не знаю как у кого, а у меня второй код из первого поста работает на ура.

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);