Replies

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  July 2011

  If you want to customise the paging controls, then you might need to create a pagination plug-in: http://datatables.net/development/pagination which does it exactly the way you want. The built-in methods aren't hugely flexible other than the CSS options in order to try and keep the core to a sensible size.
  
  Having said that - doesn't it do that already? "paginate_button_disabled" is applied to the first and previous buttons on the first page.
  
  Allan
• xtremer360 Posts: 84Questions: 2Answers: 0

  July 2011

  Well lets say on page 1 it applies the classes: first, paginate_button, and paginate_button_disabled to the First Page link. However I only need it to apply the styles I have set to the paginate_button_disabled style.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  July 2011

  Oh I see - in that case yes - you'd need to customise the code in DataTables a little bit or to wrap it up into a plug-in which applies the classes exactly as you require.
  
  Allan
• xtremer360 Posts: 84Questions: 2Answers: 0

  July 2011

  Well any suggestions because I've been looking through the code and as much as I'd try and change something I'm afraid I'm going to mess with the wrong thing and make something else not work.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  July 2011

  Have a look in fnUpdate for the full numbers paging function ( https://github.com/DataTables/DataTables/blob/master/media/js/jquery.dataTables.js#L480 ) - that is the only function you should need to change to do what you have described.
  
  Allan
• xtremer360 Posts: 84Questions: 2Answers: 0

  July 2011

  Thank you Allen. Great script you've written. Maybe someone can also reply for the fact of so much to attempt to understand. That way I don't mess with the right part.
• xtremer360 Posts: 84Questions: 2Answers: 0

  July 2011

  Anybody else have any additional ideas?
• xtremer360 Posts: 84Questions: 2Answers: 0

  July 2011

  After looking around for additional help I wasn't able to find an answer. Here's my css. Only thing is when the button is disabled it still gets the styles of the button and like either first, last, previoius,next buttons. Since its disabled it should only have the class of disabled.
  
  .paginate_button_disabled {
  border: 1px solid #F3F3F3;
  color: #CCCCCC;
  margin-right: 2px;
  padding: 2px 5px;
  }
  .paginate_button:hover {
  border:1px solid #52bfea;
  color: #fff;
  background-color: #52bfea;
  }
  .paginate_active {
  padding: 2px 5px 2px 5px;
  margin-right: 2px;
  border: 1px solid #52bfea;
  font-weight: bold;
  background-color: #52bfea;
  color: #FFF;
  }
  .paginate_button {
  padding: 2px 5px 2px 5px;
  margin-right: 2px;
  color: #52BFEA;
  border: 1px solid #52BFEA;
  }
• xtremer360 Posts: 84Questions: 2Answers: 0

  July 2011

  I tried working with this but can't seem to come up with what works because all 3 are overwriting each other when the styles are applied and for the disabled buttons it has those styles marked out in firebug and it only applies the pagination_button style.
• xtremer360 Posts: 84Questions: 2Answers: 0

  July 2011

  Any ideas?
• xtremer360 Posts: 84Questions: 2Answers: 0

  July 2011

  To show you a visual affect here's a jsfiddle I created to show you.
  
  http://jsfiddle.net/Rx8se/
  
  Right but if you notice it has the disabled styles crossed off when it shouldn't because with the table having no data then all 4 of those buttons should be disabled.
• fbas Posts: 1,094Questions: 4Answers: 0

  July 2011 edited July 2011

  [edit: I think I misunderstood your question, so I answered the wrong thing]
  
  After every time your table is drawn, you can get the count of rows drawn, and disable or enable the buttons if the number of rows is less than or greater-than-or-equal-to 1 row:
  
  [code]
  oTable = $('#your_table').dataTable( {
  fnDrawCallback: function() {
  iDisplayLength = oTable.fnSettings().aiDisplay.length;
  if (iDisplayLength < 1) disable_buttons();
  else enable_buttons();
  }
  });
  [/code]
• xtremer360 Posts: 84Questions: 2Answers: 0

  July 2011

  So your saying this:
  
  [code]$('#templatesPageList').dataTable( {
  "sDom": 'rti<"pagination"p>',
  "iDisplayLength": 1,
  "sPaginationType": "full_numbers",
  if ("iDisplayLength" < 1) disable_buttons();
  else enable_buttons();
  } );
  [/code]
• xtremer360 Posts: 84Questions: 2Answers: 0

  July 2011

  The other issue is if there is say 5 pages and your on page 1 then the Previous and First buttons should become disabled.
• fbas Posts: 1,094Questions: 4Answers: 0

  July 2011

  I don't know if there's an easier way to find out which page you're on, but you can do some math with oTable.fnSettings()._iDisplayStart and _iDisplayLength
  
  something like:
  
  [code]
  $('#templatesPageList').dataTable( {
  "sDom": 'rti<"pagination"p>',
  "iDisplayLength": 1,
  "sPaginationType": "full_numbers",
  "fnDrawCallback": function () {
  iLength = oTable.fnSettings().aiDisplay.length;
  if (iLength < 1) disable_buttons();
  else enable_buttons();
  
  iDisplayLength = oTable.fnSettings()._iDisplayLength;
  iRecordsDisplay = parseInt(oTable.fnSettings()._iRecordsDisplay) ;
  iCurrentPage = Math.floor(iRecordsDisplay / iDisplayLength);
  iLastPage = iRecordsDisplay - iDisplayLength;
  
  disable_current_button(iCurrentPage);
  if (oTable.fnSettings()._iDisplayStart < 1) disable_first_button();
  if (oTable.fnSettings()._iDisplayStart >= iLastPage ) disable_last_button();
  }
  } );
  [/code]
• xtremer360 Posts: 84Questions: 2Answers: 0

  July 2011

  I appreciate you taking the time and helping me correct this issue, however, I updated the jsfiddle and I'm still not getting the correct results I'm wanting.