Résumé de l'utilisation courante du composant layui laypage

L'utilisation de laypage est très simple. Il pointe vers un conteneur pour stocker la pagination et obtient quelques valeurs initiales du serveur pour terminer le rendu de la pagination. Méthode principale : laypage.render(options) pour définir les paramètres de base.

1. Paramètres de base couramment utilisés de laypage

layui.use(['laypage'], function () {
            laypage = layui.laypage
            laypage.render({
                elem: 'pageTest'                 //这是元素的id，不能写成"#pageTest"
                , count: data.length             //数据总数
                , limit: 10                      //每页显示条数
                , limits: [10, 20, 30]
                , curr: 1                        //起始页
                , groups: 5                      //连续页码个数
                , prev: '上一页'                 //上一页文本
                , netx: '下一页'                 //下一页文本
                , first: 1                      //首页文本
                , last: 100                     //尾页文本
                , layout: ['prev', 'page', 'next','limit','refresh','skip']
               
                //跳转页码时调用
                , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                             //         do something
                    if (!first) {
                             //非首次加载 do something  
                    }
                }
            })
        });

2. L'utilisation

est incluse dans le tableau de layui Laypage. , ici je n'expliquerai pas l'utilisation de la pagination dans laytable. J'écrirai principalement une liste de pagination en arrière-plan et de chargement frontal (pas une liste dans le tableau). Plus précisément, cliquez sur la barre de catégorie et la partie principale affichera la liste. liste d'actualités correspondante.

<div class="category">
                    　　<ul id="newsTypeList">
                        　　　　<li class="hover" id="hyzxNews" data-typeId="1">新闻分类1</li>
                        　　　　<li data-typeId="2">新闻分类2</li>
                        　　　　<li data-typeId="3">新闻分类3</li>
                        　　　　<li data-typeId="4">新闻分类4</li>
                    　　</ul>
                </div>
<h2 id="newsType">新闻分类1</h2>
 <div class="list_box">
                    　　<ul id="newsList" class="list_ul"></ul>
                    　　<div id="demo7" style="text-align:center"></div>
                </div>


<script>
    layui.use([&#39;laypage&#39;], function () {
        var laypage = layui.laypage
            , layer = layui.layer;

//---------------------------点击侧边类型，加载新闻列表
        $(&#39;#newsTypeList li&#39;).click(function () {
            var typeId = $(this).attr("data-typeId");
            $.post(&#39;/News/GetNewsByPage&#39;, { page: 1, limit: 3, typeId: typeId }, function (result) {
                res = result.data;
                setHtml(res);
                setStyle(typeId)
                pages(result.count, typeId)//切换分类时候，调用页码，重新渲染
            });
        }).eq(0).click();

//--------------------------------分页组件渲染
        function pages(count, typeId) {
            laypage.render({
                elem: &#39;demo7&#39;
                , count: count
                , theme: &#39;#4A90E2&#39;
                , layout: [&#39;prev&#39;, &#39;page&#39;, &#39;next&#39;]
                , limit: 3
                , jump: function (obj, first) {
                    if (!first) {
                        $.post(&#39;/News/GetNewsByPage&#39;
　　　　　　　　　　　　　　　　, { page: obj.curr, limit: obj.limit, typeId: typeId }
　　　　　　　　　　　　　　　　, function (result) {
                            　　　　res = result.data;
                            　　　　setHtml(res);
                       　　 });
                    }
                }
            })
        }
//--------------------------------写入后台内容  
        function setHtml(data) {
            var strHtml = "";
            $.each(data, function (index, item) {
                strHtml += (&#39;<li>${item.Title}</li>&#39;);
            });
            document.getElementById(&#39;newsList&#39;).innerHTML = strHtml;
        }
//--------------------------------改变样式
        function setStyle(typeId) {
            $(&#39;ul.newsTypeList li&#39;).removeClass(&#39;hover&#39;);
            $(&#39;ul.newsTypeList li[data-typeId=&#39; + typeId + &#39;]&#39;).addClass(&#39;hover&#39;);
            $(&#39;#newsType&#39;).text($(&#39;ul#newsTypeList li[data-typeId=&#39; + typeId + &#39;]&#39;).text())
        }
    });
</script>

Pour plus de connaissances sur Layui, veuillez faire attention à la colonne Tutoriel d'utilisation de Layui.

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!