paging with "full_numer" css required

tlnl

I am using pagination with full_numbers
oTable = $('#salespeople').dataTable({
"bProcessing": true,
"sPaginationType" : "full_numbers",

All I see if firstnext1last etc alltogether and not as buttons.
I read I need to add special classes to my css file.
Can you tell me what is needed to add?
Is there a way to remove the first, next, prev , last and just have the page numbers?


Thank you

fbas

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

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

it should add spacing. are you sure your css is being loaded? have you checked the debugger?

[code]padding: 2px 5px;[/code]

tlnl

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

AFAIK, DT will set these class names automatically when you set "sPaginationType": "full_numbers"

allan

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

Great, thank you

tlnl

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

Can you give us a link to your page please?

Thanks,
Allan

tlnl

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

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

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;
}