How to use the JQuery DataTables “input” plugin wi

问题:

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?

回答1:

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

回答2:

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