本文介紹了LayUI分頁，LayUI動態(tài)分頁，LayUI laypage分頁，LayUI laypage刷新當(dāng)前頁，分享給大家，具體如下：

效果圖：

一、引用js依賴

主要是jquery-1.11.3.min.js 和 layui.all.js ， json2.js用來做json對象轉(zhuǎn)換的

二、js分頁方法封裝(分頁使用模板laytpl)

1、模板渲染

/**

* 分頁模板的渲染方法

* @param templateId 分頁需要渲染的模板的id

* @param resultContentId 模板渲染后顯示在頁面的內(nèi)容的容器id

* @param data 服務(wù)器返回的json對象

*/

function renderTemplate(templateId, resultContentId, data){

layuiuse(['form','laytpl'], function(){

var laytpl = layui.laytpl;

laytpl($("#"+templateId).html()).render(data, function(html){

$("#"+resultContentId).html(html);

});

});

layui.form().render();// 渲染

};

2、layui.laypage 分頁封裝

/**

* layuilaypage 分頁封裝

* @param laypageDivId 分頁控件Div層的id

* @param pageParams 分頁的參數(shù)

* @param templateId 分頁需要渲染的模板的id

* @param resultContentId 模板渲染后顯示在頁面的內(nèi)容的容器id

* @param url 向服務(wù)器請求分頁的url鏈接地址

*/

function renderPageData(laypageDivId, pageParams, templateId, resultContentId, url){

if(isNull(pageParams)){

pageParams = {

pageIndex : 1,

pageSize : 10

}

}

$ajax({

url : url,//basePath + '/sysMenu/pageSysMenu',

method : 'post',

data : pageParams,//JSON.stringify(datasub)

async : true,

complete : function (XHR, TS){},

error : function(XMLHttpRequest, textStatus, errorThrown) {

if("error"==textStatus){

error("服務(wù)器未響應(yīng)，請稍候再試");

}else{

error("操作失敗，textStatus="+textStatus);

}

},

success : function(data) {

var jsonObj;

if('object' == typeof data){

jsonObj = data;

}else{

jsonObj = JSON.parse(data);

}

renderTemplate(templateId, resultContentId, jsonObj);

//重新初始化分頁插件

layui.use(['form','laypage'], function(){

laypage = layui.laypage;

laypage({

cont : laypageDivId,

curr : jsonObj.phttp://www.cppcns.comager.pageIndex,

pages : jsonObj.pager.totalPage,

skip : true,

jump: function(obj, first){//obj是一個objec

3、刷新當(dāng)前分頁的方法，可省略

/**

* 分頁插件刷新當(dāng)前頁的數(shù)據(jù)，必須有跳轉(zhuǎn)的確定按鈕，因為根據(jù)按鈕點擊事件刷新

*/

function reloadCurrentPage(){

$(".layui-laypage-btn").click();

};

三、頁面代碼

1、分頁表格及分頁控件

許可名稱許可編碼菜單名稱許可鏈接

2、分頁模板

{{# layui.each(d.list, function(index, item){ }}

{{item.permissionName || ''}}{{item.permissionCode || ''}}{{item.menuName || ''}}{{item.permissionUrl || ''}}

{{# }); }}

3、分頁執(zhí)行代碼：

分頁參數(shù)：

function getPageParams(){

var pageParams = {

pageIndex : 1,

pageSize : 2

};

pageParams.permissionName = $("input[name='permissionName']").val();

pageParams.permissionCode = $("input[name='permissionCode']").val();

pageParams.menuName = $("input[name='menuName']").val();

return pageParams;

};

分頁執(zhí)行方法：

function initPage(){

renderPageData("imovie-page-div", getPageParams(), "page_template_id",

"page_template_body_id", basePath + '/sysPermission/pageSysPermission');

};

頁面加載初始化分頁：

$(function(){

initPage();

});

如果包括上面效果圖的查詢，如下：

Html頁面代碼

許可名稱

查詢

查詢語句：

$(function(){

initPage();

layui.use(['form'], function(){

var form = layui.form();

//監(jiān)聽提交

formon('submit(formFilter)', function(data){

initPage();

return false;

});

});

});

四、懂 jquery 插件封裝的大神可以將其封裝成獨立的分頁插件，這樣更加容易使用。我表示不太懂，^_^

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

本文標(biāo)題: 基于LayUI分頁和LayUI laypage分頁的使用示例

本文地址: http://www.cppcns.com/ruanjian/java/198431.html

總結(jié)

以上是生活随笔為你收集整理的java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。