Adjusting the Page Number Displayed in the Pagination Bar of DataTables

Question

Adjusting the Page Number Displayed in the Pagination Bar of DataTables

I'm in the process of customizing the pagination bar using DataTables. I've successfully added images for the Previous/Next buttons, but I want to change the appearance of the page numbers.

https://i.sstatic.net/WsLf5.jpg

Here is what I have accomplished so far:

https://i.sstatic.net/HsmTt.jpg

I am attempting to position page numbers 1 and 2 above the pagination bar with accompanying text. I am unsure how to achieve this.

This is my Jquery code:

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

javascript html css pagination datatables

Answer 1

Answer №1

If you want to implement pagination input in your DataTable, you can utilize the input pagination plugin. Below 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>'
    }
  }   
})

You can view a demo of this implementation at http://jsfiddle.net/s19r61z7/

In the demo, I have included

https://cdn.datatables.net/plug-ins/1.10.15/pagination/input.js

for reference.

I opted to use Font Awesome icons instead of images in this example, but you can customize it as per your preferences. To achieve this, I added

http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

.

You can further customize the appearance using plain CSS, like so:

.dataTables_paginate input {
  width: 40px;
}

The final result will resemble something like this:

https://i.sstatic.net/KhpnM.png

Answer 2

If you want to implement pagination input in your DataTable, you can utilize the input pagination plugin. Below 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>'
    }
  }   
})

You can view a demo of this implementation at http://jsfiddle.net/s19r61z7/

In the demo, I have included

https://cdn.datatables.net/plug-ins/1.10.15/pagination/input.js

for reference.

I opted to use Font Awesome icons instead of images in this example, but you can customize it as per your preferences. To achieve this, I added

http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

.

You can further customize the appearance using plain CSS, like so:

.dataTables_paginate input {
  width: 40px;
}

The final result will resemble something like this:

https://i.sstatic.net/KhpnM.png

Answer 3

Answer №2

After stumbling upon your post on datatables.net, I realized that my sample below is actually functional. Take a look at it here: http://jsbin.com/rireyog/edit?js,output

If you integrate my callback handler into your code, you should be able to achieve your desired outcome.

The callback function updates the appended span and then consistently returns "" to clear out the actual info block.

If time isn't an issue, you might consider creating a more visually appealing 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:"<"}}
        } );

     } );

Answer 4

After stumbling upon your post on datatables.net, I realized that my sample below is actually functional. Take a look at it here: http://jsbin.com/rireyog/edit?js,output

If you integrate my callback handler into your code, you should be able to achieve your desired outcome.

The callback function updates the appended span and then consistently returns "" to clear out the actual info block.

If time isn't an issue, you might consider creating a more visually appealing 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:"<"}}
        } );

     } );

Adjusting the Page Number Displayed in the Pagination Bar of DataTables

Answer №1

Answer №2

Similar questions

Prioritizing the validation of form controls takes precedence over redirecting to a different URL in Angular 2

Retrieve the unique identifier of the dynamically created button

Ionic: setInterval/setTimer not functioning after 5 minutes in the background

AngularJS: Toggle footer visibility with custom message

Sending two files to a Node server and retrieving a file through an ajax request

Angular 5 arrays within arrays

Adjusting the size of menus and text on the screen

Simplifying complex JSON structures by un-nesting arrays

Interactive canvas feature in a browser window with scrolling capabilities (drag and drop functionality)

Utilizing JQuery to Modify XML File Content

A guide on extracting certain fields and values from a JSON structure

Send the component to the Angular directive

JavaScript code to find a date within a specified range

Creating an image using tiles in HTML

Tips for Looping through an Object within another Object

What is the best way to display a chosen item in a text input field?

One method to retrieve the id from the database when the button is clicked using ajax

Is it possible to bind a function to data in Vue js?

Stopping the mouse from scrolling

Use the :target selector to target HTML elements with various unique IDs