Jquery DataTables and how to aoData.push data on select/input change in form

Question

I have a form to filter out data in a table. But I'm having some questions in how to pass that data to DataTables and how to refresh the table on any of the select or input change.

Here is the part of the code:

function renderDataTable(selector) {
    var out = [];
    var tables = jQuery(selector);
    var sorting;

    for ( var i=0, iLen=tables.length ; i<iLen ; i++ ){
        var defaultCol = jQuery('th', tables[i]).index(jQuery(".dataTable-defaultSort",tables[i]));
        if(defaultCol >= 0){
            sorting = [ defaultCol, 'desc' ];
        }else{
            sorting = [12,'desc'];
        }

        var oTable2 = jQuery(tables[i]).dataTable({
            "sDom": 'T<"clearfix">lfrt<"clearfix">ip',
            "aaSorting": [ sorting ],
            "bStateSave": true,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "list.php",
            "iDisplayLength": 20,
            "aLengthMenu": [[20, 50, 100], [20, 50, 100]],
            "sPaginationType": "full_numbers",
        });             

        out.push( oTable2 );

    }
    return out;
}

$(document).ready(function() {
    renderDataTable("#main_table");

    $("select#myVar").change(function () {
        var myVar = $(this).val();      
        // push data to table and refresh?
    });

});

Can anyone help me out here please? Thanx in advance.

jaclerigo · Accepted Answer · 2011-12-29 10:16:36Z

OK, found the answer and I'm posting it here so anyone who needs the same can use it. I've found that the thing I was looking for can be done like this:

<script type="text/javascript" charset="utf-8" src="jquery.dataTables.fnReloadAjax.js"></script>
<script type="text/javascript" charset="utf-8">

    function renderDataTable(selector) {
        var out = [];
        var tables = jQuery(selector);
        var sorting;

        for ( var i=0, iLen=tables.length ; i<iLen ; i++ ){
            var defaultCol = jQuery('th', tables[i]).index(jQuery(".dataTable-defaultSort",tables[i]));
            if(defaultCol >= 0){
                sorting = [ defaultCol, 'desc' ];
            }else{
                sorting = [12,'desc'];
            }

            var data1           = $("#data1").val();
            var data2           = $("#data2").val();

            var oTable2 = jQuery(tables[i]).dataTable({
                "sDom": 'T<"clearfix">lfrt<"clearfix">ip',
                "aaSorting": [ sorting ],
                "bStateSave": true,
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "<?=LOC_BASE?>gmoulds/moldes_estatisticas/moldes_listagem_01_busca.php",

                "fnServerData": function ( sSource, aoData, fnCallback ) {

                   aoData.push( { "name": "data1", "value": $("#data1").val() } );
                   aoData.push( { "name": "data2", "value": $("#data2").val() } );

                   $.getJSON( sSource, aoData, function (json) { 
                      fnCallback(json);
                   } );
                },

                "iDisplayLength": 20,
                "aLengthMenu": [[20, 50, 100], [20, 50, 100]],
                "sPaginationType": "full_numbers",
                "sScrollX": "100%",
                "bScrollCollapse": true
            });             

            out.push( oTable2 );

            $("#data1, #data2").keyup(function(e) {
                oTable2.fnReloadAjax();
            });

        }
        return out;
    }       

    $(document).ready(function() {
        renderDataTable("#main_table_estatistica");
    });
</script>

The function fnReloadAjax() is not included in the jquery.dataTables.min.js, but it can be found here http://www.datatables.net/plug-ins/api#fnGetHiddenNodes

Thanks to ShadowScripter for pointing out some directions.

umer · Accepted Answer · 2017-06-20 08:00:08Z

function renderDataTable(selector) {
    var out = [];
    var tables = jQuery(selector);
    var sorting;

    for ( var i=0, iLen=tables.length ; i<iLen ; i++ ){
        var defaultCol = jQuery('th', tables[i]).index(jQuery(".dataTable-defaultSort",tables[i]));
        if(defaultCol >= 0){
            sorting = [ defaultCol, 'desc' ];
        }else{
            sorting = [12,'desc'];
        }

        var data1           = $("#data1").val();
        var data2           = $("#data2").val();

        var oTable2 = jQuery(tables[i]).dataTable({
            "sDom": 'T<"clearfix">lfrt<"clearfix">ip',
            "aaSorting": [ sorting ],
            "bStateSave": true,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "<?=LOC_BASE?>gmoulds/moldes_estatisticas/moldes_listagem_01_busca.php",

            "fnServerParams": function (aoData) {


            var searcharray =  ({name: "search", value: 'aaa'});
            aoData['searchdata'] = searcharray;
            },

            "iDisplayLength": 20,
            "aLengthMenu": [[20, 50, 100], [20, 50, 100]],
            "sPaginationType": "full_numbers",
            "sScrollX": "100%",
            "bScrollCollapse": true
        });             

        out.push( oTable2 );

        $("#data1, #data2").keyup(function(e) {
            oTable2.fnReloadAjax();
        });

    }
    return out;
}       

$(document).ready(function() {
    renderDataTable("#main_table_estatistica");
});

Collectives™ on Stack Overflow

Jquery DataTables and how to aoData.push data on select/input change in form

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related