Jquery DataTables以及如何在表单中选择/输入更改时aoData.push数据_Jquery_Forms_Datatables

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

jquery forms datatables

Jquery DataTables以及如何在表单中选择/输入更改时aoData.push数据,jquery,forms,datatables,Jquery,Forms,Datatables,我有一个表格来过滤表中的数据。但是我有一些问题，比如如何将数据传递到DataTables，以及如何在选择或输入更改时刷新表以下是代码的一部分： function renderDataTable(selector) { var out = []; var tables = jQuery(selector); var sorting; for ( var i=0, iLen=tables.length ; i<iLen ; i++ ){ va

我有一个表格来过滤表中的数据。但是我有一些问题，比如如何将数据传递到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?
    });

});

函数renderDataTable（选择器）{
var out=[]；
var tables=jQuery（选择器）；
var排序；
对于（var i=0，iLen=tables.length；i=0）{
排序=[defaultCol，'desc']；
}否则{
排序=[12，'desc']；
}
var oTable2=jQuery（表[i]）.dataTable({
“sDom”：“Tlfrtip”，
“A排序”：[排序]，
“bStateSave”：正确，
“bProcessing”：正确，
“bServerSide”：正确，
“sAjaxSource”：“list.php”，
“iDisplayLength”：20，
“阿伦提努”：[[20,50,100]，[20,50,100]，
“sPaginationType”：“完整编号”，
});             
向外推（旋转2）；
}
返回；
}
$（文档）.ready（函数（）{
renderDataTable（“主表”）；
$（“选择#myVar”）.change（函数（）{
var myVar=$（this.val（）；
//将数据推送到表并刷新？
});
});

有人能帮我吗？Thanx提前。

好的，找到了答案，我把它贴在这里，这样任何需要的人都可以使用它。我发现我要找的东西可以这样做：

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


函数renderDataTable（选择器）{
var out=[]；
var tables=jQuery（选择器）；
var排序；
对于（var i=0，iLen=tables.length；i=0）{
排序=[defaultCol，'desc']；
}否则{
排序=[12，'desc']；
}
var data1=$（“#data1”）.val（）；
var data2=$（“#data2”）.val（）；
var oTable2=jQuery（表[i]）.dataTable({
“sDom”：“Tlfrtip”，
“A排序”：[排序]，
“bStateSave”：正确，
“bProcessing”：正确，
“bServerSide”：正确，
“sAjaxSource”：“gmoulds/moldes_estatics/moldes_listagem_01_busca.php”，
“fnServerData”：函数（sSource、aoData、fnServerData回调）{
aoData.push（{“name”：“data1”，“value”：$（“#data1”）.val（）}）；
aoData.push（{“name”：“data2”，“value”：$（“#data2”）.val（）}）；
$.getJSON（sSource，aoData，函数（json）{
fn回调（json）；
} );
},
“iDisplayLength”：20，
“阿伦提努”：[[20,50,100]，[20,50,100]，
“sPaginationType”：“完整编号”，
“sScrollX”：“100%”，
“崩溃”：真
});             
向外推（旋转2）；
$（“#数据1，#数据2”）.keyup（函数（e）{
oTable2.fnReloadAjax（）；
});
}
返回；
}       
$（文档）.ready（函数（）{
renderDataTable（“主表”）；
});

jquery.dataTables.min.js中不包含函数fnReloadAjax（），但可以在此处找到它

感谢ShadowScripter为我们指出了一些方向。

好的，找到了答案，我将其发布在这里，以便任何需要相同答案的人都可以使用它。

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

我发现我要找的东西可以这样做：

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


函数renderDataTable（选择器）{
var out=[]；
var tables=jQuery（选择器）；
var排序；
对于（var i=0，iLen=tables.length；i=0）{
排序=[defaultCol，'desc']；
}否则{
排序=[12，'desc']；
}
var data1=$（“#data1”）.val（）；
var data2=$（“#data2”）.val（）；
var oTable2=jQuery（表[i]）.dataTable({
“sDom”：“Tlfrtip”，
“A排序”：[排序]，
“bStateSave”：正确，
“bProcessing”：正确，
“bServerSide”：正确，
“sAjaxSource”：“gmoulds/moldes_estatics/moldes_listagem_01_busca.php”，
“fnServerData”：函数（sSource、aoData、fnServerData回调）{
aoData.push（{“name”：“data1”，“value”：$（“#data1”）.val（）}）；
aoData.push（{“name”：“data2”，“value”：$（“#data2”）.val（）}）；
$.getJSON（sSource，aoData，函数（json）{
fn回调（json）；
} );
},
“iDisplayLength”：20，
“阿伦提努”：[[20,50,100]，[20,50,100]，
“sPaginationType”：“完整编号”，
“sScrollX”：“100%”，
“崩溃”：真
});             
向外推（旋转2）；
$（“#数据1，#数据2”）.keyup（函数（e）{
oTable2.fnReloadAjax（）；
});
}
返回；
}       
$（文档）.ready（函数（）{
renderDataTable（“主表”）；
});

jquery.dataTables.min.js中不包含函数fnReloadAjax（），但可以在此处找到它

感谢ShadowScripter指出了一些方向。

函数renderDataTable（选择器）{
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");
});

var out=[]；
var tables=jQuery（选择器）；
var排序；
对于（var i=0，iLen=tables.length；i=0）{
排序=[defaultCol，'desc']；
}否则{
排序=[12，'desc']；
}
var data1=$（“#data1”）.val（）；
var data2=$（“#data2”）.val（）；
var oTable2=jQuery（表[i]）.dataTable({
“sDom”：“Tlfrtip”，
“A排序”：[排序]，
“bStateSave”：正确，
“bProcessing”：正确，
“bServerSide”：正确，
“sAjaxSource”：“gmoulds/moldes_estatisticas/moldes_Listage_01