Cómo ordenar solo la página actual usando Jquery Datatable

Después de consultar expertos en la materia, programadores de diversas áreas y profesores dimos con la solución al problema y la compartimos en este post.

Solución:

Antes de preguntar cómo ordenar solo la página actual, debemos responder las siguientes preguntas:

• ¿Por qué queremos hacer tal clasificación?
• ¿Deberíamos hacerlo?
• ¿Tiene algún sentido?
• ¿Cuáles son las implicaciones de tal decisión?

Cuando queremos ejecutar una consulta y mostrar la lista de resultados que estamos tratando:

• criterios de búsqueda
• criterios de clasificación
• paginación

Estos tres elementos están fuertemente relacionados y definen claramente lo que el usuario ve en la pantalla.
Podemos tener por ejemplo la siguiente descripción:

Hay una lista de actores. Está ordenado por nombre y dividido en páginas (50 elementos por página). Y estamos en la tercera página.

Cuando tenemos tales reglas, el usuario tiene una buena orientación en esta lista. Ve a Michael Caine en la parte superior y a Shon Connery en la parte inferior de la página. Cuando quiere encontrar a Robert Duvall, sabe que debe avanzar unas cuantas páginas más. Y cuando quiere ver a estos actores ordenados por edad simplemente recurre a las listas y vuelve a la primera página.

Pero, ¿qué sucede si proporcionamos una clasificación adicional solo para la página actual? Esto perturbaría la cohesión del sistema anterior. ¿Cómo sonaría si le decimos al usuario:

Ahora está viendo la tercera página de la lista de actores ordenados por nombre (página) por edad.

¿Qué puede ganar este usuario recurriendo solo a la página actual? ¿Jerarquía de edad de los actores con nombre que comienza con ‘C’? En la parte superior de la página estará el actor más antiguo de esta página. Pero el usuario no sabe si es el actor más antiguo de toda la lista. Y si no, ¿en qué página debería buscar uno más antiguo? Tal recurso no tiene valor y anula la clasificación inicial (que tenía algún valor).

Tal recurso también puede llevar al usuario a una grave confusión. Puede perder la orientación sobre la clasificación de originales y la clasificación de páginas.

Conclusiones:

No veo ningún sentido en proporcionar clasificación para una sola página. Lo encuentro dañino. Por lo tanto, debe usarlo solo si tiene argumentos sólidos para ello.

Actualización 1

Aunque estoy de acuerdo con rtruszk, sigo pensando que se debe encontrar/explorar una solución si 0) no tiene otra opción o 1) su cliente no está dispuesto a discutir los cambios de UX.

Ejemplo de trabajo: http://jsfiddle.net/ebRXw/63/

Pude lograr lo que buscaba al filtrar las filas actualmente visibles de DataTable. Hice todo lo posible para encontrar una solución dentro de DataTables, y es posible que exista una, pero al final usé jQuery y una tabla hash para identificar y filtrar las filas actualmente visibles.

Estoy seguro de que esto se puede optimizar aún más. Con suerte, te lleva a moverte en la dirección correcta.

$(document).ready(function () 

    var table = $('#example').DataTable(
        "columnDefs": [
            "targets": [0],
                "visible": false,
                "searchable": true
        ]
    );

    // Show page 0
    table.page(0).draw(false);
    // Sort by column 1 (Name)
    table.order([1, 'asc']).draw(false);

    $("#ReloadTable").click(function () 
        // Clear the current filter
        oTable = $('#example').dataTable();
        oTable.fnFilter('', 0);
        oTable.fnFilter('');

        // Reset all "visible" values in the first cell
        var table = $('#example').DataTable();
        table.rows().indexes().each(function (idx) 
            var d = table.row(idx).data();
            table.row(idx).data()[0] = 0;
            d.counter++;
            table.row(idx).data(d);
        );
    );

    $("#FilterCurrentPage").click(function () 
        // Create a hash of the index of currently visible rows
        var h = new Object();
        var x = $('.odd,.even').filter(function () 
            var idx = $(this)[0]._DT_RowIndex;
            h[idx] = idx;
            return this.style.display == ''
        );

        // update the first value based on the currently visible rows
        var table = $('#example').DataTable();
        table.rows().indexes().each(function (idx) 
            var d = table.row(idx).data();
            if (h.hasOwnProperty(idx)) 
                table.row(idx).data()[0] = 1;
            
            d.counter++;
            table.row(idx).data(d);
        );

        // filter rows with a value of 1 in the first cell
        oTable = $('#example').dataTable();
        oTable.fnFilter(1, 0);
    );
);

---

Actualizar 0

Todavía no he encontrado una solución alternativa, pero estoy convencido de que existe. El siguiente código seleccionará y devolverá las filas visibles actuales en su tabla de datos.

var x = $('.odd,.even').filter(function () 
    $(this).addClass('selected'); // Select the visible rows
    return this.style.display == '' 
);

---

Desde el mantenedor de DataTables:

¿Hay una manera fácil de decirle a las tablas de datos que quiero ordenar y volver a dibujar solo la paginación actual?

En DataTables 1.9- no, no hay forma de hacerlo, pero en 1.10 puede usar table.order( … ).draw(
false ); para conservar la paginación. 1.10 pre beta está disponible en git si quieres probarlo 🙂

Alano

a través de tablas de datos: ordenar solo la paginación actual de la tabla

Sin embargo, es posible que pueda obtener las filas visibles actuales, ordenarlas y mostrarlas de alguna manera. El siguiente código proporciona las filas visibles actuales después del filtrado.

var table = $('#example').DataTable();
table.$('tr', "filter":"applied");

Ver también:

• tablas de datos jquery. Cómo obtener filas filtradas (visibles)
• fnGetData solo de filas visibles
• Recuperación de datos de fila después de filtrar JQuery Datatables

Ten en cuenta dar recomendación a esta sección si te fue útil.

---

---

Utiliza Nuestro Buscador