DataTables with AJAX

by dshilkret

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<p>
    <b>Filter:</b><br/>
    <select id="example-select">
        <option selected>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
        <option>Value 4</option>      
    </select>
</p>

<table id="example" class="display" cellspacing="0">
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

JavaScript

// AJAX emulation
$.mockjax({
    url: '/test/0',
    responseTime: 200,
    response: function(settings){
        console.log("Request data: ", settings.data);
        
        var val = settings.data.example_select;
        this.responseText = {
            data: [
                ["A01", val],
                ["A02", val],
                ["A03", val],
                ["A04", val],
                ["A05", val],
                ["A06", val],
                ["A07", val],
                ["A08", val],
                ["A09", val],
                ["A10", val],
                ["A11", val],
                ["A12", val]
            ]
       }
    }
});

var $table = $('#example');
$('#example').DataTable({
    "ajax": {
        url: "/test/0",
        data: function(d){
            d.example_select = $('#example-select').val();            
        },
    }
});

$('#example-select').on('change', function(){
    $('#example').DataTable().ajax.reload(); 
});