Tabla clasificable de jQuery

Sheeraz Gul 15 febrero 2024

jQuery jQuery Table

Este tutorial demuestra cómo crear una tabla ordenable en jQuery.

Crear una tabla ordenable en jQuery

El paquete jQuery UI tiene el método sortable(), que implementa la funcionalidad de clasificación arrastrando objetos DOM. La sintaxis de este método se encuentra a continuación.

$(selector).sortable();

El método sortable se puede implementar con listas, tablas, etc. Probemos un ejemplo simple con la funcionalidad predeterminada del método 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>

El código anterior implementa la función “ordenable” predeterminada para una lista. Ver la salida:

jQuery ordenable

Ahora intentemos crear una tabla ordenable usando el método sortable() del método jQuery UI. Para crear una tabla ordenable, también podemos personalizar el método sortable() usando las opciones, métodos y eventos provistos en la documentación jQuery UI; probemos un ejemplo.

<!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>

El código anterior personaliza el método sortable() y utiliza las opciones cursor, axis, dropOnEmpty, scroll, tolerance y start y stop. El código crea una tabla ordenable con funcionalidad arrastrable.

Ver la salida:

Tabla clasificable de jQuery

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

Crear una tabla ordenable en jQuery

Artículo relacionado - jQuery Table