Sticky Row

Sticky Row

oliverwoliverw Posts: 4Questions: 0Answers: 0
edited July 2009 in General
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

Replies

  • allanallan Posts: 62,099Questions: 1Answers: 10,183 Site admin
    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
  • oliverwoliverw Posts: 4Questions: 0Answers: 0
    Allan, do I need to clone the row before inserting it?
  • allanallan Posts: 62,099Questions: 1Answers: 10,183 Site admin
    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
  • oliverwoliverw Posts: 4Questions: 0Answers: 0
    edited July 2009
    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)
    }
  • allanallan Posts: 62,099Questions: 1Answers: 10,183 Site admin
    Nice one Oliver! Thanks for sharing your code :-)

    Regards,
    Allan
This discussion has been closed.