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

给 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,请结合自己的前端框架修改显示效果