"sPaginationType": "full_numbers" .. buttons not being shown

burningflames

Hi Allan,

I tried "sPaginationType": "full_numbers".

/* Init DataTables */
oTable = $('#leaders').dataTable({
"sPaginationType": "full_numbers"
} );

After I put this, the two buttons are replaced by this text :

FirstPrevious12NextLast


They are not appearing as buttons and dont even have space between them. When I click on the text it is taking me to the correct page.

What am I missing ??

allan

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

Allan,

I just added "sPaginationType": "full_numbers" in your editable example. I did no modification to the CSS or datatables.js

bf

allan

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

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

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

You guys rock :)

Thanks for taking this discussion further .... I will test out the CSS modification now :)

Thanks a lot again

Belisarius

Thanks Allan. Sorted.

The line-height is the bit that seems to sort it.

roblem

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!