layui管理系統(tǒng)模板教程（layui模板怎么用）
本篇文章給大家談?wù)刲ayui管理系統(tǒng)模板教程，以及l(fā)ayui模板怎么用對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。
本文目錄一覽：
layui前端分頁不要每次調(diào)后端
layUI實(shí)現(xiàn)前端分頁和后端分頁
本文實(shí)例為大家分享了layUI實(shí)現(xiàn)前端分頁和后端分頁效果，供大家參考，具體內(nèi)容如下
layui后端分頁：
function pagination(curr,gwayId,mlity,ePart) {
$(".manage_ys_list").html('加載中...');
let dd={
conditions: {
gatewayId:gwayId,
searchText:"",
pageSize:15,
pageIndex:curr-1
},
identity:{
"userName":userName1,
"sessionId":sessionId1,
"token":token2
}
}
$.ajax({
type:"POST",
dataType: 'json',
url:UserListPaged,
data:dd,
headers:{ 'X-Requested-With': 'XMLHttpRequest' },
success:function(data){
let total=data.data.recordCount;
let pageCount=data.data.pageCount;
let pageSize=data.data.pageSize;
if(data.data.recordCount=0){
let dataHtml = '';
for(var i=0;idata.data.result.length;i++){
dataHtml += 'trtd'+data.data.result[i].gatewayId+'/tdtd'+data.data.result[i].userId+
'/tdtd'+data.data.result[i].realName+'/tdtd'+data.data.result[i].sex+'/tdtd'+data.data.result[i].workUnit+
'/tdtd'+data.data.result[i].phoneNo+'/tdtd'+data.data.result[i].isAdmin+
'/tdtda title="" class="btn btn-sm btn-info text-white manage_ys_xg" gatewayId="'+
data.data.result[i].gatewayId+'" userId="'+data.data.result[i].userId+
'" realName="'+data.data.result[i].realName+'" sex="'+data.data.result[i].sex+
'" age="'+data.data.result[i].age+'" birthday="'+data.data.result[i].birthday+
'" workUnit="'+data.data.result[i].workUnit+'" phoneNo="'+data.data.result[i].phoneNo+
'" isAdmin="'+data.data.result[i].isAdmin+'"修改/aa href="#" rel="external nofollow" title="" class="btn btn-warning text-white btn-sm man_ys_shanc" gatewayId="'+
data.data.result[i].gatewayId+'" userId="'+data.data.result[i].userId+'"刪除/a/td/tr'
}
$(".manage_ys_list").html(dataHtml);
}else{
$(".manage_ys_list").html('li暫無數(shù)據(jù)/li');
}
//顯示分頁
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
laypage.render({
elem: 'page' //注意，這里的 test1 是 ID，不用加 # 號(hào)
,count: total//數(shù)據(jù)總數(shù)，從服務(wù)端得到
,limit: 15//每頁顯示條數(shù)
,curr: curr || 1 //當(dāng)前頁
layui實(shí)現(xiàn)table加載的示例代碼
js實(shí)現(xiàn)：
layui.use(['table','form'],
function()
{
$
=
layui.jquery;
table
=
layui.table;
tableIns
=
initTable();
});
//加載列表
function
initTable(){
//
執(zhí)行渲染
tableIns
=
table.render({
id:
'idTest',
elem
:
'#deviceTable',
//
指定原始表格元素選擇器（推薦id選擇器）
size:
'lg',
height
:
'full-20',
//
容器高度
url
:
'/csCloud-admin/deviceController/getDeviceList.do',
where:
{
'orgId':$("#orgId").val(),
'coldNum':$("#coldNum").val(),
'devType':$("#devType").val(),
'isUsed':$("#isUsedId").val()
},
method
:
'post',
cols
:
[
[
//
標(biāo)題欄
{
field
:
'rownum',
title
:
'序號(hào)',
width
:
100,
sort
:
true
},
{
field
:
'devNum',
title
:
'設(shè)備編號(hào)',
width
:
200
},
{
field
:
'devAlias',
title
:
'設(shè)備別名',
width
:
100
},
{
field
:
'devTypeVal',
title
:
'設(shè)備類型',
width
:
100
},
{
field
:
'devModel',
title
:
'設(shè)備型號(hào)',
width
:
100
},
{
field
:
'stateVal',
title
:
'設(shè)備狀態(tài)',
width
:
100
},
{
field
:
'coldNum',
title
:
'冷庫編號(hào)',
width
:
100
},
{
field
:
'orgName',
title
:
'所屬機(jī)構(gòu)',
width
:
300
},
{
field
:
'isUsedValue',
title
:
'狀態(tài)',
width
:
100
},
{
fixed
:
'right',
width
:
300,
align:'center',
toolbar
:
'#barDemo'
}
]
],
//
設(shè)置表頭
page
:
true,
limits
:
[
10,30,
60,
90,
150,
300
],
limit
:
10
});
return
tableIns;
}
jsp實(shí)現(xiàn)：
div
class="layui-fluid"
div
class="layui-row"
div
class="layui-col-lg12"
table
id="deviceTable"/table
/div
/div
/div
以上這篇layui實(shí)現(xiàn)table加載的示例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:layui的table單擊行勾選checkbox功能方法layui實(shí)現(xiàn)點(diǎn)擊按鈕給table添加一行l(wèi)ayui結(jié)合form,table的全選、反選v1.0示例講解
layui 的table表頭 字體太多如何自動(dòng)換行
layui 的table表頭字體太多自動(dòng)換行代碼：
table style="TABLE-LAYOUT: fixed" border="1" cellspacing="0" cellpadding="0" width="200"
? tbody
? ? ? tr
? ? ? ? ? td style="WORD-WRAP: break-word" width="20"sssssssssssssssssssssssssssssssssssssssssssssss /td
? ? ? ? ? tdaaaaa/td
? ? ? /tr
? ? ? tr
? ? ? ? ? td style="WORD-WRAP: break-word" width="20"sssssssssssssssssssssssssssssssssssssssssssssss /td
? ? ? ? ? tdaaaaa/td
? ? ? /tr
? /tbody
/table
擴(kuò)展資料
layui更多是面向于后端開發(fā)者，所以在組織形式上依然采用了幾年前的以瀏覽器為宿主的類 AMD 模塊管理方式，卻又并非受限于 CommonJS 的那些條條框框，它擁有自己的模式，更加輕量和簡(jiǎn)單。
layui 定義為“經(jīng)典模塊化”，并非是刻意強(qiáng)調(diào)“模塊”理念本身，而是有意避開當(dāng)下 JS 社區(qū)的主流方案，試圖以盡可能簡(jiǎn)單的方式去詮釋高效！
它的所謂經(jīng)典，是在于對(duì)返璞歸真的執(zhí)念，它以當(dāng)前瀏覽器普通認(rèn)可的方式去組織模塊！ layui 認(rèn)為這種輕量的組織方式，仍然可以填補(bǔ) WebPack 以外的許多場(chǎng)景。
所以它堅(jiān)持采用經(jīng)典模塊化，也正是能讓人避開工具的復(fù)雜配置，重新回歸到原生態(tài)的 HTML/CSS/JavaScript本身。
layui管理系統(tǒng)模板教程的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于layui模板怎么用、layui管理系統(tǒng)模板教程的信息別忘了在本站進(jìn)行查找喔。
掃描二維碼推送至手機(jī)訪問。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請(qǐng)注明出處。
