AlloyUI : Customize pagination component - pagination

Question

Im working with an Alloy UI pagination component in Liferay 6.2 and i was trying to customize the prev and nextc controls, i have something like this :
<div id="myDataTable"></div>
<div id="pagination" class="aui-pagination aui-pagination-centered">
<ul class="aui-pagination-content">
<li>Prev</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>Next</li>
</ul>
</div>
Where myDataTable is ...a DataTable component
and then the YUI code:
new Y.Pagination({
contentBox: '#pagination .aui-pagination-content',
circular:false,
page: 1,
strings: {
prev:'«',
next: '»',
},
on: {
changeRequest: function(event) {
if (event.state.page === 1) {
dataTable.set('data', data1);
} else if (event.state.page === 2) {
dataTable.set('data', data2);
} else if (event.state.page === 3) {
dataTable.set('data', data3);
}
}
},
total:3
}).render();
What i want to do is to hide all the pages in the pagination and just have the prev and next controls with a background image, i have noticed that you can change the controls by changing the strings on the YUI code but it only allows ASCII characters and i need to include images or a way to insert css code there. Any help will be really appreciated.

Answer 1

Probably you can do this using CSS. The left navigation button will be first child and the right button will be the last child of pagination-content class. After calling the render method you can set the innerHTML of the navigation buttons through JS
Y.one('.pagination-content .pagination-control:first-child').setHTML('<div>Content of left navigation button</div>');
Y.one('.pagination-content .pagination-control:last-child).setHTML('<div>Content of right navigation button</div>');