How To Change The Page # In Datatables In The Pagination Bar?

I am changing the default look and feel of the pagination bar using DataTables. I've been able to insert the images for the Previous/Next buttons but for the actual page numbers I

Solution 1:

You can use the input pagination plugin. Here is an example

var table = $('#example').DataTable({
  pagingType: 'input',
  pageLength: 5,
  language: {
    oPaginate: {
       sNext: '<i class="fa fa-forward"></i>',
       sPrevious: '<i class="fa fa-backward"></i>',
       sFirst: '<i class="fa fa-step-backward"></i>',
       sLast: '<i class="fa fa-step-forward"></i>'
    }
  }   
})  

demo -> http://jsfiddle.net/s19r61z7/

Have simply included https://cdn.datatables.net/plug-ins/1.10.15/pagination/input.js to the fiddle.

Have used Font Awesome instead of images, but that is just a choice (dont have any images). It is done by including http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

Further control can be done by plain CSS, like

.dataTables_paginateinput {
  width: 40px;
}

The result looks like this

Solution 2:

I did not see this until after I saw your post on datatables.net but in any case, the sample below is working and you can see it at http://jsbin.com/rireyog/edit?js,output

If you copy my callback handler into your code, it should get you close to where you are trying to get to.

The callback updates the appended span then always returns "" to clear out the actually info block.

If you are not in a hurry, probably can come up with a nicer looking one using bootstrap and fontawsome instead of icons.

$(document).ready(function() {

    var table = $('#example').DataTable( {
        dom:"tip",
        data:dataset.data,
        select:"multi",
        "columns": [
            { "data": "name", "title":"Namee" },
            { "data": "position", "title":"Position" },
            { "data": "office" , "title":"Office"},
            { "data": "extn" , "title":"Phone"},
            { "data": "start_date", "title":"Start" },
            { "data": "salary" , "title":"Salary"} 

        ],

        pagingType:"full",
        "infoCallback": function( settings, start, end, max, total, pre ) {
            var api = this.api();
            var pageInfo = api.page.info();
            var str = 'Page '+ (pageInfo.page+1) +' of '+ pageInfo.pages;
                if($('.paginate_info').length > 0){
                    $('.paginate_info').html(str);
                }
                else {
                    $(".paginate_button.previous").after("<span class='paginate_info'>"+str+"</span>");
                }
                 return"";
            },
           language": {
               "paginate": {  "first": "<<",last:">>",next:">",previous:"<"}}
        } );

     } );