JQuery DataTables и как aoData.push данные на выбор / изменение ввода в форме

Question

У меня есть форма для фильтрации данных в таблице.Но у меня есть несколько вопросов о том, как передать эти данные в DataTables и как обновить таблицу при любом изменении выбора или ввода.

Вот часть кода:

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

});

Может кто-нибудь помочь мне здесь, пожалуйста?Спасибо заранее.

Answer 1

ОК, нашел ответ, и я выкладываю его здесь, так что любой, кто нуждается в этом, может использовать его. Я обнаружил, что то, что я искал, можно сделать так:

<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>

Функция fnReloadAjax () не включена в jquery.dataTables.min.js, но ее можно найти здесь http://www.datatables.net/plug-ins/api#fnGetHiddenNodes

Спасибо ShadowScripter за указание некоторых направлений.

Answer 2

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