如何使用JQuery DataTables“输入” DataTables 1.10的插件 [英] How to use the JQuery DataTables "input" plugin with DataTables 1.10

问题描述

创建了jQuery DataTables

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

解决方案

为了获得漂亮的按钮而不是文本。我在下一路上更改了源代码。
我使用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]; //添加了这一行，因此输入字段只接受数字
  

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?

解决方案

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  

这篇关于如何使用JQuery DataTables“输入” DataTables 1.10的插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！