如何在DataTables 1.10中使用JQuery DataTables“input”插件

Posted 2021-04-24

创建jQuery DataTables "input" plugin是为了允许手动用户在分页显示器上输入页码，此外还有典型的第一个，上一个，下一个，最后一个按钮。默认显示屏显示下一页和最后一页，当前页码旁边有几个页码按钮，所以如果您在第10页，可能会有标有“11”，“12”和“13”按钮的按钮。但是如果你想进入2000年第1000页怎么办？没有简单的方法去那里。这是输入插件的动机。

但是，此代码是为DataTables的“遗留”版本编写的，该版本是1.10之前的版本。我的应用程序是为较新版本编写的。

页面上引用的示例使用1.10之前的语法：

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

我尝试按照新语法的方式进行微不足道的修改

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

但它不起作用。可以肯定的是，输入页码有效，但所有其他按钮都被打破，呈现为文本：

有没有一种简单的方法可以让这个插件与更新的DataTables一起使用，还是有更好的方法在该环境中获得此功能？

答案

在我的情况下http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css失踪了。添加后，一切正常。

另一答案

为了获得漂亮的按钮而不是文本。我在下一路上更改了源代码。我使用FontAwsome图标

.
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