Need help tracking Table rows selected

jimdgar

Great tool and great work in packaging and documenting everything. I've found DataTables very useful for my application. Now that I'm trying to move beyond the basic features I'm having trouble digging into the code. Would appreciate some pointers.

My application loads many rows of data and then allows the user to filter multiple columns with the result being X rows of data displayed. Let's pretend the database is a company's employee list. Clicking on the 1st cell (employee's name, maybe) in any row takes the user to a 2nd web page which then displays more details about that employee. What I want to add are forward/back buttons on that 2nd page which would step to the next/last employee in the filtered list. What are the data structures in DataTables which contain this info?

Thanks for any help

allan

How are you planning on doing the second page - is it an actual link (with perhaps a GET parameter)? If so, perhaps save saving is what you want (bStateSave). When the use hits the browser back button from the second page, then it will reload the state of the table from the time when the link was hit.

Alternatively, you might consider a lightbox approach. When the name is clicked a lightbox would appear with the detailed information. Or you could consider using fnOpen / fnClose to show / hide detailed information about an employee, effectively attaching the details row to the employee - like this: http://datatables.net/examples/api/row_details.html .

Hope this helps,
Allan

jimdgar

Allan, thanks for the quick response.

Yes, the 2nd page is spawned by a link passing the id of the row (../page2.php?id=267, for example). The id is the actual index from mySQL which allows page 2 to easily load the data from mySQL.

I am using bStateSave and it works fine. Once the user views data on page 2 there's a link to go back to page 1 (or use browser back), where (because of bStateSave) they see filtered rows again.

My goal is to save the user a couple of steps. Instead of returning to page 1, finding the next row and clicking the link back to page 2, I'd like to be able to jump to the next row's data directly from page 2. I'm not above using a crude method. So, for instance, after DataTables sorts the rows, if I could fill an array of indexes for filtered rows 1 thru n, I could pass this array to page 2 and reference that array for the stepping. Just one idea.

If you think there's a hook I could use to do this please let me know. I do like the lightbox idea and might have to use it, but page 2 is already complete and functional so I'd like to just add this extra function if possible.

allan

I see what you mean - thanks for the explanation. There isn't a hook for this in DataTables as such - at least not on the second page, since of course the table doesn't really exist any more. What you could do when generated the page2.php URL is to have something like id?=1&seq=2,3,4,5,6 etc. Then your second page has a comma separated list which is can shift the first element off the list, use it as the 'next' and then give the remainder of the list to the next page for it's own 'next'. This will also allow you do decide if you need to show a 'next' button or not.

There is a plug-in API method ( http://datatables.net/plug-ins/api#fnGetColumnData ) which I think will be useful in this case. Assuming that your IDs are in the table, then you could generate the seq list using this (might need a little modification to get to the start point of the array from the clicked row).

Regards,
Allan

jimdgar

Allan,

This looks like it will work for me. Can you give me an example of how/where I would call fnGetColumnData?

Thanks

allan

It is used in the example here: http://datatables.net/examples/api/multi_filter_select.html .

Allan

jimdgar

OK, fnGetColumnData works fine during initialization, as in line 36 below. Now I need to call it every time the table is updated. But adding line 21 in my code below not only doesn't return any data, it also disables the thead filtering. The fnGetColumnData function is extracted directly; I have not changed anything.

I'm a newcomer to jscript & jquery, so pardon my ignorance.


var asInitVals = new Array();
$(document).ready(function() {
var oTable = $('#apps_table').dataTable( {
"aaSorting": [[ 1, "asc" ]],
"aLengthMenu": [[10, 25, -1], [10, 25, "All"]],
"bStateSave": true,
"oLanguage": {
"sSearch": "Search all columns:"
},
"sDom": '<"topl"f><"topr"p>rt<"bottoml"i><"bottomr"l><"clear">',
"fnInitComplete": function() {
var oSettings = this.fnSettings();
for ( var i=0 ; i0) {
$("thead input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
$("thead input")[i].className = "";
}
}
},
"fnDrawCallback": function () {
var appList = oTable.fnGetColumnData(0); /* doesn't work here & disables filtering capability */
}
} );

$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("thead input").each( function (i) {
asInitVals[i] = this.value;
var appList = oTable.fnGetColumnData(i); /* works OK here */
} );

$("thead input").focus( function () {
if ( this.className == "search_init" ) {
this.className = "";
this.value = "";
}
} );

$("thead input").blur( function (i) {
if ( this.value == "" ) {
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
} );

allan

The first table that fnDrawCallback is called is before oTable has fully initialised (i.e. before the dataTable() function has fully run). Thus oTable will be undefined and you'll be getting a Javascript error in the console saying as much.

The fix is to simply use 'this' rather than oTable in the callback. The DataTables callback functions execute with the DataTables instance scope, so:

[code]
"fnDrawCallback": function () {
var appList = this.fnGetColumnData(0); /* doesn't work here & disables filtering capability */
}
[/code]
should do it for you.

Allan