Replies

• allan Posts: 61,851Questions: 1Answers: 10,134 Site admin

  April 2009

  It looks like you are messing the required styles. Assuming you are using my demo styles, they have an extra selector ".example_alt_pagination" on them so that they don't clash with other styles. I suspect you just need to remove this extra selector.
  
  Allan
• burningflames Posts: 9Questions: 0Answers: 0

  April 2009

  Allan,
  
  I just added "sPaginationType": "full_numbers" in your editable example. I did no modification to the CSS or datatables.js
  
  bf
• allan Posts: 61,851Questions: 1Answers: 10,134 Site admin

  April 2009

  Yup - you'll need to modify the CSS slightly :-). Just take a look at the selectors, it should be fairly easy to alter my demo ones.
  
  Allan
• Belisarius Posts: 26Questions: 0Answers: 0

  April 2009 edited April 2009

  Hi Allan,
  
  I've just tried to do this and altered the CSS to:
  
  [code]div.dataTables_info {
  width: 40%;
  }
  
  .dataTables_paginate {
  width: 400px;
  }
  
  div.dataTables_paginate span.paginate_button,
  div.dataTables_paginate span.paginate_active {
  border: 1px solid #aaa;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 2px 5px;
  margin: 0 3px;
  cursor: pointer;
  *cursor: hand;
  }
  
  div.dataTables_paginate span.paginate_button {
  background-color: #ddd;
  }
  
  div.dataTables_paginate span.paginate_button:hover {
  background-color: #ccc;
  }
  
  div.dataTables_paginate span.paginate_active {
  background-color: #99B3FF;
  }[/code]
  
  It seems to work in FF although the top of the 'buttons' slightly overlaps the bottom of the last row. However in IE6 the top and bottom lines of the buttons are missing.
  
  Andy
• allan Posts: 61,851Questions: 1Answers: 10,134 Site admin

  April 2009

  Good old IE - where would be be without it... The issue is easy solved by adding a bit of height to the . dataTables_paginate element:
  
  [code]
  .dataTables_paginate {
  width: 400px;
  height: 22px;
  line-height: 22px;
  }
  [/code]
  
  Allan
• burningflames Posts: 9Questions: 0Answers: 0

  April 2009

  You guys rock :)
  
  Thanks for taking this discussion further .... I will test out the CSS modification now :)
  
  Thanks a lot again
• Belisarius Posts: 26Questions: 0Answers: 0

  April 2009

  Thanks Allan. Sorted.
  
  The line-height is the bit that seems to sort it.
• roblem Posts: 1Questions: 0Answers: 0

  October 2011

  I just had a similar issue - one thing that i was utilizing was the JQuery UI..
  so the fix for me was to remove the reference to demo_table.css and add demo_table_jui.css
  
  Now it is a thing of beauty! - Great work - Amazing grid!