Update select filters on ajax url load

duttojp

Hello,

First I would like to give a big thanks to developers behind this marvelous idea that ease my life.

I'm using a datatable at http://tv.dutto.fr with individual column searching (select inputs) created at table init.

At the top, visitor can reload the table with other ajax sources. However, I didn't find where (to avoid "function undefined") and how (to avoid "this.api undefined") write the callback function for this 4 buttons.

Here the init callback :

$(document).ready(function() {
    function MyCallBack () {
            var api = this.api();
  
            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select class="select" id="sel'+i+'"><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
  
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
  
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }       
        var grille = $('#grille').DataTable( {
        processing: true,
        ajax: { url: 'ajaxtv.php',
                cache: 'false'
                },
        language: {
                url: '/DataTables-1.10.5/French.json'
                },
        responsive: true,
        order: [ 0, 'asc' ],
        scrollY: (screen.availHeight-200),
        scrollCollapse: true,
        stateSave: true,
        deferRender: true,
        paging: false,
        info: false,
        columns: [
                { title: "Chaine", data: {
                    _: "col1.col1c",
                    sort: "col1.col1b",
                    display: "col1.col1a"
                }},
                { title: "Programme", data: {
                    _: "col2.col2c",
                    sort: "col2.col2b",
                    display: "col2.col2a"
                }},
                { title: "Suivi de", data: {
                    _: "col3.col3c",
                    sort: "col3.col3b",
                    display: "col3.col3a"
                }},
                { title: "Infos", data: {
                    _: "col4.col4b",
                    sort: "col4.col4b",
                    display: "col4.col4a"
                }}
                ],
        initComplete: MyCallBack
        } );
    setInterval( function () {
        grille.ajax.reload();
        }, 60000 );
    });

Here the on demand callback :

<input type=radio class=switch-input name=view value=tonight id=tonight onclick="$('#grille').DataTable().ajax.url('ajax.php?page=prime').load(MyCallBack);">
<label for=tonight class="switch-label switch-label-on">Soir</label>

Thanks for you help.