Reload Data table with new parameter in ajax call

Question

I have added a datatable with an AJAX call in my application. Its working fine, but I need to add some custom filters.

Here is my code

<table id="mydatatable">
    <thead>
        <tr>
            <td>Name</td>
            <td>Age</td>
            <td>Email</td>
        </tr>
    </thead>
</table>
<script>
    $("#mydatatable").DataTable({
        "ajax": {
            url: "ajax.php?action=datatable",
            "type": 'POST',
        },
        "order": [[2, "desc"]],
    });
</script>

now I have added custom select box for age >15, >25, >35 on that select box change I need to make AJAX call and refresh the datatable

Answer 1

You can supply data from the select box to your ajax.php script by using ajax.data option. Then use ajax.reload() API method to reload the data when value of select box changes.

Change your ajax.php to filter data based on supplied age request parameter.

For example:

$("#mydatatable").DataTable({
    "ajax": {
        "url": "ajax.php?action=datatable",
        "data": function(data){
           data.age = $('#select-age').val();
        },
        "type": 'POST',
    },
    "order": [[2, "desc"]],
});

// Handle event when select box value changes
$('#select-age').on('change', function(){
   // Reload data 
   $("#mydatatable").DataTable().ajax.reload();
});