¿Cómo cambiar el número de página en tablas de datos en la barra de paginación?

Estoy cambiando la apariencia predeterminada de la barra de paginación usando DataTables . Pude insertar las imágenes para los botones Anterior / Siguiente pero para los números de página reales quiero hacer algo como a continuación.

enter image description here

Esto es lo que he ganado hasta ahora

enter image description here

Estoy intentando cambiar los números de página 1 y 2 a un poco más arriba de la barra de paginación con el texto. No estas seguro de cómo hacerlo.

Este es mi Jquery

 $(document).ready(function() { $('#esignTable').DataTable({"pageLength":5, "pagingType":"full_numbers", "sDom": 'rt', "oLanguage": { "sEmptyTable": " ", "oPaginate": { "sNext": '', "sPrevious": '', "sFirst": '', "sLast": '', } } }); }); 

Puede usar el plugin de paginación de entrada . Aquí hay un ejemplo

 var table = $('#example').DataTable({ pagingType: 'input', pageLength: 5, language: { oPaginate: { sNext: '', sPrevious: '', sFirst: '', sLast: '' } } }) 

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

Simplemente han incluido https://cdn.datatables.net/plug-ins/1.10.15/pagination/input.js al violín.

Ha usado Font Awesome en lugar de imágenes, pero eso es solo una opción (no tiene ninguna imagen). Se hace incluyendo http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

El control adicional se puede hacer mediante CSS simple, como

 .dataTables_paginate input { width: 40px; } 

El resultado se ve así

enter image description here

No vi esto hasta después de ver su publicación en datatables.net, pero en cualquier caso, el ejemplo siguiente funciona y puede verlo en http://jsbin.com/rireyog/edit?js,output

Si copia mi controlador de callback en su código, debería acercarse a donde está tratando de llegar.

La callback actualiza el tramo adjunto y siempre devuelve “” para borrar el bloque de información real.

Si no tienes prisa, probablemente se te ocurra una más bonita usando bootstrap y fonetica en lugar de 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(""+str+""); } return""; }, language": { "paginate": {  "first": "<<",last:">>",next:">",previous:"<"}} } ); } );