Two DataTables in one Page source Ajax request

Question

I have a page where I want to put two or more DataTables fetching data for Ajax. The problem that happens is that the first is filled DataTables but when trying to fill the second of the error message:

DataTables warning: Attempted to initialise DataTables on a node which is not a table: 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

You're creating a datatable on the DIV of id grid_estoque instead of the TABLE of id lista_estoque. And datatable can only be created on an html TABLE.

Thus, replace

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

by

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