βΉοΈ Skipped - page is already crawled
| Filter | Status | Condition | Details |
|---|---|---|---|
| HTTP status | PASS | download_http_code = 200 | HTTP 200 |
| Age cutoff | PASS | download_stamp > now() - 6 MONTH | 0.4 months ago |
| History drop | PASS | isNull(history_drop_reason) | No drop reason |
| Spam/ban | PASS | fh_dont_index != 1 AND ml_spam_score = 0 | ml_spam_score=0 |
| Canonical | PASS | meta_canonical IS NULL OR = '' OR = src_unparsed | Not set |
| Property | Value |
|---|---|
| URL | https://datatables.net/forums/discussion/75438/how-to-populate-a-table-using-a-json-data-variable |
| Last Crawled | 2026-04-04 17:56:40 (12 days ago) |
| First Indexed | 2023-02-14 11:56:19 (3 years ago) |
| HTTP Status Code | 200 |
| Meta Title | How to populate a table using a JSON data variable. β DataTables forums |
| Meta Description | Link to test case: Debugger code (debug.datatables.net): Error messages shown: Description of problem: |
| Meta Canonical | null |
| Boilerpipe Text | Link to test case
:
Debugger code (debug.datatables.net)
:
Error messages shown
:
Description of problem
:
Tengo el siguiente problema.
Desde una vista en el navegador llamo mediante AJAX una consulta en el servidor, esta la recibo en formato JSON, para llenar una tabla, la tabla se ha inicializado usando $("#selector).DataTable({options}); pero cuando llega el momento de presentar la respuesta, me dice que no encuentra la funciΓ³n "clear()" y si elimino esta lΓnea, me dice que no encuentra "rows.add()".
No puedo usar la opciΓ³n o mΓ©todo ajax de la API porque debo rehacer la tabla cuando se haga un cambio o una peticiΓ³n al servidor, y debo cambiar los datos a ser enviados al servidor, sΓ uso la opciΓ³n o funciΓ³n "ajax.reload()" me recargarΓa el dato anterior.
Ejemplo:
Priemra peticiΓ³n:
let collectionsTable = $("#collectionsList").DataTable({
ajax {
url: '/collections/lista'
}});
respuesta=> collectionsTable = {datos}
Segunda peticiΓ³n:
collectionsTable = $("#collectionsList").DataTable({
ajax {
url: '/collections/lista?page12'
}});
respuesta=>collectionsTable = {datos de la primera peticiΓ³n}
- Si realizara esto con una variable tambiΓ©n resulta de la misma forma; es decir la variable puede cambiar, pero DataTables trae la informaciΓ³n antigua; porque para la API la variable no ha cambiado.
Y es por eso que no uso la opciΓ³n o mΓ©todo "ajax" de la API.
He intentado de varias formas realizar la limpieza de la tabla y luego rellenarla de datos usando "clear", "add" y "draw", pero no encuentra las funciones.
Por cierto, segΓΊn la documentaciΓ³n, cuando se inicializa una tabla usando "DataTable" debe devolver una instancia de la API, pero sΓ se usa "dataTable" debe devolver un objeto, hay alguna diferencia entre esto, porque sΓ uso uno u otro siempre devuelve el mismo objeto.
Uso la versiΓ³n "1.13.1" del CDN :
https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js
Object { length: 0, prevObject: {β¦} }
β
length: 0
β
prevObject: Object { length: 0, prevObject: {} }
β
<prototype>: Object { jquery: "3.6.0", constructor: S(e, t)
, length: 0, β¦ }
ββ
DataTable: function DataTable(t)ββ
add: function add(e, t)ββ
addBack: function addBack(e)ββ
addClass: function addClass(t)ββ
after: function after()ββ
ajaxComplete: function t(e)ββ
ajaxError: function t(e)ββ
ajaxSend: function t(e)ββ
ajaxStart: function t(e)ββ
ajaxStop: function t(e)ββ
ajaxSuccess: function t(e)ββ
alert: function _jQueryInterface(e)ββ
animate: function animate(t, e, n, r)ββ
append: function append()ββ
appendTo: function e(e)ββ
attr: function attr(e, t)ββ
before: function before()ββ
bind: function bind(e, t, n)ββ
blur: function n(e, t)ββ
button: function _jQueryInterface(e, n)ββ
carousel: function _jQueryInterface(e)ββ
change: function n(e, t)ββ
children: function r(e, t)ββ
clearQueue: function clearQueue(e)ββ
click: function n(e, t)ββ
clone: function clone(e, t)ββ
closest: function closest(e, t)ββ
collapse: function _jQueryInterface(e)ββ
constructor: function S(e, t)ββ
contents: function r(e, t)ββ
contextmenu: function n(e, t)ββ
css: function css(e, t)ββ
data: function data(n, e)ββ
dataTable: function C(t, v)ββ
dataTableExt: Object { buttons: {β¦}, builder: "-source-", errMode: "alert", β¦ }
ββ
dataTableSettings: Array [ {β¦} ]
ββ
dblclick: function n(e, t)ββ
delay: function delay(r, e)ββ
delegate: function delegate(e, t, n, r)ββ
dequeue: function dequeue(e)ββ
detach: function detach(e)ββ
dropdown: function _jQueryInterface(e)ββ
each: function each(e)ββ
empty: function empty()ββ
emulateTransitionEnd: function emulateTransitionEnd(t)ββ
end: function end()ββ
eq: function eq(e)ββ
even: function even()ββ
extend: function extend()ββ
fadeIn: function e(e, t, n)ββ
fadeOut: function e(e, t, n)ββ
fadeTo: function fadeTo(e, t, n, r)ββ
fadeToggle: function e(e, t, n)ββ
filter: function filter(e)ββ
find: function find(e)ββ
finish: function finish(a)ββ
first: function first()ββ
focus: function n(e, t)ββ
focusin: function n(e, t)ββ
focusout: function n(e, t)ββ
get: function get(e)ββ
has: function has(e)ββ
hasClass: function hasClass(e)ββ
height: function o(e, t)ββ
hide: function r(e, t, n)ββ
hover: function hover(e, t)ββ
html: function html(e)ββ
index: function index(e)ββ
init: function init(e, t, n)ββ
innerHeight: function o(e, t)ββ
innerWidth: function o(e, t)ββ
insertAfter: function e(e)ββ
insertBefore: function e(e)ββ
is: function is(e)
ββ
jquery: "3.6.0"
ββ
keydown: function n(e, t)ββ
keypress: function n(e, t)ββ
keyup: function n(e, t)ββ
last: function last()
ββ
length: 0
ββ
load: function load(e, t, n)ββ
map: function map(n)ββ
modal: function _jQueryInterface(e, n)ββ
mousedown: function n(e, t)ββ
mouseenter: function n(e, t)ββ
mouseleave: function n(e, t)ββ
mousemove: function n(e, t)ββ
mouseout: function n(e, t)ββ
mouseover: function n(e, t)ββ
mouseup: function n(e, t)ββ
next: function r(e, t)ββ
nextAll: function r(e, t)ββ
nextUntil: function r(e, t)ββ
not: function not(e)ββ
odd: function odd()ββ
off: function off(e, t, n)ββ
offset: function offset(t)ββ
offsetParent: function offsetParent()ββ
on: function on(e, t, n, r)ββ
one: function one(e, t, n, r)ββ
outerHeight: function o(e, t)ββ
outerWidth: function o(e, t)ββ
parent: function r(e, t)ββ
parents: function r(e, t)ββ
parentsUntil: function r(e, t)ββ
popover: function _jQueryInterface(t)ββ
position: function position()ββ
prepend: function prepend()ββ
prependTo: function e(e)ββ
prev: function r(e, t)ββ
prevAll: function r(e, t)ββ
prevUntil: function r(e, t)ββ
promise: function promise(e, t)ββ
prop: function prop(e, t)ββ
push: function push()
ββ
pushStack: function pushStack(e)ββ
queue: function queue(t, n)ββ
ready: function ready(e)ββ
remove: function remove(e)ββ
removeAttr: function removeAttr(e)ββ
removeClass: function removeClass(t)ββ
removeData: function removeData(e)ββ
removeProp: function removeProp(e)ββ
replaceAll: function e(e)ββ
replaceWith: function replaceWith()ββ
resize: function n(e, t)ββ
scroll: function n(e, t)ββ
scrollLeft: function t(e)ββ
scrollTop: function t(e)ββ
scrollspy: function _jQueryInterface(e)ββ
select: function n(e, t)ββ
serialize: function serialize()ββ
serializeArray: function serializeArray()ββ
show: function r(e, t, n)ββ
siblings: function r(e, t)ββ
slice: function slice()ββ
slideDown: function e(e, t, n)ββ
slideToggle: function e(e, t, n)ββ
slideUp: function e(e, t, n)ββ
sort: function sort()
ββ
splice: function splice()
ββ
stop: function stop(i, e, o)ββ
submit: function n(e, t)ββ
tab: function _jQueryInterface(e)ββ
text: function text(e)ββ
toArray: function toArray()ββ
toast: function _jQueryInterface(e)ββ
toggle: function r(e, t, n)ββ
toggleClass: function toggleClass(i, t)ββ
tooltip: function _jQueryInterface(e)ββ
trigger: function trigger(e, t)ββ
triggerHandler: function triggerHandler(e, t)ββ
unbind: function unbind(e, t)ββ
undelegate: function undelegate(e, t, n)ββ
unwrap: function unwrap(e)ββ
val: function val(n)ββ
width: function o(e, t)ββ
wrap: function wrap(t)ββ
wrapAll: function wrapAll(e)ββ
wrapInner: function wrapInner(n)ββ
Symbol(Symbol.iterator): function values()
ββ
<prototype>: Object { β¦ } |
| Markdown | [DataTables Advanced interaction features for your tables.](https://datatables.net/)
[Editor Comprehensive editing library for DataTables.](https://editor.datatables.net/)
[Manual](https://datatables.net/manual)
[Download](https://datatables.net/download)
- [Examples](https://datatables.net/examples/index)
- [Manual](https://datatables.net/manual/index)
- [Reference](https://datatables.net/reference/index)
- [Extensions](https://datatables.net/extensions/index)
- [Plug-ins](https://datatables.net/plug-ins/index)
- [Blog](https://datatables.net/blog/index)
- [Forums](https://datatables.net/forums/index)
- [Discussions](https://datatables.net/forums/discussions)
- [Sign In](https://datatables.net/forums/entry/signin)
- [Support](https://datatables.net/support/index)
- [FAQs](https://datatables.net/faqs/index)
- [Download](https://datatables.net/download/index)
- [Purchase](https://datatables.net/purchase/index)
[β‘ *Show site navigation*]()
# How to populate a table using a JSON data variable.
# How to populate a table using a JSON data variable.
[](https://datatables.net/forums/profile/snithfferx "snithfferx")[snithfferx](https://datatables.net/forums/profile/snithfferx) Posts: 7Questions: 1Answers: 0
[February 2023](https://datatables.net/forums/discussion/75438/how-to-populate-a-table-using-a-json-data-variable)
in [Free community support](https://datatables.net/forums/categories/free-community-support)
**Link to test case**:
**Debugger code (debug.datatables.net)**:
**Error messages shown**:
**Description of problem**:
Tengo el siguiente problema.
Desde una vista en el navegador llamo mediante AJAX una consulta en el servidor, esta la recibo en formato JSON, para llenar una tabla, la tabla se ha inicializado usando \$("\#selector).DataTable({options}); pero cuando llega el momento de presentar la respuesta, me dice que no encuentra la funciΓ³n "clear()" y si elimino esta lΓnea, me dice que no encuentra "rows.add()".
No puedo usar la opciΓ³n o mΓ©todo ajax de la API porque debo rehacer la tabla cuando se haga un cambio o una peticiΓ³n al servidor, y debo cambiar los datos a ser enviados al servidor, sΓ uso la opciΓ³n o funciΓ³n "ajax.reload()" me recargarΓa el dato anterior.
Ejemplo:
Priemra peticiΓ³n:
```
let collectionsTable = $("#collectionsList").DataTable({
ajax {
url: '/collections/lista'
}});
respuesta=> collectionsTable = {datos}
Segunda peticiΓ³n:
collectionsTable = $("#collectionsList").DataTable({
ajax {
url: '/collections/lista?page12'
}});
```
respuesta=\>collectionsTable = {datos de la primera peticiΓ³n}
- Si realizara esto con una variable tambiΓ©n resulta de la misma forma; es decir la variable puede cambiar, pero DataTables trae la informaciΓ³n antigua; porque para la API la variable no ha cambiado.
Y es por eso que no uso la opciΓ³n o mΓ©todo "ajax" de la API.
He intentado de varias formas realizar la limpieza de la tabla y luego rellenarla de datos usando "clear", "add" y "draw", pero no encuentra las funciones.
Por cierto, segΓΊn la documentaciΓ³n, cuando se inicializa una tabla usando "DataTable" debe devolver una instancia de la API, pero sΓ se usa "dataTable" debe devolver un objeto, hay alguna diferencia entre esto, porque sΓ uso uno u otro siempre devuelve el mismo objeto.
Uso la versiΓ³n "1.13.1" del CDN : <https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js>
```
Object { length: 0, prevObject: {β¦} }
β
length: 0
β
prevObject: Object { length: 0, prevObject: {} }
β
<prototype>: Object { jquery: "3.6.0", constructor: S(e, t)
, length: 0, β¦ }
ββ
DataTable: function DataTable(t)ββ
add: function add(e, t)ββ
addBack: function addBack(e)ββ
addClass: function addClass(t)ββ
after: function after()ββ
ajaxComplete: function t(e)ββ
ajaxError: function t(e)ββ
ajaxSend: function t(e)ββ
ajaxStart: function t(e)ββ
ajaxStop: function t(e)ββ
ajaxSuccess: function t(e)ββ
alert: function _jQueryInterface(e)ββ
animate: function animate(t, e, n, r)ββ
append: function append()ββ
appendTo: function e(e)ββ
attr: function attr(e, t)ββ
before: function before()ββ
bind: function bind(e, t, n)ββ
blur: function n(e, t)ββ
button: function _jQueryInterface(e, n)ββ
carousel: function _jQueryInterface(e)ββ
change: function n(e, t)ββ
children: function r(e, t)ββ
clearQueue: function clearQueue(e)ββ
click: function n(e, t)ββ
clone: function clone(e, t)ββ
closest: function closest(e, t)ββ
collapse: function _jQueryInterface(e)ββ
constructor: function S(e, t)ββ
contents: function r(e, t)ββ
contextmenu: function n(e, t)ββ
css: function css(e, t)ββ
data: function data(n, e)ββ
dataTable: function C(t, v)ββ
dataTableExt: Object { buttons: {β¦}, builder: "-source-", errMode: "alert", β¦ }
ββ
dataTableSettings: Array [ {β¦} ]
ββ
dblclick: function n(e, t)ββ
delay: function delay(r, e)ββ
delegate: function delegate(e, t, n, r)ββ
dequeue: function dequeue(e)ββ
detach: function detach(e)ββ
dropdown: function _jQueryInterface(e)ββ
each: function each(e)ββ
empty: function empty()ββ
emulateTransitionEnd: function emulateTransitionEnd(t)ββ
end: function end()ββ
eq: function eq(e)ββ
even: function even()ββ
extend: function extend()ββ
fadeIn: function e(e, t, n)ββ
fadeOut: function e(e, t, n)ββ
fadeTo: function fadeTo(e, t, n, r)ββ
fadeToggle: function e(e, t, n)ββ
filter: function filter(e)ββ
find: function find(e)ββ
finish: function finish(a)ββ
first: function first()ββ
focus: function n(e, t)ββ
focusin: function n(e, t)ββ
focusout: function n(e, t)ββ
get: function get(e)ββ
has: function has(e)ββ
hasClass: function hasClass(e)ββ
height: function o(e, t)ββ
hide: function r(e, t, n)ββ
hover: function hover(e, t)ββ
html: function html(e)ββ
index: function index(e)ββ
init: function init(e, t, n)ββ
innerHeight: function o(e, t)ββ
innerWidth: function o(e, t)ββ
insertAfter: function e(e)ββ
insertBefore: function e(e)ββ
is: function is(e)
ββ
jquery: "3.6.0"
ββ
keydown: function n(e, t)ββ
keypress: function n(e, t)ββ
keyup: function n(e, t)ββ
last: function last()
ββ
length: 0
ββ
load: function load(e, t, n)ββ
map: function map(n)ββ
modal: function _jQueryInterface(e, n)ββ
mousedown: function n(e, t)ββ
mouseenter: function n(e, t)ββ
mouseleave: function n(e, t)ββ
mousemove: function n(e, t)ββ
mouseout: function n(e, t)ββ
mouseover: function n(e, t)ββ
mouseup: function n(e, t)ββ
next: function r(e, t)ββ
nextAll: function r(e, t)ββ
nextUntil: function r(e, t)ββ
not: function not(e)ββ
odd: function odd()ββ
off: function off(e, t, n)ββ
offset: function offset(t)ββ
offsetParent: function offsetParent()ββ
on: function on(e, t, n, r)ββ
one: function one(e, t, n, r)ββ
outerHeight: function o(e, t)ββ
outerWidth: function o(e, t)ββ
parent: function r(e, t)ββ
parents: function r(e, t)ββ
parentsUntil: function r(e, t)ββ
popover: function _jQueryInterface(t)ββ
position: function position()ββ
prepend: function prepend()ββ
prependTo: function e(e)ββ
prev: function r(e, t)ββ
prevAll: function r(e, t)ββ
prevUntil: function r(e, t)ββ
promise: function promise(e, t)ββ
prop: function prop(e, t)ββ
push: function push()
ββ
pushStack: function pushStack(e)ββ
queue: function queue(t, n)ββ
ready: function ready(e)ββ
remove: function remove(e)ββ
removeAttr: function removeAttr(e)ββ
removeClass: function removeClass(t)ββ
removeData: function removeData(e)ββ
removeProp: function removeProp(e)ββ
replaceAll: function e(e)ββ
replaceWith: function replaceWith()ββ
resize: function n(e, t)ββ
scroll: function n(e, t)ββ
scrollLeft: function t(e)ββ
scrollTop: function t(e)ββ
scrollspy: function _jQueryInterface(e)ββ
select: function n(e, t)ββ
serialize: function serialize()ββ
serializeArray: function serializeArray()ββ
show: function r(e, t, n)ββ
siblings: function r(e, t)ββ
slice: function slice()ββ
slideDown: function e(e, t, n)ββ
slideToggle: function e(e, t, n)ββ
slideUp: function e(e, t, n)ββ
sort: function sort()
ββ
splice: function splice()
ββ
stop: function stop(i, e, o)ββ
submit: function n(e, t)ββ
tab: function _jQueryInterface(e)ββ
text: function text(e)ββ
toArray: function toArray()ββ
toast: function _jQueryInterface(e)ββ
toggle: function r(e, t, n)ββ
toggleClass: function toggleClass(i, t)ββ
tooltip: function _jQueryInterface(e)ββ
trigger: function trigger(e, t)ββ
triggerHandler: function triggerHandler(e, t)ββ
unbind: function unbind(e, t)ββ
undelegate: function undelegate(e, t, n)ββ
unwrap: function unwrap(e)ββ
val: function val(n)ββ
width: function o(e, t)ββ
wrap: function wrap(t)ββ
wrapAll: function wrapAll(e)ββ
wrapInner: function wrapInner(n)ββ
Symbol(Symbol.iterator): function values()
ββ
<prototype>: Object { β¦ }
```
[collections.txt](https://datatables.net/forums/uploads/editor/zv/hi1uamxtn8gz.txt) 3\.7K
This question has an accepted answers - [jump to answer](https://datatables.net/forums/discussion/75438/how-to-populate-a-table-using-a-json-data-variable#Comment_217634)
## Answers
- [](https://datatables.net/forums/profile/kthorngren "kthorngren")[kthorngren](https://datatables.net/forums/profile/kthorngren) Posts: 22,439Questions: 26Answers: 5,161
[February 2023](https://datatables.net/forums/discussion/comment/217629/#Comment_217629)
```
//Initializing DataTables
let collectionsTable = $("#collectionsList").DataTable({
"data": collections,
"columns": columnas,
"paging": true,
"scrollY": 'auto',
"lengthMenu": lineas(10),
"searching": true,
"ordering": true,
"order": [
[2, 'asc']
],
"autoWidth": true,
"responsive": true,
"processing" : true,
"language" : {
"url":'dataTables.spanish.json'
},
"buttons": botones()
}).buttons().container().appendTo('#collectionsList_wrapper .col-sm-12:eq(0)');
//Requesting data
$.ajax({
url: '/collections/lista',
type: 'POST',
success: function(r) {
console.log(collectionsTable);
result = JSON.parse(r);
collections = result.collections;
hasPages(result.pagination);
//collectionsTable.clear();
collectionsTable.rows.add(collections).draw();
if (result.error != undefined) {
alertaPopUp(result.error);
}
}
});
```
I believe the problem is that [`language.url`](https://datatables.net/reference/option/language.url) is an asynchronous call like ajax. That is if you are having problems with the initial load and getting the not a function error.
```
/*function getNewPage (last,cursor,limit) {
$.ajax({
url: '/collections/lista',
type: 'POST',
data: {
page:last,cursor:cursor,limit:limit
},
beforeSend:function () {
$("#spinger").show();
},
success: function(r) {
result = JSON.parse(r);
collections = result.collections;
hasPages(result.pagination);
console.log(collectionsTable);
},
complete: function () {
collectionsTable.clear();
collectionsTable.rows.add(collections).draw();
$("#spinger").hide();
}
});
```
The `collectionsTable` is out of context for the function getNewPage. `collectionsTable` is within the document.ready() function and the getNewPage is outside of this.
There are two options. The first is to use [`ajax`](https://datatables.net/reference/option/ajax) and use [`ajax.data`](https://datatables.net/reference/option/ajax.data) as a function to send the parameters:
```
data: {
page:last,cursor:cursor,limit:limit
},
```
Similar to this [example](https://datatables.net/examples/server_side/custom_vars.html). Then use [`ajax.reload()`](https://datatables.net/reference/api/ajax.reload\(\)) to fetch the data using the parameters.
Or if the table structure changes then use [`destroy()`](https://datatables.net/reference/api/destroy\(\)) in the getNewPage before the ajax request and reinitialize the datatable in the `success` function.
Kevin
- [](https://datatables.net/forums/profile/kthorngren "kthorngren")[kthorngren](https://datatables.net/forums/profile/kthorngren) Posts: 22,439Questions: 26Answers: 5,161
[February 2023](https://datatables.net/forums/discussion/comment/217630/#Comment_217630)
Or if the problem is just with the `getNewPage` function you can try getting an instance of the API in the function like this:
```
function getNewPage (last,cursor,limit) {
let collectionsTable = $("#collectionsList").DataTable();
$.ajax({
url: '/collections/lista',
....
```
Kevin
- [](https://datatables.net/forums/profile/snithfferx "snithfferx")[snithfferx](https://datatables.net/forums/profile/snithfferx) Posts: 7Questions: 1Answers: 0
[February 2023](https://datatables.net/forums/discussion/comment/217633/#Comment_217633)
I understand what you thiink that the problem, but no.
I have erased the "language" option, but popup the same error message. I attached a screenshot of the error.

I have tried initialize the datatable variable out of the "\$(document).ready(function() {}" function in order to use the getNewPage() function, but, when a did that the same error jumps out. And if you can see, the "getNewPage()" function is not in use, because "reload" is not working.

The only way this script works is when a put the initialization inside my \$.ajax() request.
As you can see here:

But, here come the question, How I repopulate when I get new data? If I fill the variable "collections" and then use "collectionsTable.ajax.reload" as documentation says, is not working properly. because, "reload()" is not a function of "collectionsTable" object, for any reason.
Also, I have to address that "clear", "rows", "add", and "draw" are not functions of "collectionsTable" object. In other forums I read that is because "dataTable" is not the same as "DataTable" when you use the first ("dataTable") supposly return an object and the second one (DataTable) return an Instance of the API, but for me in both return the same object with the same properties.
- [](https://datatables.net/forums/profile/kthorngren "kthorngren")[kthorngren](https://datatables.net/forums/profile/kthorngren) Posts: 22,439Questions: 26Answers: 5,161
[February 2023](https://datatables.net/forums/discussion/comment/217634/#Comment_217634)
Answer β
I created a test case for you and found the problem.
<https://live.datatables.net/volorena/1/edit>
You are chaining `.buttons().container().appendTo('#collectionsList_wrapper .col-sm-12:eq(0)');` to the Datatables initialization. The [jQuery appendTo()](https://api.jquery.com/appendto/) method returns a jQuery object. `collectionsTable` is assigned this jQuery object instead of the Datatables API. I removed the chaining and now the `Uncaught TypeError: Cannot read properties of undefined (reading 'add')` does not appear.
Kevin
- [](https://datatables.net/forums/profile/snithfferx "snithfferx")[snithfferx](https://datatables.net/forums/profile/snithfferx) Posts: 7Questions: 1Answers: 0
[February 2023](https://datatables.net/forums/discussion/comment/217636/#Comment_217636)
**Nice..\!**
Works perfectly.
I correct my code and now show the data as is supposs to do.
**Thanks so much.** 
This discussion has been closed.
[Sign In](https://datatables.net/forums/entry/signin?Target=discussion%2F75438%2Fhow-to-populate-a-table-using-a-json-data-variable) Β· [Register](https://datatables.net/forums/entry/register?Target=discussion%2F75438%2Fhow-to-populate-a-table-using-a-json-data-variable)
#### Howdy, Stranger\!
It looks like you're new here. If you want to get involved, click one of these buttons\!
[Sign In](https://datatables.net/forums/entry/signin?Target=discussion%2F75438%2Fhow-to-populate-a-table-using-a-json-data-variable) [Register](https://datatables.net/forums/entry/register?Target=discussion%2F75438%2Fhow-to-populate-a-table-using-a-json-data-variable)
## Quick Links
- [Categories](https://datatables.net/forums/categories)
- [Recent Discussions](https://datatables.net/forums/discussions)
- [Unanswered](https://datatables.net/forums/discussions/unanswered)
#### Categories
- [75\.6K All Categories](https://datatables.net/forums/categories)
- [58 Priority support](https://datatables.net/forums/categories/priority-support)
- [25\.1K Free community support](https://datatables.net/forums/categories/free-community-support)
- [1K General](https://datatables.net/forums/categories/general)
- [15 Announcements](https://datatables.net/forums/categories/announcements)
- [2\.6K DataTables](https://datatables.net/forums/categories/datatables)
- [165 DataTables 2](https://datatables.net/forums/categories/datatables-2)
- [1\.3K DataTables 1.10](https://datatables.net/forums/categories/datatables-1-10)
- [94 DataTables 1.9](https://datatables.net/forums/categories/datatables-1-9)
- [35 DataTables 1.8](https://datatables.net/forums/categories/datatables-1.8)
- [9 CloudTables](https://datatables.net/forums/categories/cloudtables)
- [2\.3K Editor](https://datatables.net/forums/categories/editor)
- [2\.9K Extensions](https://datatables.net/forums/categories/extensions)
- [22 AutoFill](https://datatables.net/forums/categories/autofill)
- [317 Buttons](https://datatables.net/forums/categories/buttons)
- [36 ColReorder](https://datatables.net/forums/categories/colreorder)
- [23 ColumnControl](https://datatables.net/forums/categories/columncontrol)
- [38 DateTime](https://datatables.net/forums/categories/datetime)
- [70 FixedColumns](https://datatables.net/forums/categories/fixedcolumns)
- [51 FixedHeader](https://datatables.net/forums/categories/fixedheader)
- [33 KeyTable](https://datatables.net/forums/categories/keytable)
- [106 Responsive](https://datatables.net/forums/categories/responsive)
- [24 RowReorder](https://datatables.net/forums/categories/rowreorder)
- [43 Scroller](https://datatables.net/forums/categories/scroller)
- [173 SearchBuilder](https://datatables.net/forums/categories/searchbuilder)
- [202 SearchPanes](https://datatables.net/forums/categories/searchpanes)
- [109 Select](https://datatables.net/forums/categories/select)
- [29 StateRestore](https://datatables.net/forums/categories/staterestore)
- [227 Bug reports](https://datatables.net/forums/categories/bug-reports)
- [68 Feature requests](https://datatables.net/forums/categories/feature-requests)
- [102 Plug-ins](https://datatables.net/forums/categories/plug-ins)
- [11 Blog](https://datatables.net/forums/categories/blog)
- [74 Web-site](https://datatables.net/forums/categories/web-site)
#### DataTables
DataTables designed and created by [SpryMedia Ltd](https://sprymedia.co.uk/).
Β© 2007-2025 [MIT licensed](https://datatables.net/license/mit). [Privacy policy](https://datatables.net/privacy). [Supporters](https://datatables.net/supporters).
SpryMedia Ltd is registered in Scotland, company no. SC456502. |
| Readable Markdown | **Link to test case**:
**Debugger code (debug.datatables.net)**:
**Error messages shown**:
**Description of problem**:
Tengo el siguiente problema.
Desde una vista en el navegador llamo mediante AJAX una consulta en el servidor, esta la recibo en formato JSON, para llenar una tabla, la tabla se ha inicializado usando \$("\#selector).DataTable({options}); pero cuando llega el momento de presentar la respuesta, me dice que no encuentra la funciΓ³n "clear()" y si elimino esta lΓnea, me dice que no encuentra "rows.add()".
No puedo usar la opciΓ³n o mΓ©todo ajax de la API porque debo rehacer la tabla cuando se haga un cambio o una peticiΓ³n al servidor, y debo cambiar los datos a ser enviados al servidor, sΓ uso la opciΓ³n o funciΓ³n "ajax.reload()" me recargarΓa el dato anterior.
Ejemplo:
Priemra peticiΓ³n:
```
let collectionsTable = $("#collectionsList").DataTable({
ajax {
url: '/collections/lista'
}});
respuesta=> collectionsTable = {datos}
Segunda peticiΓ³n:
collectionsTable = $("#collectionsList").DataTable({
ajax {
url: '/collections/lista?page12'
}});
```
respuesta=\>collectionsTable = {datos de la primera peticiΓ³n}
- Si realizara esto con una variable tambiΓ©n resulta de la misma forma; es decir la variable puede cambiar, pero DataTables trae la informaciΓ³n antigua; porque para la API la variable no ha cambiado.
Y es por eso que no uso la opciΓ³n o mΓ©todo "ajax" de la API.
He intentado de varias formas realizar la limpieza de la tabla y luego rellenarla de datos usando "clear", "add" y "draw", pero no encuentra las funciones.
Por cierto, segΓΊn la documentaciΓ³n, cuando se inicializa una tabla usando "DataTable" debe devolver una instancia de la API, pero sΓ se usa "dataTable" debe devolver un objeto, hay alguna diferencia entre esto, porque sΓ uso uno u otro siempre devuelve el mismo objeto.
Uso la versiΓ³n "1.13.1" del CDN : <https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js>
```
Object { length: 0, prevObject: {β¦} }
β
length: 0
β
prevObject: Object { length: 0, prevObject: {} }
β
<prototype>: Object { jquery: "3.6.0", constructor: S(e, t)
, length: 0, β¦ }
ββ
DataTable: function DataTable(t)ββ
add: function add(e, t)ββ
addBack: function addBack(e)ββ
addClass: function addClass(t)ββ
after: function after()ββ
ajaxComplete: function t(e)ββ
ajaxError: function t(e)ββ
ajaxSend: function t(e)ββ
ajaxStart: function t(e)ββ
ajaxStop: function t(e)ββ
ajaxSuccess: function t(e)ββ
alert: function _jQueryInterface(e)ββ
animate: function animate(t, e, n, r)ββ
append: function append()ββ
appendTo: function e(e)ββ
attr: function attr(e, t)ββ
before: function before()ββ
bind: function bind(e, t, n)ββ
blur: function n(e, t)ββ
button: function _jQueryInterface(e, n)ββ
carousel: function _jQueryInterface(e)ββ
change: function n(e, t)ββ
children: function r(e, t)ββ
clearQueue: function clearQueue(e)ββ
click: function n(e, t)ββ
clone: function clone(e, t)ββ
closest: function closest(e, t)ββ
collapse: function _jQueryInterface(e)ββ
constructor: function S(e, t)ββ
contents: function r(e, t)ββ
contextmenu: function n(e, t)ββ
css: function css(e, t)ββ
data: function data(n, e)ββ
dataTable: function C(t, v)ββ
dataTableExt: Object { buttons: {β¦}, builder: "-source-", errMode: "alert", β¦ }
ββ
dataTableSettings: Array [ {β¦} ]
ββ
dblclick: function n(e, t)ββ
delay: function delay(r, e)ββ
delegate: function delegate(e, t, n, r)ββ
dequeue: function dequeue(e)ββ
detach: function detach(e)ββ
dropdown: function _jQueryInterface(e)ββ
each: function each(e)ββ
empty: function empty()ββ
emulateTransitionEnd: function emulateTransitionEnd(t)ββ
end: function end()ββ
eq: function eq(e)ββ
even: function even()ββ
extend: function extend()ββ
fadeIn: function e(e, t, n)ββ
fadeOut: function e(e, t, n)ββ
fadeTo: function fadeTo(e, t, n, r)ββ
fadeToggle: function e(e, t, n)ββ
filter: function filter(e)ββ
find: function find(e)ββ
finish: function finish(a)ββ
first: function first()ββ
focus: function n(e, t)ββ
focusin: function n(e, t)ββ
focusout: function n(e, t)ββ
get: function get(e)ββ
has: function has(e)ββ
hasClass: function hasClass(e)ββ
height: function o(e, t)ββ
hide: function r(e, t, n)ββ
hover: function hover(e, t)ββ
html: function html(e)ββ
index: function index(e)ββ
init: function init(e, t, n)ββ
innerHeight: function o(e, t)ββ
innerWidth: function o(e, t)ββ
insertAfter: function e(e)ββ
insertBefore: function e(e)ββ
is: function is(e)
ββ
jquery: "3.6.0"
ββ
keydown: function n(e, t)ββ
keypress: function n(e, t)ββ
keyup: function n(e, t)ββ
last: function last()
ββ
length: 0
ββ
load: function load(e, t, n)ββ
map: function map(n)ββ
modal: function _jQueryInterface(e, n)ββ
mousedown: function n(e, t)ββ
mouseenter: function n(e, t)ββ
mouseleave: function n(e, t)ββ
mousemove: function n(e, t)ββ
mouseout: function n(e, t)ββ
mouseover: function n(e, t)ββ
mouseup: function n(e, t)ββ
next: function r(e, t)ββ
nextAll: function r(e, t)ββ
nextUntil: function r(e, t)ββ
not: function not(e)ββ
odd: function odd()ββ
off: function off(e, t, n)ββ
offset: function offset(t)ββ
offsetParent: function offsetParent()ββ
on: function on(e, t, n, r)ββ
one: function one(e, t, n, r)ββ
outerHeight: function o(e, t)ββ
outerWidth: function o(e, t)ββ
parent: function r(e, t)ββ
parents: function r(e, t)ββ
parentsUntil: function r(e, t)ββ
popover: function _jQueryInterface(t)ββ
position: function position()ββ
prepend: function prepend()ββ
prependTo: function e(e)ββ
prev: function r(e, t)ββ
prevAll: function r(e, t)ββ
prevUntil: function r(e, t)ββ
promise: function promise(e, t)ββ
prop: function prop(e, t)ββ
push: function push()
ββ
pushStack: function pushStack(e)ββ
queue: function queue(t, n)ββ
ready: function ready(e)ββ
remove: function remove(e)ββ
removeAttr: function removeAttr(e)ββ
removeClass: function removeClass(t)ββ
removeData: function removeData(e)ββ
removeProp: function removeProp(e)ββ
replaceAll: function e(e)ββ
replaceWith: function replaceWith()ββ
resize: function n(e, t)ββ
scroll: function n(e, t)ββ
scrollLeft: function t(e)ββ
scrollTop: function t(e)ββ
scrollspy: function _jQueryInterface(e)ββ
select: function n(e, t)ββ
serialize: function serialize()ββ
serializeArray: function serializeArray()ββ
show: function r(e, t, n)ββ
siblings: function r(e, t)ββ
slice: function slice()ββ
slideDown: function e(e, t, n)ββ
slideToggle: function e(e, t, n)ββ
slideUp: function e(e, t, n)ββ
sort: function sort()
ββ
splice: function splice()
ββ
stop: function stop(i, e, o)ββ
submit: function n(e, t)ββ
tab: function _jQueryInterface(e)ββ
text: function text(e)ββ
toArray: function toArray()ββ
toast: function _jQueryInterface(e)ββ
toggle: function r(e, t, n)ββ
toggleClass: function toggleClass(i, t)ββ
tooltip: function _jQueryInterface(e)ββ
trigger: function trigger(e, t)ββ
triggerHandler: function triggerHandler(e, t)ββ
unbind: function unbind(e, t)ββ
undelegate: function undelegate(e, t, n)ββ
unwrap: function unwrap(e)ββ
val: function val(n)ββ
width: function o(e, t)ββ
wrap: function wrap(t)ββ
wrapAll: function wrapAll(e)ββ
wrapInner: function wrapInner(n)ββ
Symbol(Symbol.iterator): function values()
ββ
<prototype>: Object { β¦ }
``` |
| Shard | 148 (laksa) |
| Root Hash | 5636698153257577348 |
| Unparsed URL | net,datatables!/forums/discussion/75438/how-to-populate-a-table-using-a-json-data-variable s443 |