如何更改分页栏中DataTable中的页面编号？ [英] How to change the Page # in DataTables in the Pagination bar?

问题描述

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

这就是我所获得的远

我想改变页码1和2到略高于分页栏的文字。不知道该怎么做。

这是我的jquery

  $（document）.ready DataTable（{pageLength：5，pagingType：full_numbers，sDom：'<topflp> 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>'，
} 
} 
}）; 
}）; 
  

解决方案

您可以使用

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">',
             }
           }
    });
});

解决方案

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

这篇关于如何更改分页栏中DataTable中的页面编号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！