full number pagination, jQuery UI

writes_on

Hi all,
I'm using dataTables 1.9.0 with jQuery 1.7.1 and jQuery UI 1.8.11 and am having a problem with full number pagination. I wish I could upload a screenshot here, but I'll try my best to describe the problem. I'm using server side processing for pagination and when the table is displayed the pagination buttons are all small (no padding) and have no spacing, in fact they overlap each other a little bit. Both these problems makes it hard to navigate using the pagination buttons. Below I've pasted my dataTables initialization code. Can someone see what I'm doing that's messing up the pagination buttions? If you can offer any hints, pointers or ideas that would be very helpful!!
Thanks in advance,
Doug

Here is my table initialization code:

[code]
$table_new_orders.dataTable({
"bJQueryUI": true,
"iDisplayLength": 10,
"bProcessing": true,
"sDom": '<"H"<"processing"r>p>t<"F"<"info"i>>',
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bScrollCollapse": true,
"bServerSide": true,
"sAjaxSource": mp.base_path + "station/getOrders",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": "json",
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"fnPreDrawCallback": function () {
$.blockUI({
theme: true,
title: "Populating Table, please wait...",
message: "  Please Wait...",
timeout: 30000
});
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$("td:eq(0)", nRow).addClass("center order_id");
$("td:eq(1)", nRow).addClass("center filename");
$("td:eq(2)", nRow).addClass("center state_id");
$("td:eq(3)", nRow).addClass("center download").html("Download");
},
"fnDrawCallback": function () {
$.unblockUI();
$table_new_orders.find("td.download button").button();
},
"aaSorting": [
[0, "desc"]
],
"aoColumns": [{ // order ID
"mDataProp": "order_id",
"sClass": "center",
"sWidth": "15%"
}, { // filename
"mDataProp": "filename",
"bSortable": false,
"sClass": "center reference",
"sWidth": "55%"
}, { // state
"mDataProp": "state_id",
"bSortable": false,
"sClass": "center reference",
"sWidth": "15%"
}, { // download button
"mDataProp": "button",
"bSortable": false,
"sClass": "center order_id",
"sWidth": "15%"
}]
});
[/code]

viperx1967

Looks like you are having the same issue with the full_number pagination. I have an issue where my all of my pagination seems to run together there is no space between them at all. so it looks like a jumbled mess. I am using the following init for my datatable and am using the latest version of your dataTables.js file.
[code]$("#myDataTable").dataTables({
"bJQueryUI":true,
"bSort":false,
"bPaginate":true,
"sPaginationType":"full_numbers"
});[/code]

What i get on my pagination is [First][Previous][1][2][3][Next][Last] but all of my paging menu options seem to be run together so i get a jumbled mess at the bottom. I am testing in IE 9 and Firefox 4.0.1

Any help would be greatly appreciated.

viperx1967

Found the fix under a different thread.
.paging_full_numbers .ui-button {
padding: 2px 6px;
margin: 0;
cursor: pointer;
* cursor: hand;
}

allan

The media/css/demo_table_jui.css and media/css/jquery.dataTables_themeroller.css files that are included in the DataTables zip file might be of some use here.

Allan