Issue about Relayouting Pagination Controls

sd_zuo

During the user experience test, I found there're some inconvenience when operating the pagination controls.

Now the full_numbers controls' layout is
[code]
[First][Prev]1, 2, 3, 4, 5[Next][Last]
[/code]
And I place the pagination controls at the LEFT side on top of the table.

As we clicking the "next" button, the page numbers increase to two digits, like the following:
[code]
[First][Prev]6, 7, 8, 9, 10[Next][Last]
[/code]
You can see that the "Next" button is slided to the right. Then we have to move the mouse rightward as well when we are going to click the "Next" again. And after "Next" is hit once more, it slides rightward again.
[code]
[First][Prev]7, 8, 9, 10, 11[Next][Last]
[/code]
Hence we have to move the mouse again to the right if we want to access the next page.
Is it possible to have the page number buttons fixed width, so we don't have to busy adjusting the mouse pointers?

allan

Yes indeed it is. Just use something like this CSS:

[code]
div.dataTables_paginate span span.ui-button {
display: inline-block;
width: 18px;
}
[/code]
Allan

sd_zuo

Thanks for the info.
There's no 'ui-button' class on the pagination numbers.
Finally I came up with the following results.
I guess that you should add the first rule into the DataTables.css file to make the buttons look right on IE.
[code]
div.paging_full_numbers span {
display: inline-block;
}
div.paging_full_numbers span span.fg-button {
width: 18pt;
text-align: center;
}
[/code]

allan

Ah sorry - I had assumed jQuery UI theming was enabled. In that case yup - your CSS will do the trick nicely. Nice one :-)

Allan