Pagination Buttons Issue

wekkaw

Hello there,

This is my first post on this forum, even though I've been using the plugin for over two years.
I use the plugin to display search results with pagination. The issue is the paginating buttons are displayed in the wrong order. I've tried many tricks with css but nothing seems to solve it. Here is a screen shot of the page and I've highlighted the issue area in red: http://picasaweb.google.com/lh/photo/XtzL3KjlaEFXbjt-F5vxgw?feat=directlink

Normally I would expect to get the 'Previous' button "<<" then followed by the 'Next' button ">>", however I'm getting them in the reverse order and displayed as ">>" "<<".

Here is the code I'm using to render the table:
[code]
var tempTable1;
$(document).ready(function(){
tempTable1 = $('#tbl_pa_actions').dataTable({
"bSort": true,
"iDisplayLength": 10,
"bJQueryUI": true,
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bInfo": true,
"bAutoWidth": false,
"sDom": '<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"fl>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ipr>'
});`

$(".dataTables_filter").css("float","right");
$(".dataTables_info").css("float","left");
$(".dataTables_length").css("float", "left");

$("#tbl_pa_actions_next").css("float","right");
$("#tbl_pa_actions_previous").css("float","right");

});
[/code]

Any help is greatly appreciated.

Wekkaw

iuliandum

Try tu put
[code]
$("#tbl_pa_actions_next").css("float","right");
[/code]

after

[code]
$("#tbl_pa_actions_previous").css("float","right");
[/code]

wekkaw

Thanks for the response iuliandum.

I had tried your suggestion and I just tried it again and the arrows are still displayed facing each other.

Any other idea?

Thanks,
Wekkaw

wekkaw

Anybody?

iuliandum

Try this example
http://datatables.net/forums/comments.php?DiscussionID=2233&page=1#Item_2

wekkaw

Forgive me for the ignore, but how do I use your plugin?

iuliandum

Very simple. First you put plugin outside of $(document).ready(function() {...)}. Then change demo_table.css file with example in that thread. If you want images (ex. first_disabled.jpg , ...) give me email address.

wekkaw

Still trying to solve this some how.

My latest attempt was to move the 'previous' button to the left of the 'next' button, without a luck.
This is how I attempted that:
[code]
$('.ui-icon-circle-arrow-w').insertBefore($('.ui-icon-circle-arrow-e'));
[/code]

That resulted the buttons to be displayed one on the top of the other.

Any suggestion?

Thanks,