Save state with saving index column values

[Deleted User]

I have the following code:

$(document).ready(function () {
  // My DataTables table
  let table = $('#myTable').DataTable({
    // ...
    'stateSave': true,
    'stateDuration': 0,
    // ...
  });

  // Populating an index column with values
  table.column(1, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
    cell.innerHTML = i + 1;
    table.cell(cell).invalidate('dom');
  });
});

My problem:
State is saved successfully - almost - when I refresh a page, the index column is repopulated again. To put it simply, if my table has 2 records and you visit the page for the first time, then the index column order will be 1, 2. If you sort this column in descending order, the order becomes 2, 1. But, when the page is refreshed, the order comes back to 1, 2. I need the index column to be saved at 2, 1.

Hopefully I was able to describe it clearly.

I guess the issue is that I populate this column whenever a page is loaded by overwriting cell.innerHTML with i + 1...

My question:
* How can I save the index column values? (maybe I can somehow create this column during initialization...)

Thanks in advance.

colin

Hi @dt_user_1619 ,

I'm not seeing that, see here. The order upon reload is the same as when saved (i.e. [2,1] remains [2,1]). Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

[Deleted User]

Hi @colin,

Thanks a lot for your help. I updated the example and it now replicates the issue that I have. Every time you reload the page, index column is not saved - it always goes 1,2,3. For example, sort by any column and refresh the page and you will see that index column is not saved.
Here is a link to my updates.

colin

Hi @dt_user_1619 ,

When you say the index column isn't saved, are you referring to its contents? I thought before you were talking about the order direction...

If so, yep, it won't be saved, stateSave doesn't save that as it's not part of the table, it's something you're adding in.

There's two ways you could go:
1. If you want to save it as it looks on each order, you could add it with stateSaveParams.
2. Put the index into the table before you initialise DataTables, that way, the number will be the original order, not after the DataTables ordering

Cheers,

Colin

[Deleted User]

Hi @colin ,

1. I tried saving it in ‘stateSaveParams’ but I was not successful. I did not really get how this works. If you can provide an example, that would be great.
2. Unfortunately, I don’t think I can do that. Data comes in random order, and then, DataTables orders it in the following way:
   order: [ [3, ‘asc’], [10, ‘desc’] ].

I would really like to see how this can be done with ‘stateSaveParams’.

Thank you!

P.S. sorry for crappy editing- writing from phone...

colin

Hi @dt_user_1619 ,

I start to do this, using

    'stateSaveParams': function(settings, data) {
      data.index = this.api().column(0, {order:'current'}).data().toArray();
    },  

but then got muddled by your code.

   this.api().column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
    cell.innerHTML = i + 1;
    table.cell(cell).invalidate('dom');
  });

It's ordering on the current search and current order. How should the numbering work? Do you want the numbering 1...x on first load and that numbering to always stick to each row regardless of the order and search, or do you just want that first column to show 1...x rigidly, with 1 always at the top.

Cheers,

Colin

[Deleted User]

Hi Colin,

So my goal is for the numbers to never change. Or I should say, they have to be tied to the order somehow...I have the order array in my previous comment. I am not even sure if this is possible.
Basically, if I have 50 records in the table, they will be numbered 1-50. Once I refresh the page, I don’t want them to be changed again from 1-50.
Sorry if I’m not clear.

To make it simple I’d obviously prefer to assign index when initializing the DataTables. I tried it with ‘row.meta’ through ‘render’ but the data comes in random order so it does not work.
I need to somehow get rows’ indexes after order has been applied.

colin

Ah, you don't even need -opion stateSaveParams, you can do it just by getting the original order and applying the count - see here: http://live.datatables.net/jugulitu/5/edit

Hopefully that'll do the trick,

Cheers,

Colin

kthorngren

That was a fun exercise. Learned a bit about statesave

I think the best way is to save the indexes is in the DB along with the row data. Using statesave is going to be problematic as it would take more than simply saving just the indexes to guarantee the indexes are applied to the correct row. I built an example to illustrate this:
http://live.datatables.net/vudikora/1/edit

The example works for the most part depending on which column is sorted. Start by sorting the Name column then click Run with JS. Do this a couple times and it looks like the indexes are placed in the proper rows. You can do the same with position. These have unique data so the will always be in the same order.

Now sort the Office column. Note the order of the table and the indexes. Click Run with JS. Note the table is likely not in the same order. Tiger Nixon, since it is initially loaded first in the table will now be the first Edinburgh row. The index may not follow as the table order is different than when saved.

This demonstrates how statesave can be used to save table data. You could enhance it by saving the indexes along with the corresponding data from a unique data column. Something that looks like this from the example:

{
  "Tiger Nixon": 1,
  "Garrett Winters": 2,
  "Ashton Cox": 3
}

Then in the initComplete code that loads the indexes from the saved data just loop through the rows and get the index from the above object. I'll leave it to you to work this part out.

Also note that I used api.cell(cell).data( i + 1 ); instead of cell.innerHTML = i + 1;. It seemed to work better to get the data in the stateSaveParams function.

Kevin

[Deleted User]

Hi @colin ,

Sorry, I forgot to include this important detail when asking the question...My DataTables initializer also includes ‘order’ option.
Here I updated your most recent example. You will see that the order is 3-2-1, but I need it to be 1-2-3.
Hopefully this will further clarify my issue.

P.S. please note the order applied to the table.

colin

Hi @dt_user_1619 ,

I'd say go with Kevin's approach, it looks that should do the trick for you,

Cheers,

Colin

[Deleted User]

I will test Kevin’s approach and update you.
Thank you.