Post initialise access to multiple datatables on one page
Post initialise access to multiple datatables on one page
vrooze
Posts: 3Questions: 0Answers: 0
Hi there,
Myself and a fellow developer are having a major headache with this one.
We have (currently) 4 datatables on a single page and two of which we have a checkbox to allow the user to select all of the currently filtered results.
We do this via:
[code]
var oTable = $('.downdatatable').dataTable();
$('input', oTable.$('tr', {"filter": "applied"} )).prop('checked',chk);
[/code]
However that bit of code is run via a click event on the checkbox and it works, to an extent.
When we reinitialise the datatable (oTable) it duplicates the filters.
This seems to be be because the .downdatatable class we reinitialise is wrapped by a datatable header if re-sets up the table inside of the previous wrapper and we end up with a datatable inside of another datatable wrapper,
If we keep clicking the checkbox the datatable keeps getting smaller and smaller.
We have followed another post that mentions setting up a global array $.fn.dataTableInstances[] and putting the datatable in there.
That also works fine but only for the last table to be initialised.
Allan mentioned the $.fn.dataTableSettings keys need to be the same as the keys in dataTableInstances. However this only ever contains one element which is the last tables settings.
We can load all the datatables via the array but cannot run any functions against it as we get the error:
[code]
TypeError: oSettings is null
var aoData = oSettings.aoData;
jquery....js (line 4979)
[/code]
Myself and a fellow developer are having a major headache with this one.
We have (currently) 4 datatables on a single page and two of which we have a checkbox to allow the user to select all of the currently filtered results.
We do this via:
[code]
var oTable = $('.downdatatable').dataTable();
$('input', oTable.$('tr', {"filter": "applied"} )).prop('checked',chk);
[/code]
However that bit of code is run via a click event on the checkbox and it works, to an extent.
When we reinitialise the datatable (oTable) it duplicates the filters.
This seems to be be because the .downdatatable class we reinitialise is wrapped by a datatable header if re-sets up the table inside of the previous wrapper and we end up with a datatable inside of another datatable wrapper,
If we keep clicking the checkbox the datatable keeps getting smaller and smaller.
We have followed another post that mentions setting up a global array $.fn.dataTableInstances[] and putting the datatable in there.
That also works fine but only for the last table to be initialised.
Allan mentioned the $.fn.dataTableSettings keys need to be the same as the keys in dataTableInstances. However this only ever contains one element which is the last tables settings.
We can load all the datatables via the array but cannot run any functions against it as we get the error:
[code]
TypeError: oSettings is null
var aoData = oSettings.aoData;
jquery....js (line 4979)
[/code]
This discussion has been closed.
Replies
This shouldn't be possible. Can you link me to a page showing this problem please? The only way I am aware of this being able to happen is if you replace the DOM elements using innerHTML or $().html() without destroying the old table first.
Allan
We don't have our external access to out dev servers, I will get the other dev to put the rendered datatable html snippet on his public system so you can see the final markup which we try to grab hold of again.
Initialised using:
[code]$('.deldatatable').dataTable( {
"sDom": '<"top"lfript><"clear">'
}) [/code]
tried to grab hold of again using:
[code]
var oTable = $('.deldatatable').dataTable();
[/code]
http://162.13.85.195/mi_dev/datatables.html