Sortierbare jQuery-Tabelle

Sheeraz Gul 15 Februar 2024

jQuery jQuery Table

Dieses Tutorial zeigt, wie Sie eine sortierbare Tabelle in jQuery erstellen.

Erstellen Sie eine sortierbare Tabelle in jQuery

Das jQuery UI-Paket hat die Methode sortable(), die die Sortierfunktion durch Ziehen für DOM-Objekte implementiert. Die Syntax für diese Methode ist unten.

$(selector).sortable();

Die Methode sortable kann mit Listen, Tabellen usw. implementiert werden. Versuchen wir ein einfaches Beispiel mit der Standardfunktionalität der Methode sortable().

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Sortable</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <style>
    #DemoList {
    list-style-type: none;
    width: 20%;
    }
    #DemoList li {
    border: 5px solid green;
    background-color : lightgreen;
    height: 18px;
    padding: 0.5em;
    padding-left: 2em;
    font-size: 2em;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
    $( function() {
        $( "#DemoList" ).sortable();
    });
  </script>
</head>
<body>

<ul id="DemoList">
    <li class="ui-state-default">Delftstack 1</li>
    <li class="ui-state-default">Delftstack 2</li>
    <li class="ui-state-default">Delftstack 3</li>
    <li class="ui-state-default">Delftstack 4</li>
    <li class="ui-state-default">Delftstack 5</li>
</ul>


</body>
</html>

Der obige Code implementiert die standardmäßige sortierbare Funktion für eine Liste. Siehe die Ausgabe:

jQuery sortierbar

Versuchen wir nun, eine sortierbare Tabelle mit der jQuery-UI-Methode sortable() zu erstellen. Um eine sortierbare Tabelle zu erstellen, können wir auch die Methode sortable() anpassen, indem wir die Optionen, Methoden und Ereignisse verwenden, die in der jQuery UI-Dokumentation bereitgestellt werden; Versuchen wir es an einem Beispiel.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Sortable Table</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

    <style type="text/css">
    table th, table td
    {
        width: 150px;
        padding: 10px;
        border: 3px solid #ccc;
    }
    .Selected_Row
    {
        background-color: lightgreen;
        color: darkgreen;
    }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
     <script type="text/javascript">
    $(function () {
        $("#DemoTable").sortable({
            items: 'tr:not(tr:first-child)',
            cursor: 'move',
            axis: 'y',
            dropOnEmpty: true,
            scroll: true,
            tolerance: "pointer",
            start: function (e, ui) {
                ui.item.addClass("Selected_Row");
            },
            stop: function (e, ui) {
                ui.item.removeClass("Selected_Row");
                $(this).find("tr").each(function (index) {
                    if (index > 0) {
                        $(this).find("td").eq(3).html(index);
                    }
                });
            }
        });
    });
    </script>
</head>
<body>


<table id="DemoTable">
    <tr>
        <th>ID </th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Preference</th>
    </tr>
    <tr>
        <td>1</td>
        <td>James</td>
        <td>Smith</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Robert</td>
        <td>Smith</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Maria</td>
        <td>Rodriguez</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>James</td>
        <td>Johnson</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>John</td>
        <td>Trovolta</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Jack</td>
        <td>Danials</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>Dana</td>
        <td>White</td>
        <td>7</td>
    </tr>
    <tr>
        <td>8</td>
        <td>Josh</td>
        <td>Thompson</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>Connor</td>
        <td>Rollins</td>
        <td>9</td>
    </tr>
</table>
</body>
</html>

Der obige Code passt die Methode sortable() an und verwendet die Optionen cursor, axis, dropOnEmpty, scroll, tolerance sowie die Methoden start und stop. Der Code erstellt eine sortierbare Tabelle mit ziehbarer Funktionalität.

Siehe die Ausgabe:

Sortierbare jQuery-Tabelle

Autor: Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

Erstellen Sie eine sortierbare Tabelle in jQuery

Verwandter Artikel - jQuery Table