Replies

• allan Posts: 63,397Questions: 1Answers: 10,451 Site admin

  August 2009 edited October 2014

  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 Posts: 15Questions: 0Answers: 0

  August 2009

  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 Posts: 12Questions: 0Answers: 0

  August 2009 edited August 2009

  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 Posts: 63,397Questions: 1Answers: 10,451 Site admin

  August 2009

  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 Posts: 15Questions: 0Answers: 0

  August 2009

  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 Posts: 63,397Questions: 1Answers: 10,451 Site admin

  August 2009

  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 Posts: 15Questions: 0Answers: 0

  August 2009

  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 Posts: 63,397Questions: 1Answers: 10,451 Site admin

  August 2009

  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 Posts: 15Questions: 0Answers: 0

  August 2009

  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 Posts: 63,397Questions: 1Answers: 10,451 Site admin

  August 2009

  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 Posts: 10Questions: 0Answers: 0

  May 2012 edited May 2012

  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 Posts: 63,397Questions: 1Answers: 10,451 Site admin

  May 2012

  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 Posts: 3Questions: 0Answers: 0

  January 2013

  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 Posts: 63,397Questions: 1Answers: 10,451 Site admin

  January 2013

  That's great stuff - thanks very much for posting your code!
  
  Allan
• allan Posts: 63,397Questions: 1Answers: 10,451 Site admin

  October 2014

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

  Allan