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