Maison > Article > interface Web > Explication détaillée de la différence entre la pagination LayUI et la pagination LayUI laypage
Explication détaillée de la différence entre la pagination LayUI et la pagination LayUI laypage
- 小云云original
- 2018-05-30 09:16:358883parcourir
Cet article présente principalement les exemples d'utilisation basés sur la pagination LayUI et la pagination LayUI laypage. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Rendu :
1. Citer les dépendances js
Principalement jquery -1.11 .3.min.js et layui.all.js, json2.js est utilisé pour convertir des objets json
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/json2.js"></script>2. Encapsulation de la méthode de pagination js (la pagination utilise le modèle laytpl)
1. Rendu du modèle
/**
* 分页模板的渲染方法
* @param templateId 分页需要渲染的模板的id
* @param resultContentId 模板渲染后显示在页面的内容的容器id
* @param data 服务器返回的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. Package de pagination layui.laypage
/**
* layuilaypage 分页封装
* @param laypagepId 分页控件p层的id
* @param pageParams 分页的参数
* @param templateId 分页需要渲染的模板的id
* @param resultContentId 模板渲染后显示在页面的内容的容器id
* @param url 向服务器请求分页的url链接地址
*/
function renderPageData(laypagepId, 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("服务器未响应，请稍候再试");
}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 : laypagepId,
curr : jsonObj.pager.pageIndex,
pages : jsonObj.pager.totalPage,
skip : true,
jump: function(obj, first){//obj是一个object类型。包括了分页的所有配置信息。first一个Boolean类，检测页面是否初始加载。非常有用，可避免无限刷新。
pageParams.pageIndex = obj.curr;
pageParams.pageSize = jsonObj.pager.pageSize;
if(!first){
renderPageData(laypagepId, pageParams, templateId, resultContentId, url);
}
}
});
});
}
});
};3. La méthode de rafraîchissement de la pagination actuelle peut être omise
/**
* 分页插件刷新当前页的数据，必须有跳转的确定按钮，因为根据按钮点击事件刷新
*/
function reloadCurrentPage(){
$(".layui-laypage-btn").click();
};3. Code de page
1. Table de pagination et contrôle de pagination
<!-- 分页表格 -->
<p class="layui-form">
<table class="layui-table">
<thead>
<tr>
<th class="w20"><input type="checkbox" name="checkBoxAll" lay-skin="primary" lay-filter="allChoose"></th>
<th class="w200">许可名称</th>
<th class="w200">许可编码</th>
<th class="w200">菜单名称</th>
<th>许可链接</th>
</tr>
</thead>
<tbody id="page_template_body_id">
</tbody>
</table>
</p>
<!-- 分页控件p -->
<p id="imovie-page-p"></p>2. 3. Code d'exécution de pagination :
<script id="page_template_id" type="text/html">
{{# layui.each(d.list, function(index, item){ }}
<tr>
<td><input type="checkbox" name="permissionId" lay-skin="primary" value="{{item.permissionId}}"></td>
<td>{{item.permissionName || ''}}</td>
<td>{{item.permissionCode || ''}}</td>
<td>{{item.menuName || ''}}</td>
<td>{{item.permissionUrl || ''}}</td>
</tr>
{{# }); }}
</script>Paramètres de pagination :
Méthode d'exécution de pagination :
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;
};Page de pagination d'initialisation de chargement :
function initPage(){
renderPageData("imovie-page-p", getPageParams(), "page_template_id",
"page_template_body_id", basePath + '/sysPermission/pageSysPermission');
};Si vous incluez la requête pour le rendu ci-dessus, elle se présente comme suit :
$(function(){
initPage();
});Code de la page HTML
Instruction de requête :
<p>
<form class="layui-form layui-form-pane">
<p class="layui-form-item">
<p class="layui-inline">
<label class="layui-form-label">许可名称</label>
<p class="layui-input-inline">
<input type="text" name="permissionName"
autocomplete="off" class="layui-input" placeholder="请输入许可名称" >
</p>
</p>
<p class="layui-inline">
<label class="layui-form-label">许可编码</label>
<p class="layui-input-inline">
<input type="text" name="permissionCode"
autocomplete="off" placeholder="请输入许可编码" class="layui-input">
</p>
</p>
<p class="layui-inline">
<label class="layui-form-label">菜单名称</label>
<p class="layui-input-inline layui-input-inline-0">
<input type="text" name="menuName"
autocomplete="off" placeholder="请选择菜单名称" class="layui-input">
</p>
</p>
<p class="layui-inline">
<button id="btnSubmit" class="layui-btn" lay-submit="" lay-filter="formFilter">查询</button>
</p>
</p>
</form>
</p>Recommandations associées :
$(function(){
initPage();
layui.use(['form'], function(){
var form = layui.form();
//监听提交
formon('submit(formFilter)', function(data){
initPage();
return false;
});
});
});
Partage de code d'implémentation de l'effet de pagination Layui
Analyse d'instance de classe de pagination PHP
Explication détaillée de jQuery composant de pagination encapsulé
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!