Tengo un problema en un proyecto en MVC C# y Sql Server utilizo datatables, he creado un archivo JavaScript que llena y muestra los datos que trae del SQL Server en un datatable y lo muestra en un modal desde una vista hasta ahí todo bien.
El detalle es cuando pongo la función en la vista si me muestra la tabla con los datos en el modal, pero cuando la función que es un archivo JavaScript lo pongo en un archivo JavaScript y lo llamo no me funciona es decir no carga la tabla.
Lo que se desea conseguir es que el archivo JavaScript donde esta la función que llena la tabla lo voy ha llamar en diferentes vistas.
Ejemplo la función del archivo JavaScript llena la tabla de ubigeo en un modal, y lo voy ha utilizar en diferentes vistas cuando realice el llamado por ejemplo en una vista cliente, en una vista proveedor etc. Creo que el problema es que no lo esta reconociendo el datatable en un archivo JavaScript.
el srctip lo pongo en la vista asi:
var tabubi;
$(document).ready(function() {
//-- Todo sobre Cliente.
//Obtener Ubigeo
tabubi = $('#tabUbi').DataTable({
"ajax": {
"url": "/Ubigeo/UbiObt",
"type": "GET",
"datatype": "json"
},
"columns": [{
"data": "UbiCod",
"render": function(data, type, row, meta) {
return "<button class='btn btn-xs btn-success ml-1' type='button' onclick='UbiSel(" + JSON.stringify(row) + ")'><i class='fas fa-check'></i></button>"
},
"orderable": false,
"searchable": false,
"width": "20px"
},
{
"data": "UbiCod"
},
{
"data": "UbiDep"
},
{
"data": "UbiPro"
},
{
"data": "UbiDis"
}
],
"language": {
"url": "@Url.Content(~/Content/datatable/datatable.es-ES.json)"
},
"responsive": true,
"lengthChange": true,
"autoWidth": false,
});
function BusUbi() {
tabubi.ajax.reload();
$('#ModUbi').modal('show');
}
function UbiSel(json) {
$("#TxtUbi").val(json.UbiCod);
$("#TxtDep").val(json.UbiDep);
$("#TxtPro").val(json.UbiPro);
$("#TxtDis").val(json.UbiDis);
$('#ModUbi').modal('hide');
}
});
<div class="modal fade" id="ModUbi" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="mod-cab modal-content">
<div class="modal-header">
<h5 class="modal-title">Ubigeo :</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table id="tabUbi" class="table table-sm table-bordered table-striped table-hover" style="width:100%">
<thead>
<tr>
<th></th>
<th>Ubigeo</th>
<th>Dpto</th>
<th>Provincia</th>
<th>Distrito</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-danger btn-flat" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</div>