grails ajax分页标签实现

一、设计目标
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 : 0 , 100 )
        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 : 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
        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

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://[email protected]/asdtiang/mygrailsstudy

hg: mercurial 一个分布式源码管理工具，最近喜欢用这个

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

grails ajax分页标签实现

你可能感兴趣的:(grails ajax分页标签实现)