gyrocode / jquery-datatables-checkboxes

Checkboxes is an extension for the jQuery DataTables library that provides universal solution for working with checkboxes in a table.
https://www.gyrocode.com/projects/jquery-datatables-checkboxes/
MIT License
150 stars 61 forks source link

Issue with saving state #107

Closed lenamtl closed 4 years ago

lenamtl commented 4 years ago

Hi,

I'm using the latest version of jquery-datatables-checkboxes The state is not saving at all I'm using stateSaveCallback & stateLoadCallback and all Datatables plugins state are saved ok till now. (for example i'm also saving these: colreorder and yadcf) Note I'm saving the table state each time it changed and load it on page load.

So I'm trying to debug to find out where is the problem is.

My table use PHP (I'm NOT using Server Side Processing) So HTML document (DOM) source using PHP / MySQL query to fill the table on page load.

I think the script required a rowId to save the row value into the table state.

My Table TR have an ID auto generated using $i++ so it's look like this <tr id="<?=$i; ?>"> I'm wondering how I could use it with the rowId option... Q: So is this possible to set rowId to use my TR ID and how ?

What I have tried till not is to echo the $i value into the TD but the state for checkboxes are still not saved at all <td class="no-sort"><?php echo $i ?></td>

So could some one tell me what does it required to make this work... Thanks

mpryvkin commented 4 years ago

In order to have checkboxes state saved, column containing checkboxes must have unique values. If your data is HTML-based, that means that column containing checkbox must be something like <td><?php echo $i ?></td>.

Please see this example for code and demonstration.

Also there is State saving page demonstrating other related options.

lenamtl commented 4 years ago

Hi,

I see these examples before opening this issue. For now I'm not able to reproduce on JSFiddle so this could be something on my setup as I'm using several Datatables extensions (Select, ColReorder, Yadcf)

If I'm using <td><?php echo $i ?></td> it is not saving the changes. What I mean by that it the changes is detected (I can see when selecting a checkbox it changing the time of the localstorage) but it is not saving the checkbox values.

Can this be related to this ? https://datatables.net/reference/option/colReorder.fixedColumnsRight "colReorder": true, "colReorder": { fixedColumnsLeft: 1 },

So I'd like to try to use rowId: 'extn' someone fix the problem using it so I just want to check if this could fix my issue https://github.com/gyrocode/jquery-datatables-checkboxes/issues/78#issuecomment-423955202

So how can I set / use rowId: 'extn' using HTML, note I'm not using JSON...

Thanks

lenamtl commented 4 years ago

Hi,

I'm still trying to find out why the state are not getting saved This part is not getting saved at all even empty checkboxes: [{1: 1, 2: 1, 3: 1}]

When I click on the checkbox this get updated : time: 1576171513183

Is there a way I can debug to investigate?

mpryvkin commented 4 years ago

You can try handling stateLoaded and stateSaveParams events and inspect checkboxes property, see this example.

lenamtl commented 4 years ago

Hi,

In console.log on page load, there is no checkbox selected using stateSaveCallback or stateSaveParams

the result for the checkbox state is

checkboxes: (2) [empty, {…}]
checkboxes: Array(2)
1: {}
length: 2
__proto__: Array(0)

I guess the problem come from this [empty, {…}] instead of displayed this [{…}] I'm sending the table state like this "tablestate": JSON.stringify(data) because I'm saving the state into DB and the checkbox state only / values are not saved at all.

I'm using Datatables 1.10.11 (cannot update to latest for now)

lenamtl commented 4 years ago

Can we reopen this as it seems there is a problem with stateSaveCallback

also empty resut should be [ {…}] not [empty, {…}]

mpryvkin commented 4 years ago

I can't replicate the issue. Are you able to provide an example that demonstrates it?

lenamtl commented 4 years ago

Hi, Thanks for the follow up.

I'm using stateSaveCallback and stateLoadCallback

Does the state of your plugin is different from Datatables ? Do you know what can add the empty[empty, {…}] array ([]) vs object ({}) may add the empty value so I'm trying to figure out what causing this...

I'm sending the table state like this "tablestate": JSON.stringify(data)and I have no issue with saving the Datatables state & third party plugins, I only have an issue with the state of your plugins .

So that's mean something is probably different with your plugin ...

As my application is using PHP I cannot set up a JSFiddle... Let me know if you have any snippet to test or console.log so we can find out what is the problem.

lenamtl commented 4 years ago

Hi,

My example is using your code with stateSaveCallback stateLoadCallback I'm using column 1 for the checkbox in my application so this is why I think I have the issue

Here is an example https://jsfiddle.net/lenamtl/a8jurbp1/ The result in console is stateLoaded checkboxes: (2) [null, {…}]

stateSaveParams checkboxes: (2) [empty, {…}]

compare to your example (that not use stateSaveCallback stateLoadCallback) which result [{…}]

if I change the column using your example then I can reproduce the same null and empty value

Ref stateSaveCallback stateLoadCallback https://datatables.net/reference/option/stateSave

lenamtl commented 4 years ago

Hi, have you had a chance to check?

mpryvkin commented 4 years ago

@lenamtl I still can't reproduce the issue.

Here is what I am trying to do with your example:

  1. Select any combination of checkboxes.
  2. Click on the "Reload table" button.
  3. If selection is preserved, that means that plug-in successfully restored the saved state.

I tried 1-3, and it works as expected for me.

Property checkboxes is used for storing selected checkboxes, so if you have checkboxes in the second column, the format you've mentioned is absolutely normal.

mpryvkin commented 4 years ago

@lenamtl this is perfectly normal as it is internal format for storing checkbox state. If you're using column other than first, you will see null as a first array element(s).

lenamtl commented 4 years ago

Do you mean that null and empty are ok ? from

stateLoaded checkboxes: (2) [null, {…}]

stateSaveParams checkboxes: (2) [empty, {…}]

I'm pretty sure there is something wrong or different , because I can use stateLoaded and stateSaveParams with all third party Datatables scripts without problem, the problem only occurred with your script.

mpryvkin commented 4 years ago

@lenamtl yes, that's just how checkboxes plugin stores internal data. May I ask why this format is a concern? Examples posted in this thread are all seem to function as the should.

lenamtl commented 4 years ago

Hi @mpryvkin,

I have made a new jsfiddle that reproduce the problem https://jsfiddle.net/lenamtl/ujqx9Lhc/1/

It appear that the problem occurred when using checkboxes in combinaison with Yadcf Datatables plugins.

Datatables and Yadcf state are saved but not the checkboxes state..

mpryvkin commented 4 years ago

@lenamtl Thanks for the example, I see that Yadcf and Checkboxes plugin are not fully compatible when it comes to state restoring. I would need to experiment further.

lenamtl commented 4 years ago

Ok let me know if I can help to test or anything I will be happy to help :)

lenamtl commented 4 years ago

Maybe you can reopen this issue, so someone can fix it...