Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Bestimmte Werte in einer tablesorter Tabelle markieren

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Bestimmte Werte in einer tablesorter Tabelle markieren

    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

    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>
    1 x der css code


    PHP-Code:
    table.yui 
    {
        
    font-family:arial;   
        
    border-collapse:collapse;    
        
    bordersolid 3px #7f7f7f;
        
    font-size:small;
    }

    table.yui td {    
        
    padding5px;
        
    border-rightsolid 1px #7f7f7f;
    }
    table.yui .even {
        
    background-color#fff;
    }
    table.yui .odd {
        
    background-color#edf5ff;
    }
    table.yui th
    {
        
    backgroundurl('sprite.png'repeat-x 0px 0px;            
        
    border1px solid #7f7f7f;
        
    padding5px;
        
    heightauto;
        
    cursor:pointer;
    }

    table.yui th a
    {
        
    text-decorationnone;
        
    text-aligncenter;        
        
    padding-right20px;
        
    font-weight:bold;
        
    white-space:nowrap;
        
    backgroundurl('bg.gif'no-repeat right 50%;
    }

    table.yui thead .headerSortUp table.yui thead .headerSortDown 
    {
        
    backgroundurl('sprite.png'repeat-x 0px -100px;
    }

    table.yui .headerSortUp a 
    {    
        
    backgroundurl('asc.gif'no-repeat right 50%;
    }
    table.yui .headerSortDown a 
    {    
        
    backgroundurl('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-top1px 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 {
        
    padding10px 0 10px 0;        
    }
    table.yui .tablesorterPager span {
        
    padding0 5px 0 5px;
    }
    table.yui .tablesorterPager input.prev {
        
    widthauto;
        
    margin-right10px;
    }
    table.yui .tablesorterPager input.next {
        
    widthauto;
        
    margin-left10px;
    }
    table.yui .pagedisplay     
    {
        
    font-size:10pt;
        
    width30px;
        
    border0px;    
        
    background-color#E1ECF9;
        
    text-align:center;
        
    vertical-align:top;


  • #2
    Was heißt funktioniert nicht? Schau dir doch einfach mal das generierte HTML an.
    Außerdem gibt es die von dir verwendeten Klassen 'online' und 'offline' in deinem CSS auch gar nicht.

    Kommentar


    • #3
      Aber...

      Hallo Tropi,

      Ja das stimmt. Der CSS Code steht direkt in der php Seite und nicht im CSS Text. Ich habe es zum testen da reingeschrieben.

      Aber meine Frage war geht das mit CSS oder muss ich mit Javascript ran?
      Ich fand im Netz bis jetzt keine Aussage, oder ein Beispiel.

      Wenn es mit CSS geht, dann bekomme ich das hin.

      Wieso bekomme ich keine vernünftige Aussage auf meine Frage, sondern eine Gegenfrage?

      Kommentar


      • #4
        Zitat von JNPANZER Beitrag anzeigen
        Wieso bekomme ich keine vernünftige Aussage auf meine Frage, sondern eine Gegenfrage?
        Genau das könnte ich dich jetzt auch fragen...Um aber darauf zu antworten: Weil deine Eingangsfrage nicht genau genug spezifiziert ist.

        Mein Tipp ist, dass das CSS von Tablesorter die Eigenschaften deiner Klasse überschreibt. Versuch es mal mit einem Inline Stylesheet anstatt einer Klasse bzw. bearbeite das Stylesheet so, das deines nicht überschrieben wird.

        Kommentar


        • #5
          Hallo Tropi,

          was soll ich sagen... Danke für den schubs in die richtige Richtung, ich habe einfach viel zu kompliziert gedacht.
          Es läuft jetzt, und ich ärgere mich ein wenig weil ich nicht selbst darauf kam.

          Also noch mal Vielen Danke, und noch einen schönen Sonntag.

          Kommentar


          • #6
            Bitte, und gern geschehen. Viel Erfolg noch.

            Kommentar

            Lädt...
            X