Buenas noches, estoy trabajando con Jquery, extrayendo datos de una base de datos y creando una tabla dinámica con los datos. Es decir, realizo una extracción de datos en una funcion javascript:
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", $urlEnvio, false);
xmlhttp.setRequestHeader("accept" ,"application/json");
xmlhttp.setRequestHeader("content-type" ,"application/json");
xmlhttp.send($urlEnvio);
var resultado = xmlhttp.response;
var long = resultado.length;
var elementos =JSON.parse(resultado);
A continuación, creo un encabezado de la tabla (es la misma del ejemplo de dataTables):
$('#infoDonantes').append("<div class='panel-body'>"+
"<table width='100%' class='table table-striped table-bordered table-hover' id='dataTables-example'>"+
"<thead>"+
"<tr role='row'>"+
"<th class ='sorting_asc'>Numero de Historial</th>"+
"<th class ='sorting_asc'>Nombre</th>"+
"</thead>"+
"<tbody>");
Y finalmente recorro los datos con un bucle para imprimir todos los resultados:
for(var i = 0; i < elementos.count; i++){
$('#dataTables-example').append("<tr class='odd gradeA'>"+
"<tr class='odd gradeA'>"+
"<td>"+elementos.historias[i].nh+"</td>"+
"<td>"+elementos.historias[i].name+"</td>"+
"</tr>");
}
$('</tr> ').append("</tbody>"+
"</table>"+
"</div>"+
"<script src='vendor/datatables/js/jquery.dataTables.min.js'></script>"+
"<script src='vendor/datatables-plugins/dataTables.bootstrap.min.js'></script>"+
"<script>"+
"$(document).ready(function() {"+
"$('#dataTables-example').DataTable({"+
"responsive: true"+
"});"+
"});"
);
El problema esta en que esto efectivamente, me muestra los resultados sin problemas, pero como una tabla normal, es decir, no se aplica el efecto de búsqueda y ordenación del plugin dataTables. En el ejemplo que viene en el plugin las siguientes lineas son las que ponen en marcha las características de la tabla:
<script src="../vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
<script src="../vendor/datatables-responsive/dataTables.responsive.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
Pero no sé dónde insertar ese fragmento para que funcione correctamente el plugin. Espero haberme explicado bien. Agradecería mucho una ayuda ya que me trae de cabeza.