datatables提供了自定义的翻页功能,可是在实际使用中可能不能满足我们的需求,现在就需要输入页面,跳到输入页码的功能,经过百度帮组实现功能,首先找到DT_bootstrap.js文件,大概在130行左右,我们可以添加自定义的功能,具体代码如下:
$(nPaging).append( '<ul class="pagination">' + '<li class="prev disabled"><a href="#" title="' + oLang.sFirst + '"><i class="fa fa-angle-double-left"></i></a></li>' + '<li class="prev disabled"><a href="#" title="' + oLang.sPrevious + '"><i class="fa fa-angle-left"></i></a></li>'+ '<li class="next disabled"><a href="#" title="' + oLang.sNext + '"><i class="fa fa-angle-right"></i></a></li>' + '<li class="next disabled"><a href="#" title="' + oLang.sLast + '"><i class="fa fa-angle-double-right"></i></a></li>' + '<li class="prev next disabled"><input style="padding:5px 3px;height:33px;width:50px;margin-left: -1px;" class="gopage form-control"/><i style="padding:5px 8px;" class="go btn">go</i></li>'+ '</ul>' ); //datatables分页跳转 $(nPaging).find(".go").click(function(e){ var ipage = parseInt($(".gopage").val()); var oPaging = oSettings.oInstance.fnPagingInfo(); if(oPaging.iTotalPages<ipage){ $(".gopage").val(oPaging.iTotalPages); ipage=oPaging.iTotalPages; } if(!ipage||ipage<1){ $(".gopage").val(1); ipage=1; } oSettings._iDisplayStart = (ipage-1) * oPaging.iLength; fnDraw( oSettings ); });
我们在自定义翻页的后面添加一个input框,后面跟一个按钮,给这个绑定一个click事件,当点击时,读取输入的值,把值转成数字类型,如果值大于最大页码数就把最大页码数赋给此值,如果值为NAN或者小于1,就把此值赋值为1,然后获取数据。
注意:页面需要自己加样式,这个自己调整