真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

springMVC+velocity如何實(shí)現(xiàn)Datatables局部刷新分頁(yè)方法

這篇文章主要介紹springMVC+velocity如何實(shí)現(xiàn)Datatables局部刷新分頁(yè)方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元順義做網(wǎng)站,已為上家服務(wù),為順義各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

因?yàn)轫?xiàng)目中之前的模塊用的分頁(yè)插件是Datatables，很方便，但是新做的模塊表格中的布局有變化，Datatables插件滿足不了了。為了風(fēng)格的統(tǒng)一，同時(shí)也不希望查詢參數(shù)再傳遞回顯在頁(yè)面上，所以就采用局部刷新分頁(yè)的實(shí)現(xiàn)方案。

實(shí)現(xiàn)方案是這樣的，將表格部分提取出來，用來作為頁(yè)面局部刷新的部分，文件名為list-data.vm

 
  
  
  userName 
  age 
  
  
  
 #foreach($data in $!{page.list}) 
  
  $!{data.userName} 
  $!{data.sex} 
  
 #end 
  
 
#pageNation($!{page})

其中的pageNation是定義的一個(gè)宏（macro），用來做底部的分頁(yè)條和分頁(yè)條的顯示邏輯。page對(duì)象是ajax請(qǐng)求返回的分頁(yè)數(shù)據(jù)。每一次ajax請(qǐng)求，查詢出分頁(yè)數(shù)據(jù)，將數(shù)據(jù)放入list-data.vm所對(duì)應(yīng)的視圖的ModelAndView對(duì)象，然后返回ModelAndView對(duì)象，將這一部分追加到主頁(yè)面表格所在的部分。

macro部分如下：

#macro(pageNation $data) 
 #if(!$data.list.size() or $data.list.size() == 0) 
 
未查詢到記錄 
   #end   #if($data.list.size() and $data.list.size() > 0)    顯示第 $!{data.startRow} 至 $!{data.endRow} 項(xiàng)結(jié)果，共 $!{data.total}項(xiàng)
        #set($prevPage = ${data.prePage})    #set($nextnPage = ${data.nextPage})    首頁(yè)     上頁(yè)     #set($temp = ${data.pageNum} - 1)    #set($numbers = $!{pageUtil.numbers($temp, $data.pages)})       #foreach($foo in $numbers)    #if($foo == -999)    …    #else     $foo     #end    #end        下頁(yè)    末頁(yè)    到第      頁(yè)   確認(rèn)   #end   
     #end

pageUtil是寫的velocity toolbox的一個(gè)工具類，用來仿Datatables分頁(yè)條的分頁(yè)頁(yè)碼顯示的邏輯：

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源碼中找到的，我將其轉(zhuǎn)化為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
我將頁(yè)面的ajax請(qǐng)求分頁(yè)的數(shù)據(jù)做了封裝：
/** 
 * 
 */ 
//macro分頁(yè)跳頁(yè)調(diào)用方法，調(diào)用的頁(yè)面需要提供goPage(redirectpage)方法 
function jumpPage(totalPage) { 
 var redirectpage = $("#changePage").val(); 
 if(redirectpage == ""){ 
 $("#changePage").focus(); 
 }else{ 
 var rex = /^\d+$/; 
 if(!rex.test(redirectpage)){ 
  alert("頁(yè)碼輸入有誤，只能輸入不大于總頁(yè)數(shù)的正整數(shù)"); 
 }else{ 
  var pageNo = parseInt(redirectpage); 
  if(pageNo <= 0 || pageNo > totalPage){ 
  alert("頁(yè)碼輸入有誤，只能輸入不大于總頁(yè)數(shù)的正整數(shù)"); 
  }else{ 
  goPage(redirectpage) 
  } 
 } 
 } 
} 
 
$.fn.pagenation = function(options) { 
 
 //默認(rèn)參數(shù) 
 var defaults={ 
  url:"", 
  data:{},//參數(shù) 
  pageNo:1,//頁(yè)碼 
  pageSize:10,//頁(yè)面大小 
  pageSuccess:{}//分頁(yè)數(shù)據(jù)成功返回的回調(diào)函數(shù) 
 } 
 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; 
 
}
在主頁(yè)面調(diào)用：
 
 
 
 
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參數(shù)是用來在ajax返回?cái)?shù)據(jù)成功后，需要做的一些操作。
以上是“springMVC+velocity如何實(shí)現(xiàn)Datatables局部刷新分頁(yè)方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
            
            
                        

            分享文章：springMVC+velocity如何實(shí)現(xiàn)Datatables局部刷新分頁(yè)方法            

            網(wǎng)址分享：http://weahome.cn/article/isjpes.html
        
    






    

        

            
                
                
在線咨詢

            
        

    

    

        
微信咨詢

        

    

    

        
電話咨詢

        

            
028-86922220（工作日）

            
18980820575（7×24）

        

    

    

        

            
                
提交需求

            
        

    

    

        

            
                
返回頂部