0

Estoy con la misión de modificar los valores de un DATATABLE al dar click en un botón creado en el html con ayuda también de bootstrap (posiblemente no tiene que ver pero almenos para tenerlo a consideración).

Estoy trabajando con python y django. Al renderizar el html luego ir al url necesario, se carga en éste un datatable. El código en html es:

<table id = "tabla1" data-toggle="table" class="table table-bordered table-hover tablaConFiltros">
                    <thead>
                    <tr>
                        <th>Indice</th>
                        <th>Lugar</th>
                        <th>Ciudad</th>
                        <th>Latitud</th>
                        <th>Longitud</th>
                        <th>Region</th>
                        <th>Zona</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                        <th>Indice</th>
                        <th>Lugar</th>
                        <th>Ciudad</th>
                        <th>Latitud</th>
                        <th>Longitud</th>
                        <th>Region</th>
                        <th>Zona</th>
                    </tr>
                    </tfoot>
                    <tbody>
                    {% for item in lst_data %}
                        <tr>
                            <td>{{ item.0 }}</td>
                            <td>{{ item.1 }}</td>
                            <td>{{ item.2 }}</td>
                            <td>{{ item.3 }}</td>
                            <td>{{ item.4 }}</td>
                            <td>{{ item.5 }}</td>
                            <td>{{ item.6 }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>

La etiqueta tfoot la uso para filtrar en cada columna individualmente.

Para darle este modificación extra, usé un java script:

$(document).ready(function() {

    //esconder control buscar generico

    // Setup - add a text input to each footer cell
    $('.tablaConFiltros tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="filter by '+title+'" />'  ); //se aprecia los footer para filtrar
    } );
    // DataTable
    var table = $('#tabla1').DataTable({
        "dom": '<"top"l>rt<"bottom"ip><"clear">'  //hide upper search box
    });

    // Apply the search
    table.columns().every( function () {
        var that = this;
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that.search( this.value ).draw();
            }
        } );
    } );


} );

Cuando ya el html esta siendo visualizado, y el datatable quiere ser modificado, uso un select y un boton para ello. Del select escojo lo necesario y hago la modificación con ayuda de un jquery. El siguiente:

    <script>

        $(document).ready(function() {
            $("#boton").click(function () {

... //mas codigo  

                table = $('#tabla1').DataTable();
                table.destroy();
                table = $('#tabla1').DataTable({"ajax": '{{ URL_TMP_AJAX }}data.txt'});


            });
        })
    </script>

Básicamente lo que hago es llamar a un archivo(data.txt) con el siguiente formato:

{"data":[["datoA1","datoA2","datoA3","datoA4","datoA5","datoA6","datoA7" ] ,..... ]}

y al parecer si cambia la tabla pero si realizo cualquier acción sobre ella, vuelve a los datos anteriores.

En caso de que este realizando algo mal, Cual sería la falla? y en caso de tener una manera que desde un jquery pueda modificar los valores del datatable, Cual sería?.

Saludos!

1 respuesta 1

0

Ahora mismo acabo de modificar la manera de traer la tabla.

Basicamente el estilado(script jquery) y la creació lo hago en el html directamente, y llamo a un url nuevo (con ajax en GET) para que se renderize la página y llamo a un div donde esta el datatable y otras cosas que deseo modificar en la vista.

Finalemnte hago el llamado con el código:

$.ajax({
                    url: str,
                    type: 'GET',
                    dataType: "html",
                    success: function (data) {
                        var $result = $(data).find('#exTab1');
                        $('#exTab1').html($result);
                    }
                });

str es el link

GET es por el tipo de request

html para que se genere de esa manera y llamarlo así.

y al hacer success llamo al objeto de id "exTab1" el cual es el div que contiene mi datatable y otros que se modifican. Finalmente cambio el html presentado y listo.

Tener en cuenta que el estilado lo hago dentro del mismo html antes de que se termine el body, ya que luego se presentan problemas con esto.

Siendo el codigo de la siguiente manera:

<table id = "tabla1" data-toggle="table" class="table table-bordered table-hover tablaConFiltros">
                    <thead>
                    <tr>
                        <th>N° Semana</th>
                        <th>Día</th>
                        <th>Categoría</th>
                        <th>Stock</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                        <th>N° Semana</th>
                        <th>Día</th>
                        <th>Categoría</th>
                        <th>Stock</th>
                    </tr>
                    </tfoot>
                    <tbody>
                    {% for item in lst_data %}
                        <tr>
                            <td>{{ item.0 }}</td>
                            <td>{{ item.1 }}</td>
                            <td>{{ item.2 }}</td>
                            <td class="text-right">{{ item.3 }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <script type="text/javascript">
                    $(document).ready(function() {
                        //esconder control buscar generico
                        // Setup - add a text input to each footer cell
                        $('.tablaConFiltros tfoot th').each( function () {
                            var title = $(this).text();
                            $(this).html( '<input type="text" placeholder="filter by '+title+'" />' );
                        } );
                        // DataTable
                        var table = $('#tabla1').DataTable({
                            "dom": '<"top"l>rt<"bottom"ip><"clear">'  //hide upper search box
                        });
                        // Apply the search
                        table.columns().every( function () {
                            var that = this;
                            $( 'input', this.footer() ).on( 'keyup change', function () {
                                if ( that.search() !== this.value ) {
                                    that.search( this.value ).draw();
                                }
                            } );
                        } );
                    } );
                </script>

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.