how to filter a table based on a selector

how to filter a table based on a selector

ziolupoziolupo Posts: 2Questions: 1Answers: 0

Dear all,
I'm new to DataTables and I started to use it on a new project.
My HTML has a form and inside the form there is a dropdown menu:


<form action="/action_page.php"> <label for="inputFatturate" class="">Mostra commesse:</label> <select name="fatturate" id="fatturate"> <option value="0" selected>Tutte</option> <option value="1">Fatturate</option> <option value="2" >Da Fatturare</option> </select> </form> <table id="example" class="table table-striped table-hover table-paolo" style="width:100%"> <thead> <tr> <th>Progetto</th> <th>Cliente</th> <th>Note</th> <th>Valore</th> <th>DataApertura</th> <th>DataChiusura</th> <th>E</th> <th>D</th> </tr> </thead> </table>

Everything is working perfectly taking data from a php small scripts.
Now I would like to add a different WHERE statement when the user is changing selection on #fatturate

Following you will get my javascript. I can pass variable to the php script using ajax data and it's working... but I don't know how to change it when #fatturate (the select item) is changing value.

Thank you
ZioLupo

$(document).ready(function() {
    $('#example').DataTable( {
        "paging": false,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "get-data2.php",
            "type": "POST",
            "data": function ( d ) {
                d.myKey = "1";
                d.Fatturate = $('#fatturate').val();
                // etc
            }

        },

        
        "columns": [
            { "data": "Progetto" },
            { "data": "Cliente" },
            { "data": "Descr" },
            { "data": "Valore" },
            { "data": "DataApertura" },
            { "data": "DataChiusura" },
            { "data": "E" },
            { "data": "D" }
        ]
        

    } );

    $("#fatturate").change(function(){
        var $option = $(this).find('option:selected');
        var value=$option.val();
        #example.reload();
    }
    
} );

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 48,902Questions: 1Answers: 7,131 Site admin
    Answer ✓

    Hi,

    Call ajax.reload(). That should be all you need to do in your change event.

    Allan

  • ziolupoziolupo Posts: 2Questions: 1Answers: 0

    So easy... unbeliveable :D :D :D :D

    Thank you so much.

Sign In or Register to comment.