JavaScript JQuery - Tabelle transponieren

n0NamE

Cadet 3rd Year
Registriert
Okt. 2012
Beiträge
50
Hallo zusammen

Ich arbeite zur Zeit an einem Tool für eine Druckerverwaltung.
Grob zum Aufbau:
- Im Hintergrund arbeitet eine MySQL Datenbank
- Webseite wird mit Bootstrap dargestellt
- php für die Abfrage der DB und mit Json einen String zurück geben
- JQuery wird diese Abfrage(php Aufruf) machen, soblad die Website geladen ist und den Json String in der Tabelle darstellen

Mein Ziel sieht so aus (habe es hier hard gecoded):

ziel.JPG

Die Abfrage funktioniert problemlos, nur weiss ich nicht, wie ich die Tabelle transponieren kann.

Die Daten werden unter dem letzten Tabellen-Header aufgelistet:
problem.JPG

Hier der HTML-Code:

HTML:
<table class="table" id="druckerdetails" >
	<thead >
		<tr><th>Name</th></tr>
		<tr><th>IP</th></tr>
		<tr><th>Standort</th></tr>
		<tr><th>Abteilung</th></tr>
		<tr><th>Kontakt</th></tr>
		<tr><th>Seriennummer</th></tr>
		<tr><th>Hersteller</th></tr>
		<tr><th>Modell</th></tr>
	</thead>
	<tbody>
	</tbody>
</table>

Hier wird im JavaScript mithilfe von JQuery die Tabelle befüllt:
Code:
$(document).ready(function() {
 $('#druckerdetails').dataTable( {
    	
	"bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false,
        "bProcessing": true,
	"bServerSide": false,
        "sAjaxSource": 'druckerdetails.php?druckername=RAGPLC001'
    } );
} );

Bei mir stellt sich jetzt die Frage, wie ich mein Ziel erreichen kann. Ich habe durch google einiges gefunden, jedoch ohne Erfolg.

Ich hoffe es alles soweit verständlich.

Danke und Gruss

n0NamE
 
HTML:
<table class="table" id="druckerdetails" >
		<tr>
			<th>Name</th>
			<td>asdggfauhetiowehft</td>
		</tr>
		<tr>
			<th>IP</th>
			<td>asdggfauhetiowehft</td>
		</tr>
		<tr>
			<th>Standort</th>
			<td>asdggfauhetiowehft</td>
		</tr>
		<tr>
			<th>Abteilung</th>
			<td>asdggfauhetiowehft</td>
		</tr>
		<tr>
			<th>Kontakt</th>
			<td>asdggfauhetiowehft</td>
		</tr>
		<tr>
			<th>Seriennummer</th>
			<td>asdggfauhetiowehft</td>
		</tr>
		<tr>
			<th>Hersteller</th>
			<td>asdggfauhetiowehft</td>
		</tr>
		<tr>
			<th>Modell</th>
			<td>asdggfauhetiowehft</td>
		</tr>
</table>
;)
 
Du musst jede <tr> um ein <td> ergänzen, in dem die Daten zur jeweiligen Zeile stehen.

Aus <tr><th>Name</th></tr> wird also <tr><th>Name</th><td>Hier kommt dein Druckername</td></tr>
 
Habe es gerade ausprobiert. Die Darstellung stimmt, jedoch werden die Daten nicht in die Tabelle eingetragen.

loesung_1.JPG
 
Morgen zusammen,

ich bin nun ein Schritt weiter. Die Tabelle wird transponiert, aber es gibt eine komische Situation.

Das Transponieren wird mittels JavaScript gemacht:

Code:
$(function() {
	var table = $('#druckerdetails');
	alert('Besten Dank, dass Sie isyPrint benutzen :)');
	table.find('thead tr').detach().prependTo( table.find('tbody') );
	var t = table.find('tbody').eq(0);
	var r = t.find('tr');
	var cols= r.length;
	var rows= r.eq(0).find('td,th').length;
	var cell, next, tem, i = 0;
	var tb= $('<tbody></tbody>');
	
	while(i<rows){
	cell= 0;
	tem= $('<tr></tr>');
	while(cell<cols){
	next= r.eq(cell++).find('td,th').eq(0);
	tem.append(next);
	}
	tb.append(tem);
	++i;
	}
	table.find('tbody').remove();
	$(tb).appendTo(table);
	$(table)
	.find('tbody tr:eq(0)')
	.detach()
	.appendTo( table.find('thead') )
	.children();
	table.show();
});

Mein Problem ist das Alert (Zeile 3). Lässt man das Alert dort stehen funktioniert alles super, jedoch ist das Alert völlig unsinnig. Lässt man das Alert weg, wird die Tabelle transponiert, jedoch ohne Datensatz!

Mit Alert:

mitalert.JPG

Ohne Alert:

ohnealert.JPG

Des Weiteren funktioniert das Transponieren mit dem Alert nur bei IE und FF. Chrome stoppt durch das Alert den ganzen Aufbau der Seite. Es schein so, als ob die Transponieren-Funktion durchgeführt, bevor die Daten in der Tabelle stehen, obwohl die Transponieren-Funktion nach dem Füllen der Tabelle steht.

Kann mir hier jemand weiterhelfen?

Thx und Gruss

n0NamE
 
Jep. Hier ist das ganze JavaScript:

