Selecting rows with deferRender

kieronapple

Hi,

I asked a question the other day see (https://datatables.net/forums/discussion/56534/select-row-with-createdrow#latest) and it was resolved, however I need to replicate the same functionality with loading from ajax (loading in a json data source) & using deferRender.

I'm unsure on how I can select the rows using deferRender as it only loads 10 rows at a time?

If you see the above link there is a JSbin link at the bottom of the thread, that functionality needs to be replicated but using deferRender & ajax.

The following link is my attempt to show you how it will load in the data but I'm unable to get it to work.

http://live.datatables.net/mulasufe/1/edit

colin

Hi @kieronapple ,

This is a simplistic version of your example here - it's doing it in createdRow, so only selecting when the row is being drawn for the first time. You can mix this with that previous example to hopefully get a working solution.

Cheers,

Colin

kieronapple

@colin Thanks for that, unsure how to get it working with the other example, I'm trying to use json & place a checkbox in the first column, issue is there can be multiple selected so when the table first loads it needs to get all selected & order them first but unsure if this is possible with deferRender.

kieronapple

@colin managed to figure it out, only issue i have now is when they're first loaded they load in selected order as expected but if you then select another one and sort it doesn't bring that one to the top?

kieronapple

Nevermind, see this jsbin - http://live.datatables.net/tehefiqu/11/edit

I can't seem to replicate the issue in the datatables live editor as its not recognising the json for some reason?

kthorngren

When adding Javascript data you will use the data option instead of ajax. I updated your example for this. Also your example wasn't quite right as it always selected the first row. You have:

              $.each(selectedCriteria, function(index, criteria) { //- Loop through my dataset

                if (data['id'] === criteria) {
                    api.row(index).select();
                }
              });

The index used in api.row(index).select(); is the index in the criteria array not the index of the createdRow function. Change it to row and it will work. I also moved changed the row that matches the criteria data to the second element in the test array. This shows that the table is not being sorted by the selected rows. Here is the updated example:
http://live.datatables.net/bahoyele/1/edit

I created this example for another thread to show one way of keeping selected rows sorted to the top:
http://live.datatables.net/kaburove/1/edit

I created the example for this thread. Maybe you can incorporate a similar technique for your solution.

Kevin

kieronapple

@kthorngren What I've noticed is with this method when loading in, it only shows for example "3 selected" if there are 3 on the initial page & doesn't count the others until you go to that page?

colin

Yep, that's a side effect of you using deferRender - it doesn't draw the rows until it needs them, so they're not being selected. Personally, I think that would give a confusing user experience.

kieronapple

Is there a way I could create the rows first with them selected & then render the rest of whatever needs to be drawn except for those first ones? Sorry this is confusing

colin

No, because it knows they're selectable as part of the rendering. You only really need deferRender if you're expecting a large dataset.

kieronapple

Yeah we are, we're rendering 22,000+ rows. The table needs to select criteria that a user has previously selected so they can change it later on etc, would expect the behaviour to be that the selected rows show first in the table. Unsure whats the best way to achieve this.

colin

Not sure of an easy answer, but here's some more coals being thrown in the fire.

Kevin's example above shows how selected records can be positioned at the top of the page. Another alternative along those lines is the absolute ordering plugin - you would need a column to store a value to indicate whether it's selected (same as Kevin's example), but this will work without affecting the ordering of other columns.

The table needs to select criteria that a user has previously selected so they can change it later on

This example here shows stateSave storing the selected rows when the table is reloaded. Not sure if that's what you want, but something to mull over.

C