Next and Previous Row With Jquery DataTables

So in a recent project I have been working on there has been a lot of jquery DataTables. At first I was a little concerned by this, but I must say that overall I have been really impressed with the plugin. If you are not familiar with it or just want to check it out head over to DataTables.net and have a look.

One of the really nice things about the DataTables plugin is that you get plenty of ways to sort, filter and hide rows. This means the user can really deal with the table the way they want to not just how you set it out for them. The problem with that is that sometimes it can get tricky to know where things are.

Lets say you have a table of names

If I wanted a popup that said  Kayla and the name before it and after it that wouldn’t be too hard with jquery. The reason is that the table never changes. However, if I had a DataTables table the data could move around. It might even be on a different page if you have pagination on. So the first and last record you see may not be the first and last in the table even though you have another set of results that may come before or after.

So how do I get the row before and after the one the user is looking at based on the order the user has set? That was tough. I spent sometime looking and it didn’t really seem like anyone had a quick fix. The solution I came up with was fairly simple. Use the index array, the array that DataTables uses to hold the current order of all the indexes by row, to find the index in question then pull the value before and after. So how does it work? Lets go through it and take a look.

If you are not familiar with arrays you may want to go read up real quick before diving in as we use the fact the DataTables use sequential array keys to make this work.

To start we need to get the index number of the row we to base before and after off of. In my case the user clicks on a row so I got it that way. Doesn’t really matter since we are targeting the row before and the row after. Here is what that might look like. For reference ResultsTable is my datatable object. So you will want to substitute that with your DataTable object.

//detect a click on a row
$(document).on('click','.dataTables_scrollBody TR',function(){
 //Set the index based on the row that was clicked
 var CurItemIndex = ResultsTable.row( $(this).parents('tr') ).index();

Ok so now we need to get the array of indexes. That is pretty easy so lets do it!

//Get the indexes 
var CurTableIndexs = ResultsTable.rows().indexes();

Now we have the indexes array and the index we want. So lets use that to get the next two!

// Get the array key for the current index we have
var CurIndexArrayKey = CurTableIndexs.indexOf( CurItemIndex );
// Subtract 1 to the array key to get the prior index number
var PrevItemIndex = CurTableIndexs[ CurIndexArrayKey - 1];
// Add 1 to get the next index number
var NextItemIndex = CurTableIndexs[ CurIndexArrayKey + 1];

Now that we have the index numbers we really want something we can actually use! Like a jquery object so lets do that now!

//Create Previous Row object
var QVPrevItemObj = $( ResultsTable.rows( PrevItemIndex ).nodes() ).find(".AcctQuickView");
//Create Next Row object
var QVNextItemObj = $( ResultsTable.rows( NextItemIndex ).nodes() ).find(".AcctQuickView");

Now lets look at it all together so you can actually use it now that you understand it!

//detect a click on a row
$(document).on('click','.dataTables_scrollBody TR',function(){
 //Set the index based on the row that was clicked
 var CurItemIndex = ResultsTable.row( $(this).parents('tr') ).index();
 //Get the indexes 
 var CurTableIndexs = ResultsTable.rows().indexes();
 // Get the array key for the current index we have
 var CurIndexArrayKey = CurTableIndexs.indexOf( CurItemIndex );
 // Subtract 1 to the array key to get the prior index number
 var PrevItemIndex = CurTableIndexs[ CurIndexArrayKey - 1];
 // Add 1 to get the next index number
 var NextItemIndex = CurTableIndexs[ CurIndexArrayKey + 1];
 //Create Previous Row object
 var QVPrevItemObj = $( ResultsTable.rows( PrevItemIndex ).nodes() ).find(".AcctQuickView");
 //Create Next Row object
 var QVNextItemObj = $( ResultsTable.rows( NextItemIndex ).nodes() ).find(".AcctQuickView");
});

Now you have a way to get the prev or next row regardless of the page you are on. This also means that no matter how you sort your table you will always get the row before and after based on the current way the table is sorted. Pretty cool right!? If you have comments or questions feel free to leave them below. If you come up with a better way to do it feel free to share.