Hallo zusammen,
ich hänge schon seit Wochen an diesen Problen.
Ich weis ja nicht m,al ob ich im richtigen Forum bin.
Was tue ich alles
* Tabelle aus DB Mysqli
* mit Tablesorter Tabelle anzeigen
* Mit Tablesorter Suchfunktion
* Seite nach einer bestimmten Zeit neu laden lassen (aktualisierung des Status)
Dies alles Funktioniert
Nun möchte ich bestimmte Werte Farbig markieren.
Ich habe in der Tabelle da einen Status Offline und Online.
Ohne der Funktion Tablesorter werden die Werte farbig dargestellt aber mit tablesorter nicht mehr. Wäre schön wenn jemand für mich einen Tip hätte.
Ich weiss nicht ob dies mit css funtioniert, oder ob ich das mit Javascript lösen muss. Meine Idee war css.
Der Code wurde immer erweitert da ich ja immer noch lerne.
Wäre echt für jede Hilfe und ein Beispiel dankbar!
1 x PHP Code wie es bisher läuft ohne Versuch die Werte zu markieren
1x der PHP Code mit meiner nicht funktionierenden änderung
1 x der css code
ich hänge schon seit Wochen an diesen Problen.
Ich weis ja nicht m,al ob ich im richtigen Forum bin.
Was tue ich alles
* Tabelle aus DB Mysqli
* mit Tablesorter Tabelle anzeigen
* Mit Tablesorter Suchfunktion
* Seite nach einer bestimmten Zeit neu laden lassen (aktualisierung des Status)
Dies alles Funktioniert
Nun möchte ich bestimmte Werte Farbig markieren.
Ich habe in der Tabelle da einen Status Offline und Online.
Ohne der Funktion Tablesorter werden die Werte farbig dargestellt aber mit tablesorter nicht mehr. Wäre schön wenn jemand für mich einen Tip hätte.
Ich weiss nicht ob dies mit css funtioniert, oder ob ich das mit Javascript lösen muss. Meine Idee war css.
Der Code wurde immer erweitert da ich ja immer noch lerne.
Wäre echt für jede Hilfe und ein Beispiel dankbar!
1 x PHP Code wie es bisher läuft ohne Versuch die Werte zu markieren
PHP-Code:
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/ >
<meta http-equiv="Content-Type" content="text/php; charset=utf-8" />
<html>
<head charset="UTF-8"/ >
<title>monitoring.php </title>
<script language="JavaScript"> // Seite neu Laden script um den Status anzuzeigen des Ping
var sURL = unescape(window.location.pathname);
function doLoad()
{
setTimeout( "refresh()", 9*9000 );
}
function refresh()
{
window.location.href = sURL;
}
//-->
</script>
<script language="JavaScript1.1">
<!--
function refresh()
{
window.location.replace( sURL );
}
//-->
</script>
<script language="JavaScript1.2">
<!--
function refresh()
{
window.location.reload( false );
}
</script>
<link href="./javascript/style.css" rel="stylesheet" type="text/css" />
<script src="./javascript/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="./javascript/jquery.tablesorter-2.0.4.js" type="text/javascript"></script>
<script src="./javascript/jquery.quicksearch.js" type="text/javascript"></script>
<style type="text/css">
div.quicksearch
{
padding-bottom: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#tableOne").tablesorter({ sortList: [[0, 0]], widgets: ['zebra'] });
footer.
$("#tableOne tbody tr").quicksearch({
labelText: 'Suche: ',
attached: '#tableOne',
position: 'before',
delay: 100,
loaderText: 'Loading...',
onAfter: function() {
if ($("#tableOne tbody tr:visible").length != 0) {
$("#tableOne").trigger("update");
$("#tableOne").trigger("appendCache");
$("#tableOne tfoot tr").hide();
}
else {
$("#tableOne tfoot tr").show();
}
}
});
});
</script>
</head>
<body onload="doLoad()">
<!-- Bilder Achtung Freigabe bei Bilder-->
<table>
<tr>
<td>
<img src="bilder/logo_bg_2.gif" width="600px" height="105px" alt="Bild" /></td>
<td align=center>
<a href="ts_formular.php" target="_self"><img src="bilder/tankstellen_form_bild.png" width="80px" height="80px" alt="Tankstellen Formular" /> <a></td>
<td align=center>
<a href="index.php" target="_self"><img src="bilder/zur_ueber_bild.png" width="80px" height="80px" alt="Zur Uebersicht" /> <a></td>
<td align=center>
<a href="liste.php" target="_self"><img src="bilder/liste_bild.png" width="80px" height="80px" alt="Listen"/> <a></td>
<td align=center>
<a href="logout.php" target="_self"><img src="bilder/logout_bild.png" width="80px" height="80px" alt="Ausloggen"/> <a></td>
</tr>
</table>
<?php
include("function/uhrzeit.php");
require_once "function/db_verbindung.php";
$ergebnis = $mysqli->query("SELECT IP,IP_STATUS,ORT,GW,GW_STATUS,STRASSE,IP_DATUM,GW_DATUM,ROUTER_BEZ FROM ip_liste WHERE STATUS = 1 order by ORT;");
$i = 0;
echo "<div class='demo'>\n";
echo "<table id='tableOne' class='yui' >\n";
echo "<thead>\n";
echo "<tr>
<th><a href='#' title='Click Header to Sort'>Ort</a></th>
<th><a href='#' title='Click Header to Sort'>Straße</a></th>
<th><a href='#' title='Click Header to Sort'>IP</a></th>
<th><a href='#' title='Click Header to Sort'>IP Status</a></th>
<th><a href='#' title='Click Header to Sort'>IP Datum</a></th>
<th><a href='#' title='Click Header to Sort'>GW</a></th>
<th><a href='#' title='Click Header to Sort'>GW Status</a></th>
<th><a href='#' title='Click Header to Sort'>GW Datum</a></th>
<th><a href='#' title='Click Header to Sort'>Router Bez.</a></th>
</tr>
</thead>";
echo "<tbody>";
while($zeile = $ergebnis->fetch_array()) {
echo "<tr>
<td>" .htmlspecialchars($zeile["ORT"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["STRASSE"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["IP"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["IP_STATUS"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["IP_DATUM"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["GW"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["GW_STATUS"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["GW_DATUM"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["ROUTER_BEZ"]) ."</td>"
."</tr>\n";
}
echo "</tbody>\n";
echo "<tfoot>
<tr style='display:none;'>
<td colspan='5'>
Leider wurde nichts gefunden...
</td>
</tr>
</tfoot>";
echo "</table>\n";
echo "</div>\n";
$ergebnis->close();
$mysqli->close();
?>
</body>
</html>
1x der PHP Code mit meiner nicht funktionierenden änderung
PHP-Code:
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/ >
<meta http-equiv="Content-Type" content="text/php; charset=utf-8" />
<html>
<head charset="UTF-8"/ >
<title>monitoring.php </title>
<script language="JavaScript"> // Seite neu Laden script um den Status anzuzeigen des Ping
var sURL = unescape(window.location.pathname);
function doLoad()
{
setTimeout( "refresh()", 9*9000 );
}
function refresh()
{
window.location.href = sURL;
}
//-->
</script>
<script language="JavaScript1.1">
<!--
function refresh()
{
window.location.replace( sURL );
}
//-->
</script>
<script language="JavaScript1.2">
<!--
function refresh()
{
window.location.reload( false );
}
</script>
<link href="./javascript/style.css" rel="stylesheet" type="text/css" />
<script src="./javascript/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="./javascript/jquery.tablesorter-2.0.4.js" type="text/javascript"></script>
<script src="./javascript/jquery.quicksearch.js" type="text/javascript"></script>
<style type="text/css">
div.quicksearch
{
padding-bottom: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#tableOne").tablesorter({ sortList: [[0, 0]], widgets: ['zebra'] });
footer.
$("#tableOne tbody tr").quicksearch({
labelText: 'Suche: ',
attached: '#tableOne',
position: 'before',
delay: 100,
loaderText: 'Loading...',
onAfter: function() {
if ($("#tableOne tbody tr:visible").length != 0) {
$("#tableOne").trigger("update");
$("#tableOne").trigger("appendCache");
$("#tableOne tfoot tr").hide();
}
else {
$("#tableOne tfoot tr").show();
}
}
});
});
</script>
</head>
<body onload="doLoad()">
<!-- Bilder Achtung Freigabe bei Bilder-->
<table>
<tr>
<td>
<img src="bilder/logo_bg_2.gif" width="600px" height="105px" alt="Bild" /></td>
<td align=center>
<a href="ts_formular.php" target="_self"><img src="bilder/tankstellen_form_bild.png" width="80px" height="80px" alt="Tankstellen Formular" /> <a></td>
<td align=center>
<a href="index.php" target="_self"><img src="bilder/zur_ueber_bild.png" width="80px" height="80px" alt="Zur Uebersicht" /> <a></td>
<td align=center>
<a href="liste.php" target="_self"><img src="bilder/liste_bild.png" width="80px" height="80px" alt="Listen"/> <a></td>
<td align=center>
<a href="logout.php" target="_self"><img src="bilder/logout_bild.png" width="80px" height="80px" alt="Ausloggen"/> <a></td>
</tr>
</table>
<?php
include("function/uhrzeit.php");
require_once "function/db_verbindung.php";
$ergebnis = $mysqli->query("SELECT IP,IP_STATUS,ORT,GW,GW_STATUS,STRASSE,IP_DATUM,GW_DATUM,ROUTER_BEZ FROM ip_liste WHERE STATUS = 1 order by ORT;");
$i = 0;
\\�******* ÄNERUNG ANFANG *********
if ($zeile["IP_STATUS"] == "ONLINE") {
$statusIP = " class='online' ";
}
else {
//$GW_STATUS = "OFFLINE";
$statusIP = " class='offline' ";
}
if ($zeile["GW_STATUS"] == "ONLINE") {
$statusGW = " class='online' ";
}
else {
//$GW_STATUS = "OFFLINE";
$statusGW = " class='offline' ";
}
\\ ************ Änderung Ende ********
echo "<div class='demo'>\n";
echo "<table id='tableOne' class='yui' >\n";
echo "<thead>\n";
echo "<tr>
<th><a href='#' title='Click Header to Sort'>Ort</a></th>
<th><a href='#' title='Click Header to Sort'>Straße</a></th>
<th><a href='#' title='Click Header to Sort'>IP</a></th>
<th><a href='#' title='Click Header to Sort'>IP Status</a></th>
<th><a href='#' title='Click Header to Sort'>IP Datum</a></th>
<th><a href='#' title='Click Header to Sort'>GW</a></th>
<th><a href='#' title='Click Header to Sort'>GW Status</a></th>
<th><a href='#' title='Click Header to Sort'>GW Datum</a></th>
<th><a href='#' title='Click Header to Sort'>Router Bez.</a></th>
</tr>
</thead>";
echo "<tbody>";
while($zeile = $ergebnis->fetch_array()) {
echo "<tr>
<td>" .htmlspecialchars($zeile["ORT"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["STRASSE"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["IP"]) ."</td>"
. "<td $statusIP>" .htmlspecialchars($zeile["IP_STATUS"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["IP_DATUM"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["GW"]) ."</td>"
. "<td $statusGW>" .htmlspecialchars($zeile["GW_STATUS"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["GW_DATUM"]) ."</td>"
. "<td>" .htmlspecialchars($zeile["ROUTER_BEZ"]) ."</td>"
."</tr>\n";
}
echo "</tbody>\n";
echo "<tfoot>
<tr style='display:none;'>
<td colspan='5'>
Leider wurde nichts gefunden...
</td>
</tr>
</tfoot>";
echo "</table>\n";
echo "</div>\n";
$ergebnis->close();
$mysqli->close();
?>
</body>
</html>
PHP-Code:
table.yui
{
font-family:arial;
border-collapse:collapse;
border: solid 3px #7f7f7f;
font-size:small;
}
table.yui td {
padding: 5px;
border-right: solid 1px #7f7f7f;
}
table.yui .even {
background-color: #fff;
}
table.yui .odd {
background-color: #edf5ff;
}
table.yui th
{
background: url('sprite.png') repeat-x 0px 0px;
border: 1px solid #7f7f7f;
padding: 5px;
height: auto;
cursor:pointer;
}
table.yui th a
{
text-decoration: none;
text-align: center;
padding-right: 20px;
font-weight:bold;
white-space:nowrap;
background: url('bg.gif') no-repeat right 50%;
}
table.yui thead .headerSortUp , table.yui thead .headerSortDown
{
background: url('sprite.png') repeat-x 0px -100px;
}
table.yui .headerSortUp a
{
background: url('asc.gif') no-repeat right 50%;
}
table.yui .headerSortDown a
{
background: url('desc.gif') no-repeat right 50%;
}
table.yui td.sortedeven
{
background-color:#EDF5FF;
}
table.yui td.sortedodd
{
background-color:#DBEAFF;
}
table.yui tfoot td
{
border-top: 1px solid #7f7f7f;
background-color:#E1ECF9;
}
table.yui thead td
{
vertical-align:middle;
background-color:#E1ECF9;
border:none;
}
table.yui thead .tableHeader
{
font-size:larger;
font-weight:bold;
}
table.yui thead .filter
{
text-align:right;
}
table.yui tfoot
{
background-color:#E1ECF9;
text-align:center;
}
table.yui .tablesorterPager {
padding: 10px 0 10px 0;
}
table.yui .tablesorterPager span {
padding: 0 5px 0 5px;
}
table.yui .tablesorterPager input.prev {
width: auto;
margin-right: 10px;
}
table.yui .tablesorterPager input.next {
width: auto;
margin-left: 10px;
}
table.yui .pagedisplay
{
font-size:10pt;
width: 30px;
border: 0px;
background-color: #E1ECF9;
text-align:center;
vertical-align:top;
}
Kommentar