I cant access rows which arent loaded by Scroller

AluminumCat

I'm way too confused here.
Is it possible to access/modify rows which aren't loaded by the scroller? so far, all I've managed is load all rows into the console to make sure that the API knows they exist(they do).
and for me, "table.rows('.selector').data()" still doesn't work unless I inject a real jquery object in there. But something tells me its not the right way to do it.
In any case, I have no idea what I'm doing wrong :( Someone help me out here please.

AluminumCat

Ok since there's no answer yet, I'll try to be more clear in my question:

Is it actually possible to modify/update/affect rows that havent been loaded by Scroller with deferred rendering?

Or am I going to have to use something else?

allan

Assuming you are using client-side processing (are you?) then, running a jQuery selector on rows which haven't yet been created won't return any results (since obviously jQuery can't select non-existent rows). If you need to access them using a jQuery selector, disable deferred rendering so that they do exist.

Allan

AluminumCat

I don't want to run a jquery selector... I just want to select them in any way possible, which I somehow think is possible. But I can't figure out if it's a glitch, supposed to behave that way or not.

When creating the table with Scroller enabled, it still stores an array of all the objects, isn't this true? Or is it not supposed to do that?
And I have found that by creating the code below, it is possible to manipulate that array by indexes:

var jData = uTable.rows().indexes();

jData.each(function(index){

uTable.row(index).data()['DT_RowClass'] += ' delete';

});

Doing this will actually update all the un-loaded rows with the new class upon drawing, but funnily enough it doesnt happen with the ones that have already been drawn.
But it can be fixed by modifying those with simple jQuery.

However, I am suspecting that this is a horrible misuse of Datatable and should probably just give in and use server side scripting, am I right?
Plus the code above wont be able to efficiently change just a handful of rows which is what I'm after.

I just thought it was worth sharing though.

allan

Darn - sorry, posted in wrong thread... will be right back...

allan

I don't want to run a jquery selector..

Then don't pass in a jQuery selector :-). If you pass in nothing at all, it will select all rows. At the moment, you are selecting rows which have a class of selector. If you don't need that, remove it.

but funnily enough it doesnt happen with the ones that have already been drawn.

Because there is no setter hook. DataTables doesn't know that you've change that value. You would need to invalidate the row.

What is it that you are actually trying to do?

Allan

AluminumCat

That was what I was trying to do yes :) So that enables me to successfully delete/add table rows and add/modify their classes by changing the array itself directly..

However, what makes all this complicated, is that I need to be able to select any row at all, and prepend it to the start of the table as well as add/remove classes at will .... Which seems more problematic than I'd anticipated when trying to use ajax source and deferred rendering together.

I have been trying to do this by deleting a node, then creating a new one, nearly identical with table.row.add(). trying to create it using jQuery object, for example:
table.row.add('<tr id="someId" class="someClass"><td></td></tr>').
the problem here is that the id's and classes dont get added when they get inserted inside the table(it doesnt matter whether I try to place them in the tr or td elements).

it would have been nice if there was some way to select elements in the array(table.rows().data()) by some sort of custom id.

allan

the problem here is that the id's and classes dont get added when they get inserted inside the table

You can - http://live.datatables.net/vimogov/1/edit . Just pass in either the node or the row selector. Passing a string in doesn't appear to work - I need to look at if that is intentional or not.

Allan

AluminumCat

But it doesn't work. That's exactly what I did, and if you inspect the element with Firebug or whatever, you can see that only datatables original classes and attributes got added. someClass and someID is nowhere to be found. It's as if the tr and td elements you specified got overridden or something.
And this seems to be the case in your example as well.

AluminumCat

Oh wait... I suddenly understand what you meant.. It does work if I pass it in as a node(it hadn't been passed in that way in your example so I modified it a little)

This works:
table.row.add($('<tr id="someId" class="someClass"><td>test</td></tr>')).draw();

It seems like there's a few instances where nodes work when strings don't when it comes to the API :)

AluminumCat

Huh... that's weird. On my own page, even if I pass it off as a node, it still wont add the id/classes. yet it does work in the live example.

AluminumCat

Ok it works when I turn off DeferRender :( Is this on purpose?

Edit: Oh... I just noticed we can edit posts. Sorry about the spamming :) I will use edit when I can from now on.

allan

Doh - the update to JSBin and how it saves keeps catching me out...

Where is an example with deferred rendering enabled and passing a node:
http://live.datatables.net/vimogov/3/edit

It works fine as far as I can tell.

Allan

AluminumCat

It is set to false though. Try setting it to true and see for yourself(do I have to be logged in to save changes to JSBin examples?)

Edit: ah duh. I just have to share it :)
http://live.datatables.net/vimogov/4/edit

there... classes and IDs gone..

allan

That was properly stupid of me... Yup - that's a bug in that case. I'll look into it as soon as I can. Thanks for flagging it up.

Allan

AluminumCat

Good luck :) Hope to see a fix soon.

For the record, I finally found out how to modify rows which havent been loaded into the DOM yet.
The only problem with that is that it requires looping through the entire array and using an if statement(or whatever) to figure out the id of the row. If there is a better/faster way, please let me know. But here it is(whippedcream is at the bottom of the table, and thus isn't loaded into the DOM yet):

$('#clickme').on('click', function() {
           
var jData = uTable.rows().indexes();
     
            
jData.each(function(index){
console.log(index);
                

                
                
if (uTable.row(index).data()['DT_RowId'] == 'whippedcream'){
var zero = uTable.row(index).data()[0];
uTable.row(index).data()['DT_RowClass'] += " delete";
var zero2 = "<span style='display:none;'>a </span>";
var zerostr= zero2.concat(zero);
console.log(zerostr);
uTable.row(index).data()[0] = zerostr; 
}
});

           
            
uTable.rows().invalidate().sort().draw();
                
     
});

The hidden span I inject because it's the only way I know of to prepend a row to the start of the table.
Anyway it works. The row appears at the top of the table with the proper highlighting once the rows have been invalidated and redrawn :)