jQuery DataTables插件分页允许输入页码跳转

背景说明

项目中使用jQuery DataTables插件来实现分页表格，但是默认的分页样式不能输入页码进行跳转，在页数非常多的时候使用很不方便，最主要的还是没有达到产品部门的设计要求，所以我需要寻找相应的解决方案。

 

原始效果图

目标效果图

方案分析

一开始，我在网上搜索到了相关资料。

 

【官方】Navigation with text input

https://www.datatables.net/plug-ins/pagination/input

这个是jQuery DataTables官方提供的插件，虽然实现了输入页码跳转的功能，但是和我目标效果不一致

 

【CSDN】DataTables页码后面添加可输入页码跳转

http://blog.csdn.net/cw370008359/article/details/51516427

这个方案是直接修改jquery.datatables.js的源码，在原有分页的后面添加输入框，然后在表格加载完成事件fnDrawCallback中为输入框添加事件。

 

本来，我想沿用官方的方式，单独写一个插件，这样不会污染DataTables插件原有代码，但是实在是水平有限，所以采用了CSDN直接修改插件代码的方式。

• 在添加输入框的原理上和CSDN博客描述的一致
• 但是对于事件的处理，不在fnDrawCallback中进行，而是直接在添加输入框之后，紧接着根据id对输入框和确认按钮进行事件设置
• 而且CSDN博客中的事件代码在我这个版本的DataTables插件中无法执行，我转而参考了官方插件的事件代码，最终形成了我的方案

插入代码

注意：我使用的是DataTables 1.10.12版本，不同版本实现可能不同。

1. // START 2016-12-27添加，用于输入分页页码
2. $(".gotoPage").remove();
3. var pageHtml = "<span class='gotoPage' style='margin-left: 10px;'>" +
4. "<span>到第</span>" +
5. "<input type='text' style='width: 40px; padding-left: 2px; padding-right: 2px; text-align: center;' class='integer' id='textGotoPage' data-prev='"+(page+1)+"' value='"+(page+1)+"'>" +
6. "<span>页</span>" +
7. "<a class='paginate_button' style='width: 40px; border-right: 1px solid #e4e4e4;' id='btnGotoPage'>确认</a>" +
8. "</span>";
9. $(pageHtml).appendTo(container);
10. // 对页码输入进行限制，只能输入数字
11. var sfn = function() {
12. var value = $(this).val();
13. if (value == '') {
14. $(this).data("prev", $(this).val());
15. return;
16. }
17. var max = $(this).attr("maxlength");
18. if (value.length > max)
19. $(this).val(value.slice(0, max));
20. var regex = /^\d+$/;
21. if (!regex.test(value)) {
22. $(this).val($(this).data("prev"));
23. }
24. $(this).data("prev", $(this).val());
25. };
26. var testinput = document.createElement('input');
27. if('oninput' in testinput){
28. document.getElementById("textGotoPage").addEventListener("input", sfn, false);
29. } else {
30. $("#textGotoPage").onpropertychange = sfn;
31. }
32. // 为确认按钮添加点击事件，执行分页跳转
33. $("#btnGotoPage").click(function(){
34. var textGotoPage = $("#textGotoPage").val();
35. if (textGotoPage == null || textGotoPage === '' || textGotoPage.match(/[^0-9]/)) {
36. // 没有输入或者输入了非数字，清除非数字
37. $("#textGotoPage").val(textGotoPage.replace(/[^\d]/g, ''));
38. return;
39. }
40. if(parseInt(textGotoPage) > 0){
41. var oSettings = settings;
42. var iNewStart = oSettings._iDisplayLength * (textGotoPage - 1);
43. if (iNewStart < 0) {
44. iNewStart = 0;
45. }
46. if (iNewStart >= oSettings.fnRecordsDisplay()) {
47. iNewStart = (Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;
48. }
49. oSettings._iDisplayStart = iNewStart;
50. _fnDraw(oSettings);
51. }
52. });
53. // END