jquery.datatables添加页面跳转的功能

ゝ一世哀愁。 2022-06-16 10:46 224阅读 0赞

给 jQuery.datatables 添加跳转页面功能

1)定义添加页面跳转功能的方法

function appendSkipPage() {
        var table = $("#tableId").dataTable();   
        var template =
            $("<li class='paginate_button active'>" +
                "   <div class='input-group' style='margin-left:3px;'>" +
                "       <span class='input-group-addon' style='padding:0px 8px;background-color:#fff;font-size: 12px;'>跳转页</span>" +
                "       <input type='text' class='form-control' style='text-align:center;padding: 8px 2px;height:30px;width:40px;' />" +
                "       <span class='input-group-addon active' style='padding:0px 8px;'><a href='javascript:void(0)'> Go </a></span>" +
                "   </div>" +
                "</li>");
    
        template.find("a").click(function () {
            var pn = template.find("input").val();
            if (pn > 0) {
                --pn;
            } else {
                pn = 0;
            }
            table.fnPageChange(pn);
        });
    
        $("ul.pagination").append(template);
    }

2)将 appendSkipPage方法在drawCallback中调用

"drawCallback": function () {
    	appendSkipPage();
    }

3)效果图如下

![Center][]  
  
注意： 代码中的class样式input-group,input-group-addon,form-control来自bootstrap,请结合自己的前端框架修改显示效果

[Center]: /images/20220616/75d2927670524cad9d2b2c021f18c463.png

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 WordPress添加外链go跳转功能

方法一：纯代码实现首先，在自己的wordpress网站的根目录下新建一个go.php文件，在go.php里面输入以下代码 <table> <tbody> <

╰半橙微兮°/ 2024年03月16日 16:32/ 0 赞/ 55 阅读

相关 springboot 页面跳转注解_SpringBoot跳转页面

1、说道跳转，先说一下springBoot web的结构 ![Image 1][] image.png 其中static 中放的是可一直接访问的数据 ,比如\[htt

ゝ一世哀愁。/ 2023年01月09日 12:45/ 0 赞/ 264 阅读

相关 springboot 页面跳转注解_SpringBoot跳转页面

1、说道跳转，先说一下springBoot web的结构 ![Image 1][] image.png 其中static 中放的是可一直接访问的数据 ,比如\[htt

刺骨的言语ヽ痛彻心扉/ 2022年11月19日 09:50/ 0 赞/ 314 阅读

相关 php表单跳转页面跳转页面跳转页面跳转,html中一个form下两个跳转页面

问题说明：在html开发中，经常碰到同一个form表单下，不同按钮跳转不同界面，如下 ![3b2afef13409193c29d0759b8abcfff3.png][]，

太过爱你忘了你带给我的痛/ 2022年11月17日 10:16/ 0 赞/ 298 阅读

相关 jquery.datatables添加页面跳转的功能

给 jQuery.datatables 添加跳转页面功能 1)定义添加页面跳转功能的方法 function appendSkipPage() { v

ゝ一世哀愁。/ 2022年06月16日 10:46/ 0 赞/ 225 阅读

相关 Spring boot添加员工页面跳转

页面跳转单击添加按钮，跳转到添加页面可以选择员工的公寓，需要把公寓信息传递过去添加按钮 <h2><a class="btn btn-sm btn-s

深碍√TFBOYSˉ_/ 2022年05月14日 12:46/ 0 赞/ 222 阅读

相关 ionic3的页面跳转功能

最劲再用 ionic3 + angular4 开发小程序，这期间遇到了一些坑，下边总结一下页面间跳转的文档前提：（1）首先要引用“导航控制器” `Nav

清疚/ 2022年04月15日 00:46/ 0 赞/ 228 阅读

相关页面跳转

如果没有登录或者登录信息失效，则在Filter中跳转到登录页 String userInfo = getCookieValue("usertokenss",

缺乏、安全感/ 2022年01月23日 14:11/ 0 赞/ 483 阅读

相关页面的跳转

asp.net默认的情况使用redirect，其状态为302，这个跳转对搜索引擎来说是一个临时跳转。如果我们需要对搜索引擎更友好，就要使用301的跳转，在 asp.net使用

Myth丶恋晨/ 2021年10月18日 07:20/ 0 赞/ 488 阅读

相关页面跳转

第一种： <script language="javascript" type="text/javascript"> window.location.h

野性酷女/ 2021年07月25日 00:43/ 0 赞/ 700 阅读