如何在 DataTables 1.10 中使用 JQuery DataTables“输入”插件答案

【问题标题】：How to use the JQuery DataTables "input" plugin with DataTables 1.10如何在 DataTables 1.10 中使用 JQuery DataTables“输入”插件
【发布时间】：2015-09-10 14:46:49
【问题描述】：

创建 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 一起使用，或者有没有更好的方法在那个环境中获得这个功能？

【问题讨论】：

你能分享一个小提琴吗？
在这里工作正常 -> jsfiddle.net/fbyjcuLu
嗯，谢谢，这非常简单和干净。不确定我的代码中有什么破坏了它。无论如何，这是一个开始的地方。我正在使用 ajax 等，但这不应该影响这一点。
@SteveCohen，不，AJAX 等不应该。我尝试了几个 1.10.x 版本，从 1.8.x 到 2.x 边缘的 jQuery - 似乎一直有效。所以你必须有其他东西破坏插件。
@davidkonrad - 我已经从我的页面上清除了很多垃圾，但问题仍然存在。我几乎可以肯定这个问题与 Bootstrap 有关。有什么方法可以将 Bootstrap 添加到您的小提琴中吗？我有兴趣看到结果。但是 Bootstrap 不是您可以在页面上添加的小提琴选项之一。抱歉，我既不是 JS 也不是 Fiddle 专家。

标签： jquery jquery-plugins datatables

【解决方案1】：

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

【讨论】：

【解决方案2】：

为了获得漂亮的按钮而不是文本。我在下一个方式更改了源代码。我为此使用 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

【讨论】：