Two DataTables in one Page, source Ajax request

mtsys

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

[code]
@model ERP.Models.Produto

@{
ViewBag.Title = Html.MontaTitulo("Detalhe produto - " + @Model.ProdutoID.ToString());
}


var oTableSetor;
var oTableEstoque;

function dtConvFromJSON(data)
{
if (data == null) return '1/1/1950';
var r = /\/Date\(([0-9]+)\)\//gi;
var matches = data.match(r);
if (matches == null) return '1/1/1950';
var result = matches.toString().substring(6,19);
var epochMilliseconds = result.replace(/^\/Date\(([0-9]+)([+-][0-9]{4})?\)\/$/,'$1');
var b = new Date(parseInt(epochMilliseconds));
var c = new Date(b.toString());
var curr_date = ( '0' + (c.getDate()) ).slice( -2 );
var curr_month = ( '0' + (c.getMonth()+1) ).slice( -2 );
var curr_year = c.getFullYear();
var curr_h = c.getHours();
var curr_m = c.getMinutes();
var curr_s = c.getSeconds();
//var curr_offset = c.getTimezoneOffset()/60
var d = curr_date.toString() + '/' + curr_month.toString() + '/' + curr_year; // + " " + curr_h + ':' + curr_m + ':' + curr_s;
return d;
}

$(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 'D';}}
],
});

$('#lista_lote_filter input').unbind();
$("#lista_lote").show();
$("#grid_lote").show();
$('#lista_lote_filter input').bind('keyup', function(e) {
if(e.keyCode == 13) {
oTableGrid.fnFilter(this.value);
}});
}
};


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 'D';}}
],
});
/*
$('#lista_estoque_filter input').unbind();
$("#lista_estoque").show();
$("#grid_estoque").show();
$('#lista_estoque_filter input').bind('keyup', function(e) {
if(e.keyCode == 13) {
oTableEstoque.fnFilter(this.value);
}}); */
}
};




Lista de Lotes do Produto - @Model.ProdutoID





































Lista de Estoque do Produto - @Model.ProdutoID























[/code]

tks