Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/dbp09/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/dbp09/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/dbp09/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Datenbankpraktikum SS 2009 - Gruppe 3 - Tabellen

HowTo: Tabellen erstellen

Nico Marniok

<!-- Eine Form um die Tabelle ist nur nötig, falls es in ihr checkboxen gibt-->
<form method="post" action="index.php?controller=student" id="form">
<table class="s ui-widget"><!--Klassen der Tabelle müssen "s" und "ui-widget" sein-->
  <thead class="ui-widget-header"><!--Der Header der Tabelle mit der Klasse "ui-widget-header"-->
    <tr><!--Die Überschriften der einzelnen Spalten-->
      <th></th>
      <th style="width:96px;">MatrikelNr</th>
      <th style="width:192px;">Vorname</th>
      <th style="width:192px;">Nachname</th>
      <th style="width:128px;">Studiengang</th>
      <th colspan=3>Optionen</th>
    </tr>
  </thead>
 
  <tfoot class="ui-widget-header"><!--Der Footer kriegt auch die Klasse "ui-widget-header"-->
    <tr><!--Wenn es im Footer keine Einträge geben soll, dann benutzt man am besten <tr><td colspan=%anzahlDerSpalten%></td></tr>-->
      <td colspan=8 style="text-align:right;">
        <label for="verid">Veranstaltungen: </label>
	<select name="verid">
          <option value="0">Test</option>
        </select>
        <input type="image" src="images/folderadd.png" name="assign_multiple" alt="Zu Veranstaltung" title="Auswahl in Veranstaltung eintragen" style="margin-left:4px; vertical-align:middle;">
        <input type="image" src="images/delete.png" name="delete_multiple" alt="Löschen" title="Auswahl löschen" style="margin-left:16px; vertical-align:middle;">
      </td>
    </tr>
  </tfoot>
 
  <tbody class="ui-widget-content"><!--Der tbody krieg die Klasse "ui-widget-content-->
{foreach from=$studenten item=student}
    <tr id="{$student.login}">
      <td style="text-align:center;">
        <!--Checkboxen kriegen eine namen mit "[]" am Ende. Damit werden sie in php zu einem array-->
        <input id="{$student.login}_select" type="checkbox" name="logins[]" value="{$student.login}">
      </td>
      <td style="text-align:center;">{$student.matrnr}</td>
      <td style="font-weight:bold;">{$student.vorname}</td>
      <td style="font-weight:bold;">{$student.nachname}</td>
      <td>{$student.studiengang}</td>
      <td style="text-align:center;"><a href="index.php?controller=student&action=info&student={$student.login}"><img src="images/info.png" alt="Details"></a></td>
      <td style="text-align:center;"><a href="index.php?controller=student&action=form&edit={$student.login}"><img src="images/edit.png" alt="Ändern"></a></td>
      <td style="text-align:center;"><a href="index.php?controller=student&action=delete&student={$student.login}"><img src="images/user_remove.png" alt="Löschen"></a></td>
    </tr>
{/foreach}
  </tbody>
 
</table>
</form>
 
 
{literal}
<script type="text/javascript">
$(function() {
//Das kann so kopiert werden
  $(".s tbody tr").hover(
    function() { $(this).addClass('ui-state-hover'); }, 
    function() { $(this).removeClass('ui-state-hover'); }
  );    
 
//Dies braucht man, wenn man in der Tabelle einzelne Zeilen auswählen kann
  $("input").removeAttr("checked");
  $(".s tbody tr").click( function() {
    if ($(this).hasClass('selected') ) {
      $(this).removeClass('selected');
      $("#"+this.id+"_select").removeAttr("checked");
    } else {
      $(this).addClass('selected');
      $("#"+this.id+"_select").attr("checked", true);
    }
  });
 
  //Hiermit wird die Tabelle definiert. wichtig ist der eintrag aaSorting, mit dem man die Nummer
  //der spalte angibt, nach der initial sortiert wird
  //in aoColumns werden die einzelnen spalten informationen gegeben
  //die informationen sind in { } durch kommata getrennt. mit der form   eigenschaft: "wert"
  //in dieser tabelle würde beispielsweise die erste spalte angezeigt werden (bVisible: true), was auch standard ist
  //und nach ihr kann nicht sortiert werden (bSortable:false)
  //die nächsten vier spalten kriegen standardinformationen (null)
  //und der letzten wird die möglichkeit entzogen, nach ihr zu sortieren 
  var table = $(".s").dataTable( {
    sPaginationType: "full_numbers", //am besten so lassen
    bLengthChange: false,            //man kann die anzahl der zeilen nicht ändern
    iDisplayLength: 16,              //anzahl der zu zeigenden zeilen
    bAutoWidth: false,               //auto anpassung der weite deaktivieren
    aaSorting: [[ 3, "asc" ]],       //initalsortierung
    aoColumns: [{ bVisible: true,    //spaltendefinitionen
                  bSortable: false },
                null,
                null,
                null,
                null,
                { bSortable: false }]
  });
 
  //Dies braucht man, wenn man in der tabelle checkboxen ankreuzen kann
  $('#form').submit( function() {
    var sData = $('input', table.fnGetNodes()).serialize();
    //alert( "The following data would have been submitted to the server: \n\n"+sData);
  $("#form").attr("action", "index.php?controller=student&"+sData);
    return true;
  });	
});		
</script>
{/literal}


Page last modified on August 07, 2009, at 11:53 AM