asdtiang的博客 感谢blogjava提供的博客交流平台

grails ajax分页标签实现

Posted on 2010-11-26 14:20 asdtiang 阅读(1193) 评论(0)  编辑  收藏 所属分类: grails study

一、设计目标
1、采用ajax实现
2、要多少条数据,取多少条,不从数据库中一次性全部取出
3、实现指定页面跳转
4、用户可以指定选择每页显示几条数据
5、按那个字段排序
6、最好不要占用session
二、如何实现
2、传入参数:显示页码,共有多少条数据,每页显示几条数据,返回的页面
       可选按那个字段排序

        if(!params.total){
            params.total=TestAjaxPage.count()///这个必须要,ajax请求时就不用在count总数了
        }
        params.view=params.view==null?"list":params.view
        params.max = Math.min(params.max ? params.max as int : 2, 100)
        params.linkTotal = Math.min(params.linkTotal ? params.linkTotal as int : 2, 100)
        params.offset = Math.min(params.offset ? params.offset as int : 0, 100)
        params.sort=params.sort==null?"dateCreated":params.sort
        params.order=params.order==null?"desc":params.order
截个图:

talib code
import org.springframework.web.servlet.support.RequestContextUtils as RCU;
import org.codehaus.groovy.grails.commons.ConfigurationHolder
class AjaxPageTagLib {
    def paginateAjax
={attrs ->
        def writer 
= out
        params.offset 
= Math.min(params.offset ? params.offset as int : 0100)
        params.sort
=params.sort==null?"dateCreated":params.sort
        params.order
=params.order==null?"desc":params.order
        def messageSource 
= grailsAttributes.getApplicationContext().getBean("messageSource")
        def locale 
= RCU.getLocale(request)        
        def total 
= attrs.total.toInteger()
        def offset 
= params.offset?.toInteger()
        def max 
= params.max?.toInteger()
        
int pageSize=Math.round(Math.ceil(total / max))    
        def path
=request.getContextPath()    
        def pageNow
=offset/max+1
        def selectMax
=attrs.selectMax?.toInteger()
        
if(!selectMax){
            selectMax
=20
        }
        selectMax
=selectMax>total?total:selectMax
        
////js输出
        writer<<"""
         <div id="ajaxPage">
        
"""
        /////显示首页和上页
        def firstText=messageSource.getMessage('paginate.first'null, messageSource.getMessage('default.paginate.first'null'First', locale), locale)
        def prevText
=messageSource.getMessage('paginate.prev'null, messageSource.getMessage('default.paginate.prev'null'Prev', locale), locale)
        def nextText
=messageSource.getMessage('paginate.next'null, messageSource.getMessage('default.paginate.next'null'Next', locale), locale)
        def lastText
=messageSource.getMessage('paginate.last'null, messageSource.getMessage('default.paginate.last'null'Last', locale), locale)
        
        
if(offset!=0){
            def firstUrl
="""offset=0&max=${params.max}&sort=${params.sort}&order=${params.order}&total=${total}"""
            writer
<<"""
            <span id="firstShow" title="${firstText}" onclick="new Ajax.Updater('${attrs.update}',
        '${path}/${params.controller}/${params.action}',{asynchronous:true,evalScripts:true,parameters:'${firstUrl}'});
        
return false;" >
            [${firstText}]
            
</span>
            
"""
            int prev=offset-max
            def prevUrl
="""offset=${prev}&max=${params.max}&sort=${params.sort}&order=${params.order}&total=${total}"""
            writer
<<"""
                <span id="preShow" title="${prevText}" onclick="new Ajax.Updater('${attrs.update}',
            '${path}/${params.controller}/${params.action}',{asynchronous:true,evalScripts:true,parameters:'${prevUrl}'});
            
return false;" >
                [${prevText}]
                
</span>
                
"""
        }
        
else{
            writer
<<"""<span id="firstNoShow" title="${firstText}">
                      [${firstText}]
                      
</span>
                
"""
            writer<<"""<span id="preNoShow" title="${prevText}">
                    [${prevText}]
                    
</span>
                    
"""
        }
        
////数据信息输出
        writer<<"""<span id="ajaxPageInfo">当前${pageNow}/${pageSize}页(共${total})</span>"""
        
        
//下一页和末页输出,
        if(offset!=max*(pageSize-1)){
            
int next1=offset+max
            def nextUrl
="""offset=${next1}&max=${params.max}&sort=${params.sort}&order=${params.order}&total=${total}"""
            
            writer
<<"""
                <span id="nextShow"   title="${nextText}" onclick="new Ajax.Updater('${attrs.update}',
            '${path}/${params.controller}/${params.action}',{asynchronous:true,evalScripts:true,parameters:'${nextUrl}'});
            
return false;" >
                [${nextText}]
                
</span>
                
"""
            int last=max*(pageSize-1)
            def lastUrl
="""offset=${last}&max=${params.max}&sort=${params.sort}&order=${params.order}&total=${total}"""
            writer
<<"""
                <span id="lastShow" title="${lastText}" onclick="new Ajax.Updater('${attrs.update}',
            '${path}/${params.controller}/${params.action}',{asynchronous:true,evalScripts:true,parameters:'${lastUrl}'});
            
return false;" >
                [${lastText}]
                
</span>
                
"""
        }
        
else{
            writer
<<"""<span id="nextNoShow" title="${nextText}">
                [${nextText}]
                
</span>
                
"""
            writer<<"""<span id="lastNoShow" title="${lastText}">
                [${lastText}]
                
</span>
                
"""
        }
        
///到指定页连接输出
        def selectUrl="&max=${params.max}&sort=${params.sort}&order=${params.order}&total=${total}"
        writer
<<"""
        <span id="ajaxSelectText">转到<select id="ajaxSelect" onchange="myUpdate('${attrs.update}','${path}/${params.controller}/${params.action}'
        ,'${selectUrl}','${max}')">
        
        
"""
        for(int j=1;j<=pageSize;j++){
            
if(pageNow!=j){
                writer
<<"""  <option value ="${j}">${j}/${pageSize}</option>           """
            }
            
else{
                writer
<<"""  <option value ="${j}"  selected="selected">${j}/${pageSize}</option>           """
            }
        }
        writer
<<"</select>页</span>"
        
        
////每页显示几条数据
        def maxUrl="&offset=0&sort=${params.sort}&order=${params.order}&total=${total}"
        writer
<<"""
             <span id="ajaxMaxText"> 每页显示</span><select id="ajaxMax" onchange="myUpdate2('${attrs.update}','${path}/${params.controller}/${params.action}'
            ,'${maxUrl}')">
            """
        for(int j=1;j<=selectMax;j++){
            
if(max!=j){
                writer
<<"""<option value ="${j}">${j}</option>"""
            }
            
else{
                writer
<<"""<option value ="${j}"  selected="selected">${j}</option>"""
            }
        }
        writer
<<"</select> </div>"
    }
}

