How to use the JQuery DataTables “input” plugin wi

Question

The jQuery DataTables "input" plugin was created to allow manual user input of a page number on a paginated display in addition to the typical first, previous, next, last buttons. The default display shows next and last, with a few page number buttons adjacent to the current page number, so if you're on page 10, perhaps there would be buttons labeled "11", "12", and "13" buttons. But what if you want to go to page 1000 of 2000? No easy way to get there. That is the motivation of the input plugin.

However, this code was written for the "legacy" version of DataTables, the version prior to 1.10. My application is written for the newer version.

The example quoted on the page uses the pre-1.10 syntax:

$(document).ready(function() {
      $('#example').dataTable( {
          "sPaginationType": "input"
      } );
  } );

I tried making trivial modifications, along the lines of the new syntax

$(document).ready(function() {
      $('#example').DataTable( {
          "paginationType": "input"
      } );
  } );

but it doesn't work. To be sure, the inputting of the page number works, but all the other buttons are broken, rendering as text:

Is there a simple way to get this plugin to work with the newer DataTables, or is there a better way to get this functionality in that environment?

Answer 1

In order to get nice buttons instead text. I changed source code on next way. I use FontAwsome icons for this

.
var firstClassName = 'fa fa-fast-backward';
var previousClassName = 'fa fa-step-backward mx-2';
var nextClassName = 'fa fa-step-forward mx-2';
var lastClassName = 'fa fa-fast-forward';
.
.
// nFirst.innerHTML = language.sFirst;
// nPrevious.innerHTML = language.sPrevious;
// nNext.innerHTML = language.sNext;
// nLast.innerHTML = language.sLast;
.
nInput.type = 'text';
nInput.pattern = "[1-9]"; //added this line so input field accept only numbers  

Answer 2

In my case http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css was missing. After adding it everything worked.