Code:
$(document).ready(function() {
	
    $('#tonerdaten').dataTable( {
	"bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false,
        "bProcessing": true,
	"bServerSide": false,
        "sAjaxSource": 'php/index_toners.php?druckertyp=3'
    } );
    
     $('#druckertabelle').dataTable( {
	"bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false,
        "bProcessing": true,
	"bServerSide": false,
        "sAjaxSource": 'php/index_druckertabelle.php'
    } );
    
    $('#druckerdetails').dataTable( {
    	
	"bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false,
        "bProcessing": true,
	"bServerSide": false,
        "sAjaxSource": 'php/index_druckerdetails.php?druckername=RAGPLM002'
    } );
    
    $(function() {
		var table = $('#druckerdetails');
		alert('Besten Dank, dass Sie isyPrint benutzen :)');
		table.find('thead tr').detach().prependTo( table.find('tbody') );
		var t = table.find('tbody').eq(0);
		var r = t.find('tr');
		var cols= r.length;
		var rows= r.eq(0).find('td,th').length;
		var cell, next, tem, i = 0;
		var tb= $('<tbody></tbody>');
		
		while(i<rows){
		cell= 0;
		tem= $('<tr></tr>');
		while(cell<cols){
		next= r.eq(cell++).find('td,th').eq(0);
		tem.append(next);
		}
		tb.append(tem);
		++i;
		}
		table.find('tbody').remove();
		$(tb).appendTo(table);
		$(table)
		.find('tbody tr:eq(0)')
		.detach()
		.appendTo( table.find('thead') )
		.children();
		table.show();
	});
} );
 
Hi,

und so klappt es? Oder so klappt es nicht? :) Verstehe das "jep" nicht ganz :)

VG,
Mad
 
Sorry, nein es klappt immer noch nicht...
Hatte das ".ready" schon die ganze Zeit.
 
Hi,

ist denn das JSON-Statement zu diesem Zeitpunkt schon vom Server zurück durch AJAX?

VG,
Mad
 
So wie es aussieht werden die drei php-Dateien(pro Tabelle eine php-Datei) nach dem JavaScript ausgeführt (Hier ohne Alert).

timeline.JPG
 
Hi,

verstehe ich das richtig: deine Methode wird schon ausgeführt, wenn die AJAX-Anfragen noch gar nicht fertig sind? Würde ja logischerweise bedeuten, du musst erstmal prüfen, ob du die Daten zu dem Zeitpunkt schon hast. Du darfst so einen asynchronen Programmablauf nicht mit einem synchronen "normalen" Ablauf durcheinanderbringen. Es kann gut sein, dass die Daten noch nicht da sind. Schau doch mal, wie es mit Callback-Methoden aussieht, also Methoden, die aufgerufen werden, wenn der AJAX-Aufruf wieder "zurück kommt" mitsammt den Daten im Gepäck. In dieser Callback Methode könntest du dann die Tabellendaten weiter verarbeiten.

VG,
Mad
 
Jap, du machst einfach alles gleichzeitig.

Entweder:
Code:
$.ajax( {
	url: 'abc.php',
	success: function( data )
	{
		// hier dein code
	}
} );
so machst du einen Ajax Aufruf an ein Script, was dir Daten zurückgibt und du diese dann manipulieren kannst.

Oder (besser, falls möglich)
Code:
$('#druckerdetails').ready( function()
{
	// hier dein code
} );
Der Code wird dann ausgeführt, wenn das Element #druckerdetails alle nötigen Änderungen durchgeführt hat.
 
Guten Morgen zusammen.

Ein Kollege und und ich haben das ganze ausprobiert und sind leider nicht auf einen grünen Zweig gekommen, wie wir das Transponieren erst dann ausführe, sobald die Daten da sind.

@Yuuri

Code:
$('#druckerdetails').ready( function()
{
	// hier dein code
} );

Hat leider nicht funktioniert...

Code:
$.ajax( {
	url: 'abc.php',
	success: function( data )
	{
		// hier dein code
	}
} );

Haben wir auch nicht hinbekommen.

@Madman1209

Eine Callback-Funktion bekomme ich auch nicht zum Laufen. Ich dachte so:

Code:
$('#druckerdetails').dataTable(transpose(){
    	
	"bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false,
        "bProcessing": true,
	"bServerSide": false,
        "sAjaxSource": 'php/index_druckerdetails.php?druckername=RAGPLM002'
} );

Und ausserhalb von
Code:
$(document).ready(function() {

Code:
function transpose(){
	
	var table = $('#druckerdetails');
	/*alert('Besten Dank, dass Sie isyPrint benutzen :)');*/
	table.find('thead tr').detach().prependTo( table.find('tbody') );
	var t = table.find('tbody').eq(0);
	var r = t.find('tr');
	var cols= r.length;
	var rows= r.eq(0).find('td,th').length;
	var cell, next, tem, i = 0;
	var tb= $('<tbody></tbody>');
	
	while(i<rows){
	cell= 0;
	tem= $('<tr></tr>');
	while(cell<cols){
	next= r.eq(cell++).find('td,th').eq(0);
	tem.append(next);
	}
	tb.append(tem);
	++i;
	}
	table.find('tbody').remove();
	$(tb).appendTo(table);
	$(table)
	.find('tbody tr:eq(0)')
	.detach()
	.appendTo( table.find('thead') )
	.children();
	table.show();
	
}

Danke und Gruss

n0NamE
 
Zurück
Oben