Reinitialize DATATABLE with the help of jquery ajax and a .txt

0

I'm here with the mission of modifying the values of a DATATABLE by clicking on a button created in the html with help also of bootstrap (possibly not has to see but at least to have it under consideration).

I'm working with python and django. When rendering the html then go to the required url, a datatable is loaded in it. The code in html is:

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

The tfoot tag I use to filter in each column individually.

To give you this extra modification, I used a 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();
            }
        } );
    } );


} );

When the html is already being visualized, and the datatable wants to be modified, I use a select and a button for it. From the selection I choose the necessary and I make the modification with the help of a jquery. The following:

    <script>

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

... //mas codigo  

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


            });
        })
    </script>

Basically what I do is call a file (data.txt) with the following format:

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

and apparently if you change the table but if you perform any action on it, go back to the previous data.

In case you are doing something wrong, what would be the fault? and in case of having a way that from a jquery can modify the values of the datatable, what would it be?.

Greetings!

    
asked by Emmanuel Moran 12.03.2018 в 16:06
source

1 answer

0

Right now I just modified the way to bring the table.

Basically the style (script jquery) and the creation I do in the html directly, and call a new url (with ajax in GET) to renderize the page and call a div where is the datatable and other things that I want to modify in the view.

Finally I make the call with the code:

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

str is the link

GET is for the type of request

html to be generated in that way and call it that.

and when doing success I call the object of id "exTab1" which is the div that contains my datatable and others that are modified. Finally I change the HTML presented and ready.

Keep in mind that I do the styling within the same html before the body is finished, since then there are problems with this.

Being the code as follows:

<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>
    
answered by 12.03.2018 в 17:09