AlloyUI : Customize pagination component

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><a href="#">Prev</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">Next</a></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>');