dynamically change iDisplayLength

wps

Is it possible to dynamically change iDisplayLength (the number of rows)? I see that it can be set on initialization and that the value can be read using the API fnSettings, but is there a way to change it with the API?

allan

Hi wps,

Yes indeed this can be done. The easiest way is simply to assign the value you want to use to iDisplayLength and then call fnDraw() ( http://datatables.net/api#fnDraw ), which will redraw the table for you, based on the new settings.

Regards,
Allan

wps

Thank you, Allan. I am glad to hear that it can be done. How do I assign my new value to iDisplayLength? I see how it can be set on initialization but don't see a way to do it afterwards. If I call dataTables() again, like this:

[code]
$(document).ready( function() {
$('#example').dataTable( {
"iDisplayLength": 50
});
})
[/code]


…then it messes things up, adding the search box and pagination again and again in a strange nested fashion.

I would have anticipated being able to do something like this:

[code]
var oTable;

$(document).ready(function() {
$('.something').click( function () {
oTable.fnSetDisplayLength = 50;
oTable.fnDraw();
});

oTable = $('#example').dataTable();
});
[/code]


…but "fnSetDisplayLength" doesn't exist. I just made that up here to show how I would have hoped it could have been done.

Miles

Call and edit the settings from the table.

Using fnSettings();

[code]
var oTable;

$(document).ready(function() {
oTable = $('#example').dataTable();
var oSettings = oTable.fnSettings();
oSettings.iDisplayStart = 50;
} );
[/code]

allan

Yup - just as Miles says - just edit the property in the settings object and then redraw the table:

[code]
var oTable;

$(document).ready(function() {
$('.something').click( function () {
oTable.iDisplayStart = 50;
oTable.fnDraw();
});

oTable = $('#example').dataTable();
});
[/code]
Regards,
Allan

wps

Thanks for the additional information, but neither Miles or Allan's examples are working. Here is a live example:

http://anavidesign.com/temp/datatables.html


What am I missing? It appears that the fnSettings object is read only. Neither of the code examples work but I am not getting any errors either.

allan

Hi wps,

Sorry - that should have been:

[code]
var oTable;

$(document).ready(function() {
$('.something').click( function () {
oTable._iDisplayLength = 50;
oTable.fnDraw();
});

oTable = $('#example').dataTable();
});
[/code]
I was using iDisplayStart rather than _iDisplayLength in my previous code block.

Not sure about the use of "oTable[0].dataTableSettings" in the Allan event handler... :-)

Allan

wps

Sorry for any confusion created by my "oTable[0].dataTableSettings" code. I was digging through the oTable object trying anything I could to get things to work.

I have updated my live example with your new code (using "_iDisplayLength" instead of "iDisplayStart") but it still does nothing:

http://anavidesign.com/temp/datatables.html

allan

Gah! My bad.

[code]
var oTable;

$(document).ready(function() {
$('.something').click( function () {
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = 50;
oTable.fnDraw();
});

oTable = $('#example').dataTable();
});
[/code]
Sorry I made that so complicated. It should be! I think m brain is on a go slow today...

Allan

wps

That worked. Thank you. It's good to know that fnSettings() is not just read-only (my understanding was that it was only for reading values, not setting them). Thanks, Allan.

allan

Hi wps,

The settings object is used for manipulation of the DataTables internals :-). As such, it's generally best to refer to the code to figure out what is going on, since it is not documented - but is generally fairly obvious from the code!

Regards,
Allan

12Bo

This doesn't work as intended if I am using "fnServerData".

[code]

"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push(
{ "name":"iDisplayLength", "value": 2500 },
{ "name":"iSortingCols", "value": 1},
{ "name":"iSortCol_0", "value": "0"},
{ "name":"sSortDir_0", "value": "desc"},
{ "name":"bSortable_0", "value": "true"}
);
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});

[/code]

Let me be more specific. I am loading 2500 records on page load but would like the user to change the number of records that gets pulled from the database. In one table there are about 20,000 records. I would load all 20,000 records but it can take a long time for the table to populate with the data records.

Any thoughts?

allan

It would probably be worth starting a new thread in future, rather than dragging one up from 2009 :-)

> I would load all 20,000 records but it can take a long time for the table to populate with the data records.

Have you tried enabling deferred rendering? http://datatables.net/release-datatables/examples/ajax/defer_render.html .

If you want to change the paging size then use the plug-in http://datatables.net/plug-ins/api#fnLengthChange - but that isn't what you want here since your are loading a partial record set. If anything you want to use pipelining: http://datatables.net/release-datatables/examples/server_side/pipeline.html .

Allan

bluehouseandrew

We recently were using your code example above Allen to implement external control over the pagination display length and all appeared to be working great. However we ended up getting some errors on the next and previous buttons and other things after changing the length. So we went into the plugin and copied the display length logic out and made our own function that we call that replicates the internal plugin logic better than the above example. Works perfectly now! Thought we would share incase others are having the same difficulty. Thanks for the great work here Allen. Hope our small contribution helps someone else.

Example usage:
[code]
var t = $('#table-id').dataTable();

$('#length li').click( function () {
redrawWithNewCount(t, this.id);
} );
[/code]

Function that is called:
[code]
function redrawWithNewCount(t, row_count)
{
//Lifted more or less right out of the DataTables source
var oSettings = t.fnSettings();

oSettings._iDisplayLength = parseInt(row_count, 10);
t._fnCalculateEnd( oSettings );

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

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

t.fnDraw( oSettings );

return t;
}
[/code]

allan

That's great stuff - thanks very much for posting your code!

Allan

allan

For anyone else who finds this thread - in DataTables 1.10 the API has a public method for this - page.len().

Allan