Sticky Row

oliverw

Hi Allen

I've been working with datatables for a couple of month now and it is my opinion that datatables is hands down the best javascript library I ever had the pleasure to work with.

Recently I've stumbled about a feature I don't know how to tackle: A sticky row at the top of the list that will never get filtered or be affected by sorting. Any suggestions on how to tackle the problem?

- oliver

allan

Hi Oliver,

Good question (and thanks for the kind words!). There are probably a number of ways to do this, but here is what I would suggest doing:

1. Create your table row using Javascript and store it in a variable somewhere. Then:
2. Use fnDrawCallback() to insert this row at the top of the table whenever the table is redrawn (DataTables will remove it at draw time to you need to add it back in). This will ensure that it is always at the top of the table :-)

Optional:
3. Assuming you want to have this row at the top counted as part of the 10 (default) rows that DataTables shows - Alter the length drop down menu to have the values of each menu entry that the user can see, minus one ( http://datatables.net/usage#oLanguage.sLengthMenu ). That way when the user selects '25' DataTables will actually draw 24 rows + your own one.

Hope this helps!

Allan

oliverw

Allan, do I need to clone the row before inserting it?

allan

Hi Oliver,

No you should be able to just use one instance of the created row. You could clone it - but would probably be more memory efficient just to keep the old one and maintain the cached list to it. Ie

[code]
var gnFloatRow;
$(document).ready() {
gnFloatRow = document.createElement( 'tr' );
...
}
[/code]

Then you can do whatever you want with gnFloatRow - keep reinserting it etc. Just don't reassign gnFloatRow to 10 or something :-)

Regards,
Allan

oliverw

Implemented the feature today. Here's the code:

// unlinks the first row from the table - to be placed _before_ the datatables init for #list
var row0 = $('#list tbody tr:first').remove()[0]

// the datatables drawCallback for #list
function drawCallback()
{
// re-insert the unlinked row at the top
$('#list tbody tr:first').before(row0)
}

allan

Nice one Oliver! Thanks for sharing your code :-)

Regards,
Allan