Programmatically select a row node and jump to it

Programmatically select a row node and jump to it

italoitalo Posts: 2Questions: 0Answers: 0
edited September 2011 in General
This is the first time I am using DataTables in one of my projects. I have checked the previous post for solutions.

I have a table with "pagination":false, "sRowSelect": "single", and 87 rows on it. The fnAddData() is working with no problem. But I can't figure out how to mark a row as selected, and scroll to its positions regardless if it sorted or not.

I have try to use the plug-in fnAddDataAndDisplay(), it selects the row but transform the table to pagination and I want to have a scrollable table.

It would be nice to have fnSelectedIndex(node_position) function which can allow to select rows programmatically and visually jump to it regardless the position it has because of sorting.

Any help?

Replies

  • lleveringllevering Posts: 12Questions: 0Answers: 0
    You will probably need to implement your own row callback, to set the class of the tr-element to 'row_selected'.
    http://datatables.net/release-datatables/examples/advanced_init/row_callback.html

    Then you implement a footer callback (as you know that the body is drawn already then)
    http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html

    Then you retrieve the selected row:
    $(aTrs[i]).hasClass('row_selected')

    With the help of the following post you should be able to get the scrolling part working:
    http://stackoverflow.com/questions/2905867/how-to-scroll-to-specific-item-using-jquery

    Good luck!
  • italoitalo Posts: 2Questions: 0Answers: 0
    edited September 2011
    Changing the tr-element class to 'row_selected' does not solve the problem as expected. After the row gets selected using this method it does not get unselected when clicking in another row. Actually if the table is using TableTools the class to use is 'DTTT_selected'. Changing the class is not enough, TableTools has to be informed what node has marked as selected.

    After a deep debugging process I finally arrived to this solution:
    [code]
    exampleTable = $('#example').dataTable( {
    ...
    "sScrollY": "300px",
    "bPaginate": false,
    });

    [/code]

    The code in the function to select and scroll:
    [code]
    var nRow = exampleTable.fnAddData( {
    ...
    } );

    var position = exampleTable.fnGetData().length-1;
    var oRow = exampleTable.fnGetNodes(position);

    var aoTableTools = TableTools.fnGetInstance('example');
    aoTableTools._fnRowSelectSingle(oRow);

    var container = $('#example,div.dataTables_scrollBody');
    var scrollTo = $('#example tbody tr.DTTT_selected');
    container.scrollTop( scrollTo.offset().top - container.offset().top );
    [/code]

    This method works even is the table is sorted.

    Thank you "llevering" for the scrolling link.

    I hope this help somebody in similar need.
This discussion has been closed.