#endpageUtil是写的velocity toolbox的一个工具类，用来仿Datatables分页条的分页页码显示的逻辑：
public class PageUtil {
public static LinkedList range(Integer len,Integer start) {
LinkedList out = new LinkedList<>();
Integer end;
if (start == null ) {
start = 0;
end = len;
}
else {
end = start;
start = len;
}
for (int i=start ; i numbers (Integer page,Integer pages) {
LinkedList numbers = new LinkedList<>();
Integer buttons = 7;
Integer half = buttons / 2;
if (pages <= buttons ) {
numbers = range( 0, pages );
}
else if ( page <= half ) {
numbers = range( 0, buttons-2 );
numbers.add(-1000);
numbers.add( pages-1 );
}
else if ( page >= pages - 1 - half ) {
numbers = range( pages-(buttons-2), pages );
numbers.addFirst(-1000 ); //向头放
numbers.addFirst(0 );
}
else {
numbers = range( page-1, page+2 );
numbers.add( -1000 );
numbers.add( pages-1 );
numbers.addFirst(-1000 );
numbers.addFirst(0 );
}
List res = new ArrayList<>();
for (Integer integer : numbers) {
res.add(integer+1);
}
return res;
}
}而这段逻辑是从Datatables的js源码中找到的，我将其转化为java代码。Datatables源码的该部分代码如下
function _numbers ( page, pages ) {
var
numbers = [],
buttons = extPagination.numbers_length,
half = Math.floor( buttons / 2 ),
i = 1;
if ( pages <= buttons ) {
numbers = _range( 0, pages );
}
else if ( page <= half ) {
numbers = _range( 0, buttons-2 );
numbers.push( 'ellipsis' );
numbers.push( pages-1 );
}
else if ( page >= pages - 1 - half ) {
numbers = _range( pages-(buttons-2), pages );
numbers.splice( 0, 0, 'ellipsis' ); // no unshift in ie6
numbers.splice( 0, 0, 0 );
}
else {
numbers = _range( page-1, page+2 );
numbers.push( 'ellipsis' );
numbers.push( pages-1 );
numbers.splice( 0, 0, 'ellipsis' );
numbers.splice( 0, 0, 0 );
}
numbers.DT_el = 'span';
return numbers;
}var _range = function ( len, start )
{
var out = [];
var end;
if ( start === undefined ) {
start = 0;
end = len;
}
else {
end = start;
start = len;
}
for ( var i=start ; i我将页面的ajax请求分页的数据做了封装：
/**
*
*/
//macro分页跳页调用方法，调用的页面需要提供goPage(redirectpage)方法
function jumpPage(totalPage) {
var redirectpage = $("#changePage").val();
if(redirectpage == ""){
$("#changePage").focus();
}else{
var rex = /^\d+$/;
if(!rex.test(redirectpage)){
alert("页码输入有误，只能输入不大于总页数的正整数");
}else{
var pageNo = parseInt(redirectpage);
if(pageNo <= 0 || pageNo > totalPage){
alert("页码输入有误，只能输入不大于总页数的正整数");
}else{
goPage(redirectpage)
}
}
}
}
$.fn.pagenation = function(options) {
//默认参数
var defaults={
url:"",
data:{},//参数
pageNo:1,//页码
pageSize:10,//页面大小
pageSuccess:{}//分页数据成功返回的回调函数
}
var _self = $(this);
options = $.extend(defaults,options);
var ajaxData = {
"pageNo":options.pageNo,
"pageSize":options.pageSize
};
this.fnDraw = function(pageNo) {
if (typeof (options.data) == 'function') {
ajaxData = options.data(ajaxData);
} else {
ajaxData = $.extend(ajaxData,options.data);
}
if (pageNo != undefined) {
ajaxData['pageNo'] = pageNo;
}
$.ajax({
url: options.url,
async: false,
type:"post",
data: ajaxData,
success: function(result,code,dd) {
_self.html(result);
if (typeof options.pageSuccess == 'function') {
options.pageSuccess();
}
},
error:function(){
alert("操作失败");
}
});
};
this.init = function() {
this.fnDraw(1);
return this;
}
return this;
}在主页面调用：
Insert title here
#set($ctx = ${request.getContextPath()})
var pagenation = $("#pageDiv").pagenation({
url:"${ctx}/listData.do",
pageSize:20,
data:function (data) {
$("#searchForm [name]").each(function(i, n){
data[$(n).attr('name')] = n.value;
});
return data;
},
pageSuccess:function(){
}
}).init();
function goPage(pageNo) {
pagenation.fnDraw(pageNo);
}
其中pageSuccess参数是用来在ajax返回数据成功后，需要做的一些操作。
以上是“springMVC+velocity如何实现Datatables局部刷新分页方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
分享名称：springMVC+velocity如何实现Datatables局部刷新分页方法
浏览地址：http://www.cdkjz.cn/article/isjpes.html
