Replies

• fbas Posts: 1,094Questions: 4Answers: 0

  October 2011

  You can copy these css rules to your stylesheet (from http://www.datatables.net/release-datatables/media/css/demo_table.css )
  
  [code].example_alt_pagination div.dataTables_info {
  width: 40%;
  }
  
  .paging_full_numbers {
  width: 400px;
  height: 22px;
  line-height: 22px;
  }
  
  .paging_full_numbers span.paginate_button,
  .paging_full_numbers 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;
  }
  
  .paging_full_numbers span.paginate_button {
  background-color: #ddd;
  }
  
  .paging_full_numbers span.paginate_button:hover {
  background-color: #ccc;
  }
  
  .paging_full_numbers span.paginate_active {
  background-color: #99B3FF;
  }
  [/code]
  
  
  
  -------------
  
  not sure about disabling the First/Next/Prev/Last. I guess you can use jQuery's .hide() to hide them.
• tlnl Posts: 13Questions: 0Answers: 0

  October 2011

  Thank you. I added this code to the bottom of my default.css file.
  I still see the test as FirstPrevious1NextLast No buttons and alltogether.
  Where am I suppose to add this to?
  Am I still missing something?
• fbas Posts: 1,094Questions: 4Answers: 0

  October 2011

  it should add spacing. are you sure your css is being loaded? have you checked the debugger?
  
  [code]padding: 2px 5px;[/code]
• tlnl Posts: 13Questions: 0Answers: 0

  October 2011

  I know this sounds stupid but do i need to specify on my datatable these new classes or is that something the plug in is looking for?
  I have my css I have my datatable but where did I tell my datatable to use these new classes I added?
• fbas Posts: 1,094Questions: 4Answers: 0

  October 2011

  AFAIK, DT will set these class names automatically when you set "sPaginationType": "full_numbers"
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  October 2011

  DataTables adds the class "paging_full_numbers" automatically to the pagination elements. Therefore if you just include the CSS fbas suggested it should "hopefully" just work! If you use Firebug to "inspect" the pagination controls you should see these classes being applied to them.
  
  Allan
• tlnl Posts: 13Questions: 0Answers: 0

  October 2011

  Great, thank you
• tlnl Posts: 13Questions: 0Answers: 0

  October 2011

  It doesnt seem to be adding it.
  I added the css classes in the style of the page.
  I see in the html in firebug:
  
  FirstPrevious1NextLast
  
  I see datatables_paginate but I don't see the paging_full_numbers
  I added in the file that has the datatable defined
  all the classes from above.
  What am I missing?
  
  Thanks
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  October 2011

  Can you give us a link to your page please?
  
  Thanks,
  Allan
• tlnl Posts: 13Questions: 0Answers: 0

  October 2011

  I need to find out how. Its an internal website.
  I spoke with the designers they say I am missing the classes defined ex first ui-corner-tl ui-corner-bl
  I have the classes defined for the paginate but its not applying.
  so I have 1. datatable where pagination is full_numbers 2. Classes defined as above stated
  
  Thanks again
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  October 2011

  If you want the jQuery UI styles you need to set bJQueryUI to true, like in the example: http://datatables.net/release-datatables/examples/basic_init/themes.html
  
  Allan
• tlnl Posts: 13Questions: 0Answers: 0

  October 2011

  Thank you Allan for all your patience. I have been on vacation for a little.
  There is no way for me to send you a link since its an internal site.
  Here is how the datatable is defined:
  var oTable = $('#myDataTable').dataTable({
  "bServerSide": true,
  "sAjaxSource": "GetSales",
  "bProcessing": true,
  "bJQueryUI": true,
  "sPaginationType": "full_numbers",
  "aoColumns": [
  { "sName": "NAME" },
  { "sName": "STATUS" },
  { "sName": "TRANSFERCOMMISSION" },
  { "sName": "RESIDUALCOMMISSION" },
  { "sName": "IMTUCOMMISSION" },
  { "sName": "ID",
  "bSearchable": false,
  "bSortable": false,
  "fnRender": function (oObj) {
  //return 'View';
  return '';
  
  }
  }
  
  
  
  I also have all the classes defined in my cshtml page.
  I wonder if this works differently with .net mvc?
  
  
  .example_alt_pagination div.dataTables_info {
  width: 40%;
  }
  
  .paging_full_numbers {
  width: 400px;
  height: 22px;
  line-height: 22px; }
  
  .paging_full_numbers span.paginate_button,
  .paging_full_numbers 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; }
  
  .paging_full_numbers span.paginate_button {
  background-color: #ddd;
  }
  
  
  .paging_full_numbers span.paginate_button:hover {
  background-color: #ccc;
  }
  
  
  .paging_full_numbers span.paginate_active {
  background-color: #99B3FF;
  }