jquery ajax freemarker標籤實現異步分頁

jquery pagination 官網:http://www.mricle.com/JqueryPagination


異步加載分頁,分頁內容需要樣式

返回內容使用標籤實現:以下是${ctx}/ajaxcontent/conclass/${contentclass.id} 路徑訪問的頁面內容


[@wms_conclass_contentlist_page conclassid='${contentclass.id}' catid='${catid!}' pageSize='${pageSize!}' modelName='news']
{
    "total": "${data.count}",
    "data":" [#list data.getList()as val]aaaa[/#list]"
}
[/@wms_conclass_contentlist_page]


調用腳本:

   <!--ajax異步翻頁開始-->
   <script src="static/assets/js/JqueryPagination/jquery-1.11.2.min.js"></script> 
   <script src="static/assets/js/JqueryPagination/jquery.pagination-1.2.7.min.js"></script> 
    <link rel="stylesheet" href="/static/assets/js/JqueryPagination/jquery.pagination.css" /> 

  <ul class="list-groups " id="contentlist" style="height:292px;"> </ul>
<nav class="text-center" style="padding-top:5px;"> 
         <div id="page3" class="m-pagination-page"></div>
<script type="text/javascript">
$("#page3").page({
    pageSize:10,
    showInfo: true,
    firstBtnText: '首頁',
    lastBtnText: '尾頁',
    prevBtnText: '上一頁',
    nextBtnText: '下一頁',


    infoFormat: '{start} ~ {end}條,共{total}條',
    remote: {
        url: '${ctx}/ajaxcontent/conclass/${contentclass.id}',
        params: { query: "test" },
        success: function (result, pageIndex) {


        $("#contentlist").html(result.data);
            
        }
    }
})
</script>
        </nav>
        <!--ajax異步翻頁結束-->

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章