Skip to main content
etiquetas editadas
Enlace
user13558
user13558
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Publicación reabierta por dwarandae, JuankGlezz, Alan, devconcept, Mariano

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

introducir<html>
<head>
 el<title>Ordenar códigopor aquíColumnas</title>
Ordenar por ColumnasFirst nameLast namePhoneCityZipActive
 <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" } ] } );

 
$(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>

} );

TambienTambién el archivo checkbox.phpcheckbox.php con codigo ajaxcódigo ajax para llenar los datos de la tabla.

introducir<?php el código{
 aquí "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?

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

introducir el código aquí
Ordenar por ColumnasFirst nameLast namePhoneCityZipActive
<!--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();
} );

} );

Tambien el archivo checkbox.php con codigo ajax para llenar los datos de la tabla.

introducir el código aquí

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

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

se eliminaron 6931 caracteres en el cuerpo
Origen Enlace

Cree unlos siguientes archivos llamado index.php donde importe las librerias, cree la tabla y agregue el javascript al final:

---- index.php -----

introducir el código aquí
OrdenarOrdenar
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 '';}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-->
<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();
} );

} );

Tambien el archivo checkbox.php con codigo ajax para llenar los datos ajax ----

hago el ejemplo que me indican alli pero no me funciona, que debo hacer?de la tabla.

introducir el código aquí

Cree un archivos llamado index.php donde importe las librerias, cree la tabla y agregue el javascript al final:

---- index.php -----

Ordenar
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 '';}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();});});

---- archivo checkbox.php con los datos ajax ----

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

Cree los siguientes archivos:

introducir el código aquí
Ordenar
<!--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();
} );

} );

Tambien el archivo checkbox.php con codigo ajax para llenar los datos de la tabla.

introducir el código aquí
se añadieron 12024 caracteres en el cuerpo
Origen Enlace
Loading
se añadieron 12024 caracteres en el cuerpo
Origen Enlace
Loading
Publicación cerrada como "Necesita detalles o aclaraciones" por Gerardo Martínez, devconcept, kikocorreoso, Shaz, Mariano
Origen Enlace
Loading