How to add "selected" class to the first row displayed when the page changes?

Leo Bruno

Hi:

I´m looking for a way to add the "selected" class (i´m not using the select extension), after the pagination changes.

I´have seen some instructions to use DrawCallBack, but it is fired BEFORE the page changes, so I´m lost.

How can I achieve this?

allan

table.on('draw', function () {
  var tr = table.row(':eq(0)').node();

  tr.classList.add('selected');
});

Allan

Leo Bruno

Hi Allan....

Thank you for answering.

It partially worked.

The dataset has two pages.

When I go to page 2, the first row is not selected.

Then when I go back to page 1, the first row get´s selected.

Leo Bruno

Well, it din´t work at all.

        table.DataTable().on('draw', function () {
          var tr = table.DataTable().row(':eq(0)').node()
          console.log(tr)
          tr.classList.add('selected')
          console.log(tr)
        })   

Inspecting the console.lod data, I could see that is the row at page 1 that is being selected, when page 2 is drawn.

kthorngren

I changed the jQuery selector to 'tr:first-child'which works and 'tbody tr:eq(0)' which also works. See this example:
http://live.datatables.net/nuhibola/1/edit

I'm not sure how Datatables processes the :eq(0) selector versus 'tbody tr:eq(0)' but there is something different as it seems to use the Datatables cache instead of what is in the DOM.

Kevin

Leo Bruno

Thank you Kevin and Allan.

allan

Ah yes sorry. I forget to add {page: 'current'} as the second parameter to my row() selector. Doh.

Allan