Replacing pagination icons with custom classes not working

cortez

Hi,

I'm using two_button pagination and trying to replace the icons for the buttons with my own custom classes. I can successfully change the icons using the Bootstrap 'chevron' icons like this:

[code]
$(document).ready(function() {
$.fn.dataTableExt.oJUIClasses.sPageJUIPrev = "icon-chevron-left";
$.fn.dataTableExt.oJUIClasses.sPageJUINext = "icon-chevron-right";
oTable = $('.table').dataTable( {
"bJQueryUI": true,
"sPaginationType": "two_button",
// ...
// ...
});
});
[/code]

However if I use my own CSS classes nothing appears. I define my classes like this:

[code]
.left_button {
background-image: url(/path/to/left_button.png);
}

.right_button {
background-image: url(/path/to/right_button.png);
}
[/code]

and then use them like this:

[code]
$.fn.dataTableExt.oJUIClasses.sPageJUIPrev = "left_button";
$.fn.dataTableExt.oJUIClasses.sPageJUINext = "right_button";
[/code]

Should I even expect this to work?

Best,
Christopher

cortez

I neglected to include an example, apologies. I've attempted to reproduce the issue here:

http://live.datatables.net/oxudak/4/edit#source

I added the urls for the relevant images in the CSS in the HTML head.

allan

There was an HTML error in the example which stopped it from rendering: http://live.datatables.net/oxudak/5/edit .

Your span elements have no height and width which is why you can't see them. I've added some to the left arrow here:
http://live.datatables.net/oxudak/6/edit

Allan