How individual column searching (text inputs) with cycle "for" in template Django ?

giocadiz

I need to create filters by field with "datatable" in django template, the fields I go through with a "for" cycle, but the javascript code does not work to traverse the different values ​​of the object ???

<div class="row">
    <div class="col-lg-12">
        <table id="tabla" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th class="text-center">field_1</td>
                    <th class="text-center">field_3</td>
                    <th class="text-center">field_4</td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th class="text-center">field_1</td>
                    <th class="text-center">field_3</td>
                    <th class="text-center">field_4</td>
                </tr>
            </tfoot>
            <tbody>
            {% for list in list_field %}
                <tr>
                    <td>{{ list.field_1}}</td>
                    <td>{{ list.field_2}}</td>
                    <td>{{ list.field_3}}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table
    </div>
</div>

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#tabla tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#tabla').DataTable();

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

kthorngren

I copied your JS code into this test case and it does work to search the column.
http://live.datatables.net/fecamilo/1/edit

What does the HTML table look like that your for loop builds? Use view source to see the table. Maybe you can copy the resulting HTML table into the test case to see if it works or to get help troubleshooting.

Kevin

giocadiz

thank you very much, now it works for some reason it did not work. Another query, now I want to populate my "datatable" by means of my apirest, I understand that it can be done through ajax, I have tried to test but it does not work, some help or idea?

var tabla = $('#tabla').DataTable({
  'ajax': {
    "type"   : "POST",
    "url"    : 'http://127.0.0.1:8000/api/',
    "data"   : function( d ) {
      d.example_key1= $('#example_input1').val();
      d.example_key2= $('#example_input2').val();
      d.example_key3= $('#example_input3').val();
    },
    "dataSrc": ""
  },
  'columns': [
    {"data" : "PAIS"},
    {"data" : "NAGIOS"},
    {"data" : "APM"},
    {"data" : "HOSTNAME"}
  ]
});

iagojm

Find an answer this?

colin

Hi @iagojm ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin