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 want to do something like below.

This is what I've gained so far

I am trying to change page numbers 1 and 2 to somewhat above pagination bar with the text. Not sure how to do it.

This is my Jquery

$(document).ready(function() {
    $('#esignTable').DataTable({"pageLength":5, "pagingType":"full_numbers", "sDom": '<"top"flp>rt<"bottom"i><"clear">', "oLanguage": { 
        "sEmptyTable": " ", 
        "oPaginate": {
               "sNext": '<img src="../images/integration/SlowRight.jpg">',
               "sPrevious": '<img src="../images/integration/SlowLeft.jpg">',
               "sFirst": '<img src="../images/integration/FastLeft.jpg">',
               "sLast": '<img src="../images/integration/FastRight.jpg">',
             }
           }
    });
});

回答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_paginate input {
  width: 40px;
}

The result looks like this

回答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:"<"}}
        } );

     } );

来源：https://stackoverflow.com/questions/44789753/how-to-change-the-page-in-datatables-in-the-pagination-bar

标签

javascript

html

css

pagination

datatables