bootstrap datatables paging style change

Question

My pagination in bootstrap table is working fine. Except that I need to modify it a bit. Currently I have some pages and following is the style that I am getting.

First   Previos 1   2   3   ….  4   Next    Last

I want to remove the .... and show only certain pages at a time.
First Load -

First   Previos 1   2   3   4   Next    Last   

When user clicks page 3 - only then page 5 will be available, like this

First   Previos 2   3   4   5   Next    Last

Is this achievable here?

Answer 1

This should get you going, your controls will all be customized within jquery.

$.fn.pageMe = function(opts) {
  var $this = this,
    defaults = {
      perPage: 7,
      showPrevNext: false,
      numbersPerPage: 4,
      hidePageNumbers: false,
      showFirstLast: true
    },
    settings = $.extend(defaults, opts);

  var listElement = $this;
  var perPage = settings.perPage;
  var children = listElement.children();
  var pager = $('.pagination');

  if (typeof settings.childSelector != "undefined") {
    children = listElement.find(settings.childSelector);
  }

  if (typeof settings.pagerSelector != "undefined") {
    pager = $(settings.pagerSelector);
  }

  var numItems = children.size();
  var numPages = Math.ceil(numItems / perPage);

  pager.data("curr", 0);

  if (settings.showFirstLast) {
    $('<li><a href="#" class="first_link">First</a></li>').appendTo(pager);
  }
  if (settings.showPrevNext) {
    $('<li><a href="#" class="prev_link">Previous</a></li>').appendTo(pager);
  }

  var curr = 0;
  while (numPages > curr && (settings.hidePageNumbers == false)) {
    $('<li><a href="#" class="page_link">' + (curr + 1) + '</a></li>').appendTo(pager);
    curr++;
  }

  if (settings.numbersPerPage > 1) {
    $('.page_link').hide();
    $('.page_link').slice(pager.data("curr"), settings.numbersPerPage).show();
  }

  if (settings.showPrevNext) {
    $('<li><a href="#" class="next_link">Next</a></li>').appendTo(pager);
  }
  if (settings.showFirstLast) {
    $('<li><a href="#" class="last_link">Last</a></li>').appendTo(pager);
  }

  pager.find('.page_link:first').addClass('active');
  pager.find('.prev_link').hide();
  if (numPages <= 1) {
    pager.find('.next_link').hide();
  }
  pager.children().eq(2).addClass("active");

  children.hide();
  children.slice(0, perPage).show();

  pager.find('li .page_link').click(function() {
    var clickedPage = $(this).html().valueOf() - 1;
    goTo(clickedPage, perPage);
    return false;
  });
  pager.find('li .first_link').click(function() {
    first();
    return false;
  });

  pager.find('li .prev_link').click(function() {
    previous();
    return false;
  });
  pager.find('li .next_link').click(function() {
    next();
    return false;
  });
  pager.find('li .last_link').click(function() {
    last();
    return false;
  });

  function previous() {
    var goToPage = parseInt(pager.data("curr")) - 1;
    goTo(goToPage);
  }

  function next() {
    goToPage = parseInt(pager.data("curr")) + 1;
    goTo(goToPage);
  }

  function first() {
    var goToPage = 0;
    goTo(goToPage);
  }

  function last() {
    var goToPage = numPages - 1;
    goTo(goToPage);
  }

  function goTo(page) {
    var startAt = page * perPage,
      endOn = startAt + perPage;

    children.css('display', 'none').slice(startAt, endOn).show();

    if (page >= 1) {
      pager.find('.prev_link').show();
    } else {
      pager.find('.prev_link').hide();
    }

    if (page < (numPages - settings.numbersPerPage)) {
      pager.find('.next_link').show();
    } else {
      pager.find('.next_link').hide();
    }

    pager.data("curr", page);

    if (settings.numbersPerPage > 1) {
      $('.page_link').hide();

      if (page < (numPages - settings.numbersPerPage)) {
        $('.page_link').slice(page, settings.numbersPerPage + page).show();
      } else {
        $('.page_link').slice(numPages - settings.numbersPerPage).show();
      }
    }

    pager.children().removeClass("active");
    pager.children().eq(page + 2).addClass("active");

  }
};

$(document).ready(function() {

  $('#myTable').pageMe({
    pagerSelector: '#myPager',
    showPrevNext: true,
    hidePageNumbers: false,
    perPage: 10
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
          </tr>
        </thead>
        <tbody id="myTable">
          <tr class="info">
            <td>1</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="success">
            <td>5</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>7</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>8</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="warning">
            <td>9</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>10</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="danger">
            <td>3</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="success">
            <td>5</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>7</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>8</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="success">
            <td>9</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>10</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="success">
            <td>5</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>7</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="warning">
            <td>8</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>9</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>10</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="danger">
            <td>3</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="success">
            <td>5</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>7</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="danger">
            <td>8</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>9</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>10</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="info">
            <td>1</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="danger">
            <td>3</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="success">
            <td>5</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>7</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="warning">
            <td>8</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>9</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>10</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
          <tr class="danger">
            <td>2</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-md-12 text-center">
      <ul class="pagination" id="myPager"></ul>
    </div>
  </div>
</div>