Twitter-like dynamic reveal?

LanceA

I will fully admit that I am a hack coder, but I'll put this out there just to get a pointer. I want to alter the "show more rows" drop-down so that it operates like Twitter's "show more tweets" page. In other words, which API calls should I pursue to make a button at the bottom of a table that says "10 More" and clicking it will automatically expand the table by 10 rows, and this keeps occurring until the end of the table is reached, so the entire contents are eventually shown?

Shorter question: Is this possible?

P.S. Great work on DataTables, by the way! We're going to be using the code at The Internet Archive on an upcoming site refresh.

allan

What you could do is make use of the fnLengthChange API plug-in function: http://datatables.net/plug-ins/api#fnLengthChange . It will take a number, and simply alter DataTables display length to match what you pass it. i.e. oTable.fnLengthChange( 20 ) would display 20 rows.

Doing a 'scrolling' reveal is some what more tricky. Given that it's a table, and tables don't really like animation, what you would need to do, if you wanted this, is to wrap the table in a DIV with overflow:hidden, then increase the displayed rows and then finally animate the div to the new table height.

Great news that DataTables is going to be used on The Internet Archive! I love what you guys do - and have used it many a time :-). Any chance you could post back when you've got something to show us? I'd love to be able to put "Used by the Internet Archive" on the front page :-)

Regards,
Allan

LanceA

I don't think the scrolling is necessary. I was planning on simply fading the new rows in so the user recognizes that something has occurred without blinking them in with show().

Will the counter understand how many total rows there are in the table? The reason I ask is that I would like to indicate with the link "reveal 10 more" until you get near the end (i.e. remaining rows < 10) and at the end either reduce the number to the appropriate row count, or simply say "if hidden rows < 10: text 'show the rest'" We always try to talk to people like people on the front-end, so anything we can do in 'plain language' is preferred and though "show more" is certainly descriptive, it's not as descriptive as "show 10 more" or "show the rest".

I can give you a pointer to the new site and you can see DataTables in action if you pass me your email address, Allan. Although the dev site is publicly accessible, we're not quite ready for prime time, yet, so I'd prefer not to post it on a public forum. I'm at lance.arthur(AT)archive.org

allan

What you need to do in order to do '10 more' is find out how many DataTables is currently displaying, add ten to that, and then redraw the table.

Actually - what might be better is to modify the API function to accept a 'relative' input, which will change the table by that amount (either way will work fine). Here is a slightly modified function for relative input:

[code]
/*
* Function: fnLengthChangeRelative
* Purpose: Change the number of records on display relative to what is currently is showing
* Returns: array:
* Inputs: object:oSettings - DataTables settings object
* int:iDisplay - Display length change
*/
$.fn.dataTableExt.oApi. fnLengthChangeRelative = function ( oSettings, iDisplay )
{
oSettings._iDisplayLength += iDisplay;
oSettings.oApi._fnCalculateEnd( oSettings );

/* Always show at least 10 records */
if ( oSettings._iDisplayLength < 10 )
{
oSettings._iDisplayLength = 10;
}

/* If we have space to show extra rows (backing up from the end point - then do so */
if ( oSettings._iDisplayEnd == oSettings.aiDisplay.length )
{
oSettings._iDisplayStart = oSettings._iDisplayEnd - oSettings._iDisplayLength;
if ( oSettings._iDisplayStart < 0 )
{
oSettings._iDisplayStart = 0;
}
}

if ( oSettings._iDisplayLength == -1 )
{
oSettings._iDisplayStart = 0;
}

oSettings.oApi._fnDraw( oSettings );

$('select', oSettings.oFeatures.l).val( iDisplay );
}

/* Example */
$(document).ready(function() {
var oTable = $('#example').dataTable();
oTable.fnLengthChangeRelative( 10 ); /* add 10 rows from display */
oTable.fnLengthChangeRelative( -10 ); /* remove 10 rows from display */
} );
[/code]
Does that work okay for you.

If you want to know how many are currently on display, for your 'add 10 rows' etc text, you can get this information from the DataTables settings object ( fnSettings ):

fnRecordsTotal - total records
fnRecordsDisplay - total records - after filtering
fnDisplayEnd - index end point
_iDisplayLength - display length
_iDisplayStart - display start.

I should probably formalise these into an API function at some point...

E-mail coming at you as well :-)

Regards,
Allan

LanceA

I'll give that a shot, thanks, Allan!

Also, DataTables was throwing the "can't re-initialise table" alert all the time and I couldn't figure out why, so I simply deleted the alert from the script. That doesn't necessarily solve the problem, but I don't know what the problem was. The tables seem to load and operate correctly, anyway. Why does that alert appear?

allan

That error means that you are calling $().dataTable() on a table node which has already been initialised as a DataTable. This is something that can make DataTables go a little haywire, which is why there is a sanity check for this in there (without this check it will add the DOM elements etc again).

Removing the alert in 1.6.0/1 is harmless because there is the 'return' statement just after it, which prevents DataTables from doing anything nuts. So this is safe in what you have, although it might be an idea to find out why DataTables is being re-initialised - any configuration changes will not take effect, and other side-effects can crop up.

This is an area I hope to improve for 1.6.2 - not re-initialisation (so you might get the alert still - depending on how I implement it :-) ), but the ability to get back the original DataTables object, so you don't need to store it in some global variable like is currently required.

Regards,
Allan

LanceA

I assumed that was the case, based on when the alert was appearing, but I don't think I was calling the table twice. I wonder, instead, if the manner that I'm constructing the table (building it on the fly via Python) is making the script believe I'm doing it twice, though I can't say for sure when events are occurring - meaning that the page template contains only the table tbody tags, and a separate template iterates the table rows and populates the table from the data. There aren't any nested tables and I don't believe I'm calling dataTable() twice on the same table, but I don't fully understand when events on the page are taking place.

Does the error mean that the previous bit of code to insert/remove rows won't work?

allan

Having a look at your page, I can't see where it would be called twice - and indeed running a profiler on the page appears to show that the initialisation function is only called once. So short of doing some debug on the live page, I'm not sure I can offer much help.

The warning shouldn't effect the ability to add and remove rows. It's just a warning to say that DataTables instances cannot be re-initialised (since the settings wouldn't take effect). So if you've removed the warning alert() it should just work as expected (although it's still very odd that it's initialising twice...).

Allan

LanceA

I'm not too worried about it, since everything works otherwise. Thanks, again, for all the help!