Basic datatable behaviour : Clarification

admirer

Hi,

I am using datatable to format my data from an asp.net grid . The data (in the form of table compatible with datatable plugin) is fully rendered from server side at the time of page load.

Datatable is just used to paginate and FixedColumn plugin is used to fix the first column.

I have a lot of check boxes rendered into the datatable grid (From the ASP.NET grid).

I assume that , the checkbox states are maintained between pagination ( because the data is already loaded at page load and on pagination the data is taken from aoData)

Currently, I am facing a problem that: the checkbox states are not maintained in the fixed column(first column) when I paginate, whereas states are maintained in all other columns [2,3,4..columns].

If I require a state save in all cases, why is it saving the state of non fixed columns without any JS code and why the problem is only with fixed column checkboxes.

Please correct me.

allan

The "trick" to be aware of here is that the FixedColumns are cloned elements, not the originals (which are hidden using the column visibility options of DataTables). When the clones are updated your checked boxes nodes are deleted and then replaced when the originals (note that this is with FixedColumns, not DataTables on its own), thus the issue - the originals haven't been checked the clones were, and now they've gone...

So there are a couple of ways to cope with this - the first would be to have a 'change' event handler for the elements in the clone that when checked will update the originals, so when cloned they will be cloned in the correct state. Another option would be to use a similar event handler and use a whole row select flag, i.e. add a parameter to the TR node or a class to indicate that it is selected, and that can also be used when a clone is done to update the fixed columns. I'm sure there are probably other options as well based on the same principle.

Sorry I don't have a "add this line and it will all work" answer for you!

Allan

admirer

Excellent Alan. This post clarifies my understanding.

Thanks for this great plugin. :)

admirer

@allan I need your help.

I tried editing in oSettings.aoData[row]._aData[column] and added the checked="checked" in the element [inside my function that manipulates the data].

The problem is : Again on pagination ,even when aData value has checked="checked" present, it is not checking the item when I navigate into the page again.

Which is the root data structure that stores this data?

I want to manipulate that data structure so that I can persist the value.

I am trying to check the checkbox here and I am not selecting a row or any operation like that.

allan

> I tried editing in oSettings.aoData[row]._aData[column] and added the checked="checked" in the element [inside my function that manipulates the data].

_aData hold string values - not DOM elements - so adding an attribute to the string wouldn't help, since it isn't a DOM element :-). I'd suggest in general that you don't directly work with _aData - use fnGetData or the underscore function if you want to use the data from the table - otherwise you might change things without letting DataTables know about it.

> I want to manipulate that data structure so that I can persist the value.

You want to alter the DOM node :-). Just do it the same way you would do with any other DOM checkbox: node.checked = true;

Allan

admirer

Thanks a lot Allan.
I finally cracked it. Updated the html for checkbox and persisted using the fnUpdate Method :)

vere

Can we see your code admirer?