jquery Tabelle sortierbar machen - einfach möglich?

MisterMi · 11. Oktober 2013

Ich habe eine Tabelle, die mir Spieler aus einer Datenbank anzeigt.

Leider ist diese nicht sortierbar und ich würde gern auf beispielsweise "Punkte" drücken können und dann sollten die Tabelleninhalte danach sortiert werden. Ist das irgendwie einfach möglich?

Code:

<!DOCTYPE HTML>
<?php
// setup
@ini_set('default_charset','iso-8859-1');


// setup user and team
$team = isset($_REQUEST['team']) ? intval($_REQUEST['team']) : 0;   // obtain selected team from request-param 
$_SESSION['team'] = sprintf('%d', $team);                           // tablename: '0'=kader, '1'=kader2
$_SESSION['user'] = 'mirko';                                        // username


// establish database-connection 
xxx


// provide set of available game-strategies
$gameStrategies = array('4-4-2', '4-3-3', '3-4-3', '3-5-2', '5-3-2', '5-4-1', '4-5-1');


?>
<html lang="de-DE">
<head>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="kader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // init
    setConfig('<?php echo $_SESSION['user'] ?>',parseInt(<?php echo $_SESSION['team'] ?>));
    // load data
    loadPlayers();
    // load team
    loadTeam();
});
</script>
</head>
<body>
<!-- begin: team-editor -->
<table id="formLayout">
    <tr>
        <td>
            <!-- begin: list of players -->
            <table id="players">
                <thead>
                    <tr>
                        <th colspan="6">
                            <form id="positionFilterForm" name="positionFilterForm" method="post" onsubmit="return false;" action="">
                                <input type="checkbox" name="filterPositionToggleAll" value="all" id="cbFilterPositionAll" checked="checked" />
                                <label for="cbFilterPositionAll">Alle</label> 
                                <input type="checkbox" name="position[]" value="Tor" id="cbFilterPositionKep" checked="checked" />
                                <label for="cbFilterPositionKep">Tor</label> 
                                <input type="checkbox" name="position[]" value="Abwehr" id="cbFilterPositionDef" checked="checked" />
                                <label for="cbFilterPositionDef">Abwehr</label> 
                                <input type="checkbox" name="position[]" value="Mittelfeld" id="cbFilterPositionMid" checked="checked" />
                                <label for="cbFilterPositionMid">Mittelfeld</label> 
                                <input type="checkbox" name="position[]" value="Sturm" id="cbFilterPositionAtt" checked="checked" />
                                <label for="cbFilterPositionAtt">Sturm</label> 
                            </form>
                        </th>
                    </tr>
                    <tr>
                        <th class="c0">NAME</th>
                        <th class="c1 ctr">PUNKTE</th>
                        <th class="c2 ctr">WERT</th>
                        <th class="c3 ctr">POS</th>
                        <th class="c4 ctr">VEREIN</th>
                        <th class="c5 rgt">+</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="6">
                            <ul id="playerlist">
                                <!-- players are inserted here! -->
                            </ul>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td class="ctr" colspan="6">
                            <a id="pgPrev" href="javascript:;">&lt;&lt;</a>
                            &nbsp;&nbsp;&nbsp;
                            Seite <span id="pgCurrent">N</span> von <span id="pgTotal">M</span>
                            &nbsp;&nbsp;&nbsp;
                            <a id="pgNext" href="javascript:;">&gt;&gt;</a>
                            <form id="paginatorForm" name="paginatorForm" method="post" onsubmit="return false;" action="">
                                <input type="hidden" name="pgPrevOfs" id="pgPrevOfs" value="0" />
                                <input type="hidden" name="pgNextOfs" id="pgNextOfs" value="25" />
                                <input type="hidden" name="pgOfs" id="pgOfs" value="0" />
                            </form>
                        </td>
                    </tr>
                </tfoot>
            </table>
            <!-- end: list of players -->
        </td>
        <td>
            <!-- begin: selected team -->
            <form id="submissionForm" name="submissionForm" method="post" action="">
                <div id="Strategie">
                    <ul>
                        <li>
                            Spielstrategie:
                        </li>
                        <?php foreach($gameStrategies as $idx => $item): ?>
                        <li>
                            <input id="rbStrategy<?php echo $idx; ?>" type="radio" name="gameStrategy" value="<?php echo $item; ?>" />
                            <label for="rbStrategy<?php echo $idx; ?>"><?php echo $item; ?></label>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <div id="insertDropContainer">
                    <!-- drop-container is inserted here !.. -->
                </div>
                <p align="center">
                    <input type="submit" name="submit" value="Speichern" />
                    <input type="button" name="erase" id="eraseBtn" value="Verwerfen" />
                </p>
            </form>
            <!-- end: selected team -->
        </td>
    </tr>
</table>
<!-- end: team-editor -->
</body>
</html>

Danke

tombe · 11. Oktober 2013

Gehe ich recht in der Annahme das es sich hierbei um den Code handelt welchen du über die Jobbörse "gekauft" hast oder hast du ihn nun doch selber geschrieben?

