Multiple row Sticky on top

Multiple row Sticky on top

heroesheroes Posts: 1Questions: 1Answers: 0

I've been working on my project with Datatables on.
After I submit a post, it will automatically adds in the table.
But there are condition. if the post is sponsored, it will stick on the top, no matter what sort been made. I want to make 10 per page including sponsored rows.
I've read other post regarding this kind of situation, but the answer is for single row only that will stick on top.
Mine might be 2 or more.

Answers

  • kthorngrenkthorngren Posts: 21,301Questions: 26Answers: 4,946
    edited March 2018

    I don't know of a way to guarantee certain rows stay at the top of the table if the users are allowed to change the sorting of the table. However if the sorting is not changed once the table is displayed then this can be done by using a hidden column to contain the values to sort the desired rows to the top. For example you can use columns.render to render either a 0 (sponsor) or a 1 (non-sponsor) into the hidden column then use order to set the order to the hidden column. You would need to use ordering to disable the users ability to order the table.

    If the users have the capability to order the table then I think the easiest way to keep the sponsors at the top is to move them into the header of the table. You can get the indexes of the rows that sponsors using indexes() and filter(), for example:

    var indexes = table
          .rows()
          .indexes()
          .filter( function ( value, index ) {
             return table.row(value).data()[2] === 'sponsor';  //everything after data() is dependent on your data
          } );
    

    Using jQuery you could remove all but the first header row then loop through the array of indexes to get the row data using:
    var data = table.row(indexes[i]).data();

    jQuery can be used to build the <tr> and <th> structure with the data then append to the header.

    Then you can remove the sponsor rows from the table:
    table.rows(indexes).remove().draw(false);

    Almost forgot for the second method you will also need to use orderCellsTop true to keep the ordering in the top header row.

    Sorry for the long response. Let us know how you proceed and if there are any questions.

    Kevin

  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin

    Have a look at this blog post as well which allows rows to be sorted as fixed to the top of the table.

    Allan

  • kthorngrenkthorngren Posts: 21,301Questions: 26Answers: 4,946

    I keep forgetting about that blog :smile:

    Kevin

This discussion has been closed.