example code

        if(!params.total){
            params.total
=CompanyFinance.count()////注意total参数
        }
        def hql
="select id,title,dateCreated from CompanyFinance "
        params.view
=params.view==null?"list":params.view
        params.max 
= Math.min(params.max ? params.max as int : 2100)
        params.linkTotal 
= Math.min(params.linkTotal ? params.linkTotal as int : 2100)
        params.offset 
= Math.min(params.offset ? params.offset as int : 0100)
        params.sort
=params.sort==null?"dateCreated":params.sort
        params.order
=params.order==null?"desc":params.order
        params.selectMax
="true"///暂时没用
        def results 
= sessionFactory.currentSession.createQuery(hql+" order by ${params.sort} ${params.order}")
           .setCacheable(
false)
           .setReadOnly(
true)
           .setFirstResult(params.offset)
           .setMaxResults(params.max)
           .list()
    
        render view:params.view,model:[pageAjaxList:results,paginateAjaxTotal:params.total]
<g:paginateAjax total="${paginateAjaxTotal}" update="update1"
    selectMax="20" />
对了,还有js,css
function myUpdate(update1, url1, parameters1, max) {
    
var selectValue = document.getElementById("ajaxSelect").value
    
var offset = max * (selectValue - 1)
    
var newParams = "offset=" + offset + parameters1
    
new Ajax.Updater(update1, url1, {
        asynchronous : 
true,
        evalScripts : 
true,
        parameters : newParams
    });
    
return false;
}
function myUpdate2(update1, url1, parameters1) {
    
var max = document.getElementById("ajaxMax").value
    
var newParams = "max=" + max + parameters1
    
new Ajax.Updater(update1, url1, {
        asynchronous : 
true,
        evalScripts : 
true,
        parameters : newParams
    });
    
return false;
}

css:(css水平有限啊),table的css最好自己写,如果 用默认的main.css会报错

@CHARSET "UTF-8";
#firstShow
{
  color
:#0000cc;
  cursor
:hand;
  cursor
:pointer;
}

#preShow
{
  color
:#0000cc;
  cursor
:hand;
  cursor
:pointer;
}
#ajaxPageInfo
{
  color
:#000000;
}

#nextShow
{
  color
:#0000cc;
  cursor
:hand;
  cursor
:pointer;
}
#lastShow
{
  color
:#0000cc;
  cursor
:hand;
  cursor
:pointer;
}


#ajaxSelectText
{
   color
:#000000;
}

#ajaxMaxText
{
   color
:#000000;
}
#firstNoShow
{
}

#preNoShow
{

}

#nextNoShow
{
}

#lastNoShow
{
}
grails 1.1
grails 1.3.5下测试通过
最后页面上应该以下几句
 <g:javascript library="prototype" />
 <script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxPage.js')}"></script>
 <link rel="stylesheet" href="${resource(dir:'css',file:'ajaxPage.css')}" />
要源码可以下载:
hg clone https://asdtiang@bitbucket.org/asdtiang/mygrailsstudy
hg: mercurial 一个分布式源码管理工具,最近喜欢用这个




天苍苍,野茫茫,风吹草底见牛羊

只有注册用户登录后才能发表评论。


网站导航:
 

posts - 80, comments - 24, trackbacks - 0, articles - 32

Copyright © asdtiang

asdtiang的博客 PaidMailz
点击广告网赚A(每天4个广告,每个0.0025美元,一个搜索广告0.03美元)