如何更改分页栏中数据表中的页码？

Question

我正在使用DataTables 更改分页栏的默认外观。我已经能够为“上一个/下一个”按钮插入图像，但对于实际的页码，我想做如下的事情。

这是我到目前为止所获得的

我正在尝试将页码 1 和 2 更改为略高于带有文本的分页栏。不知道该怎么做。

这是我的 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">',
             }
           }
    });
});

Answer 1

直到我在 datatables.net 上看到您的帖子后才看到这一点，但无论如何，下面的示例正在运行，您可以在 http://jsbin.com/rireyog/edit?js,output 看到它

如果你将我的回调处理程序复制到你的代码中，它应该会让你接近你想要到达的地方。

回调更新附加的 span 然后总是返回 "" 以清除实际的信息块。

如果你不着急，也许可以用 bootstrap 和 fontawsome 代替图标来设计一个更漂亮的。

$(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:"<"}}
        } );

     } );

Answer 2

您可以使用input pagination plugin。这是一个例子

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>'
    }
  }   
})  

演示 -> http://jsfiddle.net/s19r61z7/

简单地将https://cdn.datatables.net/plug-ins/1.10.15/pagination/input.js 包含在小提琴中。

使用 Font Awesome 代替图像，但这只是一种选择（没有任何图像）。这是通过包含http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

可以通过纯 CSS 进行进一步控制，例如

.dataTables_paginate input {
  width: 40px;
}

结果是这样的