Jquery DataTables 以及如何在表单中选择/输入更改时推送数据

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