0

alguien seria tan amable de ayudarme con un DataTable, necesito que me ordene la tabla de acuerdo a los checkbox seleccionados descendentemente, es decir que si selecciono un items se va valla mostrando de primero como muestra en el siguiente ejemplo. https://editor.datatables.net/examples/api/checkbox.html

Cree los siguientes archivos:

<html>
<head>
 <title>Ordenar por Columnas</title>
 <script type="text/javascript" src="ajax.js"></script>
 <link href="estilos.css" rel="stylesheet" type="text/css"></link>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
 <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
 <script type="text/javascript" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css">
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">
 <link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
</head>
<body>
 <table class="display" id="example" width="100%" cellspacing="0" cellpadding="0" border="0">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Phone</th>
                <th>City</th>
                <th>Zip</th>
                <th>Active</th>
            </tr>
        </thead>
    </table>

    <!--Script-->
    <script type="text/javascript">
        var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        "ajax": "../php/checkbox.php",
        "table": "#example",
        "fields": [ {
                label:     "Active:",
                name:      "active",
                type:      "checkbox",
                separator: "|",
                options:   [
                    { label: '', value: 1 }
                ]
            }, {
                label: "First name:",
                name:  "first_name"
            }, {
                label: "Last name:",
                name:  "last_name"
            }, {
                label: "Phone:",
                name:  "phone"
            }, {
                label: "City:",
                name:  "city"
            }, {
                label: "Zip:",
                name:  "zip"
            }
        ]
    } );

    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/checkbox.php",
        columns: [
            { data: "first_name" },
            { data: "last_name" },
            { data: "phone" },
            { data: "city" },
            { data: "zip" },
            {
                data:   "active",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return data;
                },
                className: "dt-body-center"
            }
        ],
        select: {
            style: 'os',
            selector: 'td:not(:last-child)' // no row selection on last column
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
        rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
            $('input.editor-active', row).prop( 'checked', data.active == 1 );
        }
    } );

    $('#example').on( 'change', 'input.editor-active', function () {
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'active', $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();
    } );
} );
    </script>
</body>
</html>

También el archivo checkbox.php con código ajax para llenar los datos de la tabla.

<?php  {
  "data": [
    {
      "DT_RowId": "row_1",
      "first_name": "Quynn",
      "last_name": "Contreras",
      "phone": "1-971-977-4681",
      "city": "Slidell",
      "zip": "81080",
      "active": "0"
    },
    {
      "DT_RowId": "row_2",
      "first_name": "Kaitlin",
      "last_name": "Smith",
      "phone": "1-436-523-6103",
      "city": "Orlando",
      "zip": "U5G 7J3",
      "active": "1"
    },
    {
      "DT_RowId": "row_3",
      "first_name": "Cruz",
      "last_name": "Reynolds",
      "phone": "1-776-102-6352",
      "city": "Lynn",
      "zip": "EJ89 9DQ",
      "active": "0"
    }

hago el ejemplo que me indican allí pero no me funciona, que debo hacer?

3
  • 4
    Hola. Bienvenido a SOes. Edita la pregunta y agrega el código como lo has intentado reproducir del ejemplo. Quizas el error se encuentre ahí.
    – devconcept
    Commented el 9 ago. 2016 a las 14:18
  • @Luis "no me funciona" es un término demasiado amplio. ¿Qué es exactamente lo que no funciona? ¿Cargaste las librerías que se mencionan al final del artículo? ¿Qué código estás usando? ¿Muestra algún error? Como verás, no suele haber adivinos (por lo general), por lo que sería genial si pudieses agregar más detalle en tu pregunta. Quizás te ayude leer ejemplo mínimo verificable. La pregunta está momentáneamente en espera, pero podrás editar y agregar el detalle para que se vote por reabrirla.
    – Mariano
    Commented el 9 ago. 2016 a las 16:12
  • Hola, me refiero a que hago el mismo ejemplo que muestra el enlace, importo las librerias a un archivo index.php donde se crea la tabla y otro archivo llamado checkbox.php donde agrego datos ajax para adicionar a la tabla Commented el 9 ago. 2016 a las 17:37

1 respuesta 1

0

Hola espero que estés bien respecto a tu consulta tenemos que tener claro que el campo active en el backend o en los datos del ejemplo se representa por 1 y 0, cuando uno presiona sobre el botón para el orden al servidor llega lo siguiente;

columns[0][data]:Campo1
columns[0][name]:Campo1
columns[0][searchable]:true
columns[0][orderable]:true
columns[0][search][value]:
columns[0][search][regex]:false
columns[1][data]:Campo2
columns[1][name]:Campo2
columns[1][searchable]:true
columns[1][orderable]:true
columns[1][search][value]:
columns[1][search][regex]:false
columns[2][data]:Campo3
columns[2][name]:Campo3
columns[2][searchable]:true
columns[2][orderable]:true
columns[2][search][value]:
columns[2][search][regex]:false
columns[3][data]:Campo4
columns[3][name]:Campo4
columns[3][searchable]:true
columns[3][orderable]:true
columns[3][search][value]:
columns[3][search][regex]:false
order[0][column]:3
order[0][dir]:desc

donde el campo orden tiene la dirección de ordenamiento; order[0][dir]:desc y la columna que sera tomada para ordenar order[0][column]:3

tienes que validar como se cambia el estado de esa columna y el método que ordena los elementos en el servidor.

espero esto te pueda ayudar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.