datatables跳转到多少页功能

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,然后获取数据。

注意:页面需要自己加样式,这个自己调整

猜你喜欢

转载自l821398100.iteye.com/blog/2286297