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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值