Question

我有一个页面，我想在其中放置两个或更多DataTables为Ajax提取数据。发生的问题是第一个是填充DataTables但是在尝试填充第二个错误消息时：

DataTables警告：尝试在不是表的节点上初始化DataTable：DIV

<script type="text/javascript">
    var oTableSetor;
    var oTableEstoque;

    function dtConvFromJSON(data)
    {
        return data;
    }

    $(document).ready(function () {
        $('.dataTable').dataTable();
        GridProdutoLote();    
        GridProdutoEstoque();
    });

    function GridProdutoLote() {
        if (oTableSetor===undefined)
        {
            oTableGrid = $('#lista_lote').dataTable({           
                "bServerSide": true,           
                "sAjaxSource": '@Html.Raw(@Url.Action("ListaGenerica", "Home", new { aController = "ProdutoLote", filtroID = @Model.ProdutoID  } ))',
                "bProcessing": true,
                "sPaginationType": "full_numbers",                  
                "aoColumns": [
                            { "mDataProp": "ProdutoLoteID", "sTitle": "ID"},
                            { "mDataProp": "Lote", "sTitle": "Lote" },
                            { "mDataProp": "Identificacao", "sTitle": "Identificação"},
                            { "mDataProp": "DtFabricacao", "sTitle": "Dt. Fabricação", "mRender": function (data, type, full) { return dtConvFromJSON(data); } },
                            { "mDataProp": "DtValidade", "sTitle": "Dt. Validade", "mRender": function (data, type, full) { return dtConvFromJSON(data); }},
                            { "mDataProp": "QtdeAtual", "sTitle": "Qtde. Atual"},
                            { "mDataProp": "QtdeEmUtilizacao", "sTitle": "Qtde. em Utilizacao"},                           
                            { "mData": null, "bSortable": false, "fnRender": function (o) {return '<a class="icone_16x16_detalhe" href=/Setor/Detalhar/' + o.aData["ProdutoLoteID"] + '>D</a>';}}                         
                ],
            });
        }
    };


    function GridProdutoEstoque() {
        if (oTableEstoque===undefined)
        {
            oTableEstoque = $('#grid_estoque').dataTable({           
                "bServerSide": true,           
                "sAjaxSource": '@Html.Raw(@Url.Action("ListaGenerica", "Home", new { aController = "ProdutoEstoque", filtroID = @Model.ProdutoID  } ))',
                "bProcessing": true,
                "sPaginationType": "full_numbers",                  
                "aoColumns": [
                            { "mDataProp": "ProdutoEstoqueID", "sTitle": "ID"},                        
                            { "mDataProp": "Identificacao", "sTitle": "Identificação"},
                            { "mDataProp": "Lote", "sTitle": "Lote", "mRender": function (data, type, full) { return dtConvFromJSON(data); } },
                            { "mDataProp": "QtdeMinima", "sTitle": "QtdeMinima", "mRender": function (data, type, full) { return dtConvFromJSON(data); }},
                            { "mDataProp": "QtdeAtual", "sTitle": "Qtde. Atual"},
                            { "mDataProp": "QtdeEmUtilizacao", "sTitle": "Qtde. em Utilizacao"},                           
                            { "mData": null, "bSortable": false, "fnRender": function (o) {return '<a class="icone_16x16_detalhe" href=/Setor/Detalhar/' + o.aData["ProdutoEstoqueID"] + '>D</a>';}}                         
                ],
            });
        }
    };

</script>


<div class="linha left" id="grid_lote">   
    <br />       
    <br />
    <table id="lista_lote" class="display">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>               
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<div class="linha left" id="grid_estoque">   
    <br />       
    <br />
    <table id="lista_estoque" class="display">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>               
                <th></th>
                <th></th>
                <th></th>               
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

Answer 1

您正在ID grid_estoque的 DIV 上创建数据表，而不是ID lista_estoque的 TABLE 。数据表只能在html TABLE 上创建。

因此，替换

oTableEstoque = $('#grid_estoque').dataTable({

通过

oTableEstoque = $('#lista_estoque').dataTable({

一个页面源Ajax请求中的两个DataTable

1 个答案: