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

来源：互联网发布：网络电影东北黑社会编辑：程序博客网时间：2024/06/09 15:59

给 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)效果图如下

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

2 0