Wie kombinieren Sie jQuery UI auswählbar und sortieren nach Kopfzeile auf der gleichen Tabelle?

Ich versuche, eine Tabelle zu erstellen, die beide auswählbare Zeilen und die Möglichkeit hat, Spalten nach Header zu sortieren. Bisher ist es mir gelungen, die Zeilen auswählbar zu machen. Wenn ich jedoch versuche, das mit einem Tablesorting-Plugin zu kombinieren (ich habe ein halbes Dutzend von ihnen ausprobiert), funktioniert die Sortierung der Tabelle nicht. Entweder das oder das Sortier-Plugin verwendet eine ID, die mit der auswählbaren ID in Konflikt steht. Hat jemand eine Methode zur Tabellensortierung nach Header, die mit jQuery Benutzeroberfläche auswählbar funktioniert? Hier ist mein Code:Wie kombinieren Sie jQuery UI auswählbar und sortieren nach Kopfzeile auf der gleichen Tabelle?

<html> 
<body style="background: Lavender;"> 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 

    <style> 
    #feedback { font-size: 1.4em; } 
    #selectable .ui-selecting { background: AliceBlue!important; } 
    #selectable .ui-selected { background: Snow!important; } 
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
    #selectable tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } 
    th, td { 
    text-align: left; border: 1px solid black; border-collapse: collapse; 
    } 
    </style> 

    <script> 
    $(function() { 
    $("#selectable").selectable({filter: 'tr:not(.disabled)'}); 
    }); 
    </script> 

<table id="selectable" style="width:100%; border: 1px solid black; border-collapse: collapse;"> 
<thead> 
    <tr class='disabled' style="background: Gainsboro;"> 
    <th>Cat</th> 
    <th>Dog</th> 
    <th>Bird</th> 
    </tr> 
</thead> 
<tbody> 
    <tr style="background: skyblue;"> 
    <td>Russian Blue</td> 
    <td>Beagle</td> 
    <td>Hawk</td> 
    </tr> 
    <tr style="background: skyblue;"> 
    <td>British Shorthair</td> 
    <td>Black Lab</td> 
    <td>Blue Jay</td> 
    </tr> 
    <tr style="background: skyblue;"> 
    <td>Persian</td> 
    <td>Pitbull</td> 
    <td>Cardinal</td> 
    </tr> 
    <tr style="background: SkyBlue;"> 
    <td>Sphynx</td> 
    <td>Poodle</td> 
    <td>Crow</td> 
    </tr> 
</tbody> 
</table> 

</body> 
</html>

Bitte beachten Sie, dass ich bin nicht interessiert in jquery UI Sortierung, ich brauche traditionelle Sortierung nach für jede Spalte in der Kopfzeile klicken. Irgendwelche Ideen?

Quelle

2016-06-15 Matthew

ich versuchte, mit sorttable.js, aber jQuery UI scheint zu stören damit. Sobald ich id = "selectable" entferne, beginnt sorttable.js zu arbeiten. Sehr frustrierend. sorttable.js macht genau das, was ich brauche, ich würde es gerne mit dem obigen Beispiel arbeiten lassen. – Matthew

Ich konnte dies herausfinden. Mit etwas wie dataTables können Sie einfach verschachtelte Sortierungen durchführen. Dies ist, was ich mit endete, um es zum Laufen zu bringen zu ändern:

Dieses:

$(function() { 
    $("#selectable").selectable({filter: 'tr:not(.disabled)'});

Um dies:

$(function() { 
    $("#selectable").selectable({filter: 'tr:not(.disabled)'}).DataTable({ 
     "paging": false, 
     "info":  false 
    }); 
    });

Quelle

2016-06-16 01:27:48 Matthew

Wie kombinieren Sie jQuery UI auswählbar und sortieren nach Kopfzeile auf der gleichen Tabelle?

Antwort

Verwandte Themen