springMVC+velocity实现仿Datatables局部刷新分页方法

springMVC+velocity实现仿Datatables局部刷新分页方法

因为项目中之前的模块用的分页插件是Datatables，很方便，但是新做的模块表格中的布局有变化，Datatables插件满足不了了。为了风格的统一，同时也不希望查询参数再传递回显在页面上，所以就采用局部刷新分页的实现方案。

实现方案是这样的，将表格部分提取出来，用来作为页面局部刷新的部分，文件名为list-data.vm

#foreach($data in $!{page.list})

#end

#pageNation($!{page})

其中的pageNation是定义的一个宏（macro），用来做底部的分页条和分页条的显示逻辑。page对象是ajax请求返回的分页数据。每一次ajax请求，查询出分页数据，将数据放入list-data.vm所对应的视图的ModelAndView对象，然后返回ModelAndView对象，将这一部分追加到主页面表格所在的部分。

macro部分如下：

#macro(pageNation $data)

#if(!$data.list.size() or $data.list.size() == 0)

未查询到记录

#end

#if($data.list.size() and $data.list.size() > 0)

#set($prevPage = ${data.prePage})

#set($nextnPage = ${data.nextPage})

#else class="paginate_button" pageNum="1" href="javascript:goPage(1)" rel="external nofollow"

#end style="margin-left: 2px;"

>首页

#else class="paginate_button" pageNum="1" href="javascript:goPage(1)" rel="external nofollow"

#end style="margin-left: 2px;"

>首页

#else class="paginate_button" pageNum="$prevPage" href="javascript:goPage($prevPage)" rel="external nofollow"

#end style="margin-left: 2px;"

> 上页

#else class="paginate_button" pageNum="$prevPage" href="javascript:goPage($prevPage)" rel="external nofollow"

#end style="margin-left: 2px;"

> 上页

#set($temp = ${data.pageNum} - 1)

#set($numbers = $!{pageUtil.numbers($temp, $data.pages)})

#foreach($foo in $numbers)

#if($foo == -999)

…

#else

> $foo

> $foo

#end

#end

#if($data.pageNum == $data.pages) class="paginate_button disabled" disabled="disabled"

#else class="paginate_button" pageNum="$nextnPage" href="javascript:goPage($nextnPage)" rel="external nofollow"

#end style="margin-left: 2px;"

> 下页

#if($data.pageNum == $data.pages)

class="paginate_button disabled" disabled="disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow"

#else

class="paginate_button" pageNum="$data.pages" href="javascript:goPage($data.pages)" rel="external nofollow"

#end

SAsUJjni>末页

到第

页

确认

#end

#if($data.pageNum == $data.pages) class="paginate_button disabled" disabled="disabled"

#else class="paginate_button" pageNum="$nextnPage" href="javascript:goPage($nextnPage)" rel="external nofollow"

#end style="margin-left: 2px;"

> 下页

#if($data.pageNum == $data.pages)

class="paginate_button disabled" disabled="disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow"

#else

class="paginate_button" pageNum="$data.pages" href="javascript:goPage($data.pages)" rel="external nofollow"

#end

SAsUJjni>末页

#if($data.pageNum == $data.pages)

class="paginate_button disabled" disabled="disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow"

#else

class="paginate_button" pageNum="$data.pages" href="javascript:goPage($data.pages)" rel="external nofollow"

#end

SAsUJjni>末页

到第

页

确认

#end

#end

pageUtil是写的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

out.add(i);

}

return out;

}

public static List numbers (Integer page,Integer pages) {

LinkedList numbers = new LinkedList<>();

Integer buttons = 7;

Integer half = buttons / 2;

if (pages <= buttons ) {

numbers = range( 0, paghttp://es );

}

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 ); SAsUJjni

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

out.push( i );

}

return out;

};

我将页面的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;

}

在主页面调用：

out.add(i);

}

return out;

}

public static List numbers (Integer page,Integer pages) {

LinkedList numbers = new LinkedList<>();

Integer buttons = 7;

Integer half = buttons / 2;

if (pages <= buttons ) {

numbers = range( 0, paghttp://es );

}

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 ); SAsUJjni

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

out.push( i );

}

return out;

};

我将页面的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;

}

在主页面调用：

out.push( i );

}

return out;

};

我将页面的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;

}

在主页面调用：

#set($ctx = ${request.getContextPath()})

其中pageSuccess参数是用来在ajax返回数据成功后，需要做的一些操作。

这里说的也不太明白，附上码云的git地址：http://git.oschina.net/ivwpw/pagenation

其中并没有做从数据库插数据的部分，只是在Controller中模拟了页面需要的数据。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。