1) Du hast hier dein Passwort öffentlich gemacht, freut sich jeder der auf deine Daten zugreifen will!

2) Im Code wird mit einer veralteten und bald nicht mehr lauffähigen Funktion auf die Datenbank zugegriffen. Das sollte zuerst geändert werden.

3) Da der Code so nicht bleiben sollte, macht es wohl auch keinen Sinn mehr zum Thema "Sortieren" zu schreiben. Außerdem ist hier auch nicht zu sehen wie die Daten abgefragt werden.

MisterMi · 14. Oktober 2013

welche Funktionen sind denn veraltet und bald nicht mehr lauffähig?

Um sie sortierbar zu machen hab ich bisher folgendes gemacht:

class="tablesorter" eingefügt

Code:

<table id="myTable" class="tablesorter">
    <tr>
        <td>
...

2 Scripte eingebunden:

Code:

<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

und folgende Funktion erweitert:

Code:

<script type="text/javascript">
$(document).ready(function(){
    // init
    setConfig('<?php echo $_SESSION['user'] ?>',parseInt(<?php echo $_SESSION['team'] ?>));
    // load data
    loadPlayers();
    // load team
    loadTeam();
    // sortable
    $("#myTable").tablesorter();
});
</script>

um den Teil // sortable
$("#myTable").tablesorter();

Dennoch lässt sich die Tabelle nicht sortieren.
Woran kann das liegen? Eigentlich müsste es ja gehen soweit ich das verstanden habe.

Danke

tombe · 14. Oktober 2013

Hast du dir auch durchgelesen was z.B. auf der Seite von Tablesorter so geschrieben steht. Dort gibt es folgenden Beispielcode:

Javascript:

$(document).ready(function()
    {
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]] } );
    }
);

Womit dann die ersten beiden Spalten aufsteigend sortiert werden, Beschreibung siehe hier.

Du rufst zwar die Funktion auf, aber übergibst keinen einzigen Parameter. Was oder wonach soll also sortiert werden?

MisterMi · 14. Oktober 2013

Ich dachte, dass wenn kein Parameter übergeben wird er nicht sortiert aber wenigstens die Sortierfunktion gegeben ist und ich dann auf die Spaltenüberschrift drücken kann und dann sortiert wird oder nicht?

tombe · 14. Oktober 2013

Stimmt den der Pfad zur "jquery.tablesorter.js"?

MisterMi · 16. Oktober 2013

ich habe die Dateien auf dem Server abgelegt und auch die Pfade geändert. Leider wird die Tabelle weiterhin nicht sortierbar

Jan-Frederik Stieler · 20. Oktober 2013

Hi,
falls du Chrome oder Firefox verwendest kannst du auch einfach mal den Quellcode mittels DevTools oder Firebug anschauen und mal direkt auf de nLink zu der JS-Datei anklicken. Damit siehst du ganz schnell ob die Datei auch gefunden wird.
Dann solltest du mal schauen ob #myTable gefunden wird.
Das kannst du per

Javascript:

console.log($(#myTable).length);

überprüfen. Wenn eins ausgegeben wird ist das Element da.

Grüße

Mohag · 30. Oktober 2013

kann es denn seien das daß script nicht mit deiner th deklaration zurecht kommt?

HTML:

 <th colspan="6">
                            <form id="positionFilterForm" name="positionFilterForm" method="post" onsubmit="return false;" action="">
                                <input type="checkbox" name="filterPositionToggleAll" value="all" id="cbFilterPositionAll" checked="checked" />
                                <label for="cbFilterPositionAll">Alle</label> 
                                <input type="checkbox" name="position[]" value="Tor" id="cbFilterPositionKep" checked="checked" />
                                <label for="cbFilterPositionKep">Tor</label> 
                                <input type="checkbox" name="position[]" value="Abwehr" id="cbFilterPositionDef" checked="checked" />
                                <label for="cbFilterPositionDef">Abwehr</label> 
                                <input type="checkbox" name="position[]" value="Mittelfeld" id="cbFilterPositionMid" checked="checked" />
                                <label for="cbFilterPositionMid">Mittelfeld</label> 
                                <input type="checkbox" name="position[]" value="Sturm" id="cbFilterPositionAtt" checked="checked" />
                                <label for="cbFilterPositionAtt">Sturm</label> 
                            </form>
                        </th>

mfg mohag.

ps, table header und table body müssen deklariert sein, so stehts beim tablesorter!

jquery Tabelle sortierbar machen - einfach möglich?

MisterMi

Erfahrenes Mitglied

tombe

Erfahrenes Mitglied

MisterMi

Erfahrenes Mitglied

tombe

Erfahrenes Mitglied

MisterMi

Erfahrenes Mitglied

tombe

Erfahrenes Mitglied

MisterMi

Erfahrenes Mitglied

Jan-Frederik Stieler

Monsterator

Mohag

Mitglied

Neue Beiträge