您好,登錄后才能下訂單哦!
laypage 的使用非常簡單,指向一個用于存放分頁的容器,通過服務(wù)端得到一些初始值,即可完成分頁渲染。核心方法: laypage.render(options) 來設(shè)置基礎(chǔ)參數(shù)。
一、laypage的常用基礎(chǔ)參數(shù)
layui.use(['laypage'], function () { laypage = layui.laypage laypage.render({ elem: 'pageTest' //這是元素的id,不能寫成"#pageTest" , count: data.length //數(shù)據(jù)總數(shù) , limit: 10 //每頁顯示條數(shù) , limits: [10, 20, 30] , curr: 1 //起始頁 , groups: 5 //連續(xù)頁碼個數(shù) , prev: '上一頁' //上一頁文本 , netx: '下一頁' //下一頁文本 , first: 1 //首頁文本 , last: 100 //尾頁文本 , layout: ['prev', 'page', 'next','limit','refresh','skip'] //跳轉(zhuǎn)頁碼時調(diào)用 , jump: function (obj, first) { //obj為當(dāng)前頁的屬性和方法,第一次加載first為true // do something if (!first) { //非首次加載 do something } } }) });
二、使用方式
在layui中的table中包含了laypage,這里就不再說明laytable中的分頁用法,主要寫一個后臺分頁,前端加載列表(非table中的列表)的栗子,具體為點擊分類欄,主體部分顯示對應(yīng)的新聞列表。
<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> <h3 id="newsType">新聞分類1</h3> <div class="list_box"> <ul id="newsList" class="list_ul"></ul> <div id="demo7" style="text-align:center"></div> </div> <script> layui.use(['laypage'], function () { var laypage = layui.laypage , layer = layui.layer; //---------------------------點擊側(cè)邊類型,加載新聞列表 $('#newsTypeList li').click(function () { var typeId = $(this).attr("data-typeId"); $.post('/News/GetNewsByPage', { page: 1, limit: 3, typeId: typeId }, function (result) { res = result.data; setHtml(res); setStyle(typeId) pages(result.count, typeId)//切換分類時候,調(diào)用頁碼,重新渲染 }); }).eq(0).click(); //--------------------------------分頁組件渲染 function pages(count, typeId) { laypage.render({ elem: 'demo7' , count: count , theme: '#4A90E2' , layout: ['prev', 'page', 'next'] , limit: 3 , jump: function (obj, first) { if (!first) { $.post('/News/GetNewsByPage' , { page: obj.curr, limit: obj.limit, typeId: typeId } , function (result) { res = result.data; setHtml(res); }); } } }) } //--------------------------------寫入后臺內(nèi)容 function setHtml(data) { var strHtml = ""; $.each(data, function (index, item) { strHtml += ('<li>${item.Title}</li>'); }); document.getElementById('newsList').innerHTML = strHtml; } //--------------------------------改變樣式 function setStyle(typeId) { $('ul.newsTypeList li').removeClass('hover'); $('ul.newsTypeList li[data-typeId=' + typeId + ']').addClass('hover'); $('#newsType').text($('ul#newsTypeList li[data-typeId=' + typeId + ']').text()) } }); </script>
以上就是layui laypage組件常見用法總結(jié)的詳細內(nèi)容,更多請關(guān)注億速云其它相關(guān)文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。