Maison  >  Article  >  interface Web  >  Compréhension approfondie de l'utilisation du contrôle de pagination jQuery layui

Compréhension approfondie de l'utilisation du contrôle de pagination jQuery layui

韦小宝
韦小宝original
2018-01-13 11:43:311429parcourir

Le contrôle

jquery layuiPaging est souvent utilisé dans la phase de développement du projet. Présentons l'utilisation du contrôle de pagination jQuery layui à travers cet article. C'est très bien. dans layui se réunira. Jetons un coup d'oeil

Introduction à l'utilisation de $.getJSON()

$.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

url est un paramètre obligatoire, indiquant l'adresse des données json

data est un paramètre facultatif, utilisé pour envoyer des paramètres de données lors de la demande de données ;

le succès est paramétrable, qui est une

fonction de rappel utilisée pour traiter les données demandées.

//内容页面 <br>   
<p id="notice_p"></p><br>   //分页控件
<p id="notice_pages"></p>
<script>
var roolurl = "http://" + window.location.host;
var urlAshx = roolurl + "/aa/Ashx/NoticeInfo.ashx";
//var pages = 0;
//获取分页好的公告内容
function GetNoticeList(curr, cid) {
$.getJSON(urlAshx,
{//参数
action: "notice_action",
courseid: cid,
page: curr || 1,//向服务端传的参数,此处只是演示
nums: 3//每页显示的条数
}, function (datajson) {//成功执行的方法
if (datajson != null) {
var norice_content = "";
//alert(datajson.pages);
$(datajson.rows).each(function (n, Row) {
norice_content += " <p class=&#39;panel panel-default&#39;>";
norice_content += " <p class=&#39;panel-heading&#39;>";
norice_content += " <h3 class=&#39;panel-title&#39;>";
norice_content += Row.CreateDate;
norice_content += " ";
norice_content += Row.Creater;
norice_content += " </h3>";
norice_content += " </p>";
norice_content += " <p class=&#39;panel-body&#39;>";
norice_content += Row.NoticeContent;
norice_content += " </p>";
norice_content += " </p>";
});
$(&#39;#notice_p&#39;).html(norice_content);
//alert(11);
//调用分页
laypage({
cont: &#39;notice_pages&#39;,//容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<p id="page1"></p>
pages: datajson.pages,//总页数
groups: 5, //连续显示分页数
skip: false, //是否开启跳页
skin: &#39;#AF0000&#39;,
curr: curr || 1, //当前页,
jump: function (obj, first) {//触发分页后的回调
if (!first) {//点击跳页触发函数自身,并传递当前页:obj.curr
GetNoticeList(obj.curr, cid);
}
}
})
}
});
}
$(document).ready(function () {
GetNoticeList(0, &#39;<%=_courseid%>&#39;)
});
</script>


Ce qui précède est l'utilisation du contrôle de pagination jQuery layui introduit par l'éditeur. J'espère que cela sera utile à tout le monde ! !

Recommandations associées :

Explication détaillée de la façon dont layui.js implémente la fonction de vérification de formulaire

Partage de code d'implémentation de table layui

Partage de code de mise en œuvre de l'effet d'onglet Laui

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn