Estoy bastante atascado en cuanto a por qué recibo este error de JQuery Datatables "Advertencia de DataTables: id de tabla = myTable - Parámetro desconocido solicitado '0' para fila 0, columna 0. Para obtener más información sobre este error, consulte http: //tablas de datos.net/tn/4" . Intenté revisar la información del sitio web, pero no tenía mucho sentido para mí. Mi única suposición es que tiene algo que ver con la forma en que se pueden formatear los datos. Si es así, no estoy seguro de cómo resolver el problema.
Este fragmento de código obtiene la API para que pueda verlo en la consola y luego nuevamente para los datos de la tabla de datos.
var apiKey = "0ca80ddc-63f6-476e-b548-e5fb0934fc4b"; $.ajax({ type: "GET", url: "http://brew-roster-svc.us-e2.cloudhub.io/api/teams", headers: { "api-key": apiKey }, success: function(result){ console.log(result) console.log(JSON.stringify(result)); } }); $(document).ready( function () { $('#myTable').dataTable({ "ajax": { "url": "http://brew-roster-svc.us-e2.cloudhub.io/api/teams", "type": "get", "dataSrc": "", "beforeSend": function (request) { request.setRequestHeader("api-key", apiKey); }, "columns": [ { "data": "logo" }, { "data": "name" }, { "data": "league" }, { "data": "division" }, ], } }); });Estos son los resultados de mi depuración de resultados de Ajax en la consola.
(30) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]Esta porción es un fragmento de lo que veo cuando se expande:
0: {id: 133, nickname: 'Athletics', name: 'Oakland Athletics', location: 'Oakland', abbreviation: 'OAK', …} 1: {id: 134, nickname: 'Pirates', name: 'Pittsburgh Pirates', location: 'Pittsburgh', abbreviation: 'PIT', …} [[Prototype]]: Array(0)El problema principal es que ha colocado las definiciones de sus columnas dentro de la sección ajax de su DataTable. Debe mover columns fuera de esa opción ajax .
Además, la respuesta de Ajax usa leage en lugar de league , supongo que es solo un error de ortografía, pero debe cometer el mismo error de ortografía en los nombres de sus columnas.
$('#myTable').DataTable({ "ajax": { "url": "http://brew-roster-svc.us-e2.cloudhub.io/api/teams", "type": "GET", "dataSrc": "", "beforeSend": function (request) { request.setRequestHeader("api-key", apiKey); } }, "columns": [ { "data": "logo" }, { "data": "name" }, { "data": "leage" }, { "data": "division" } ] }); Finalmente, probablemente querrá mostrar el logotipo real en lugar de una cadena que muestre la URL del logotipo. Para eso, eche un vistazo a la representación de columnas . Para la columna del logo , puede usar un renderizador para crear una cadena de HTML:
'<img src="' + data + '">' En este caso, los data variables son la forma en que el renderizador de columnas se refiere al valor del logo .