how to filter a table based on a selector

ziolupo

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

allan

Hi,

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

Allan

ziolupo

So easy... unbeliveable

Thank you so much.