???? ???? ?? Layui? ??? ?? ??? ??? ??????

Layui? ??? ?? ??? ??? ???? ???? ???? ?????? ??? ??? ?????. ?? ???? ???? HTML? ???? ??? ??? ?? ? ?? JavaScript? ???? ???? ??? ?? ?????. ??? ?????.

?? HTML? Layui CSS ? JavaScript ??? ???????.

 <code class="html"><link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script></code>

???? HTML? table ??? ????.? ???? ???? ??????. ? ??? Layui? ?????? id ??? ?????. ????? ? ?? ?? ??? ??? ?? ? ?? ????.

 <code class="html"><table id="demo" lay-filter="test"></table></code>

lay-filter ??? ?????. ??? ??? ?? ??? ??????? ???? ? ?????.

????? JavaScript? ???? layui.table.render() ???? ??? ???? ??????. ? ??? ??? ??? ???? ?? ID ( elem ), ??? ( data ), ? ( cols ) ? ?? ??? ?? ??? ??? ?????. ?? ??? ????.

 <code class="javascript">layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo' ,cols: [[ //標(biāo)題欄{field: 'id', title: 'ID', width:80, sort: true} ,{field: 'username', title: '用戶名', width:80} ,{field: 'email', title: '郵箱', width:120} ,{field: 'sex', title: '性別', width:80} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '簽名', width:170} ]] ,data: [ //假設(shè)數(shù)據(jù){'id':'1','username':'張三','email':'zhangsan@gmail.com','sex':'男','city':'西安','sign':'hello'} ,{'id':'2','username':'李四','email':'lisi@gmail.com','sex':'女','city':'北京','sign':'hello world'} ] ,page: true //開啟分頁}); });</code>

? ??? ??? ? ? ???? ?? ???? ??????. ?? ???? ?? ???? ??? ?? ?? ????. page: true ??? Pagination? ?????? (??? ??).

Layui? ??? ?? ???? ?? ??? ?? ? ? ?????

?, Layui? ??? ?? ??? ???? ? ??? ??? ?????. ??? ???? ? ?? ??? ??? ?? ? ? ????.

• field : ?? ???? ??? ?. ??? Layui? ???? ?? ???? ?????.
• title : ? ?? ???.
• width : ? ?? (?? ?? ???).
• sort : ? ?? ??? ?????? (true/false).
• templet : ?? ???? ???? ??? ??? ???? ?? ?? ??? ???. ?? ?? ???, ?? ?? ?? HTML ??? ???? ?? ??? ??? ??? ?????. ?? ??, ???? ???? ?? ?????? ???? ??? ?? ? ? ????.
• toolbar : ? ? ? ?? ??? ?? ???? ??? ?? ? ? ????. ?? ??, ?? ?? ?? ? ?? ??? ???? ? ?????.
• edit : ? ? ??? ??????. ?? ?? ???? ??? ??? ???? ?? ??? ? ????.
• type : 'Checkbox'? ?? ?? ? ??? ???? ? ?? ???? ?? ? ? ????.

??? templet ? toolbar ???? ????.

 <code class="javascript">cols: [[ {field: 'status', title: 'Status', templet: function(d){ return d.status === 1 ? '<span style="color:green;">Active</span>' : '<span style="color:red;">Inactive</span>'; }} ,{field: 'actions', title: 'Actions', toolbar: '#barDemo'} ]]</code>

??? ????? ?? ?? ???? ID barDemo ?? ???? ??? ?? ????? ?? ?? ?????.

Layui? ??? ?? ??? Pagination? ??? ??????

Layui? ??? ?? ??? ??? ??? ??????. Pagination? ?????? ????? page ??? true ? ??????. table.render() ?? :

 <code class="javascript">table.render({ // ... other options ... page: true });</code>

????? ??? ??? Pagination ???? ???? ?????. Layui? ? ???? ?? ???? ?? ? ??? ?????. ?? ??? ???? Pagination? ??? ??? ?? ? ? ????.

• limit : ??? ? ? ?.
• limits : ???? ??? ??? ??? ? ? ?? ?? ??? ?? ??.
• layout : ?? ??? ?? ??? ????? (? : 'count', 'prev', 'page', 'next', 'limit', 'skip').
• curr : ?? ??? ??? ?????. ?? ?????? ? ? ?????.

? ? ??? ??? ?? ????? ?? ??? ?? ? limit ???? Backend API? ???? ??? ?? ??????. ??? ?? ???? ??????.

Layui? ??? ?? ??? ??? API? ????? ?????????

Layui? ???? ??? API? ????? AJAX (????? jQuery? $.ajax() ?? ????? ?? fetch() API)? ???? ???? ?? ?? ?? ?? ???? table.render() ??? ?????. ????? ?? ??? ? ??? ?? API ??? ???????.

??? fetch() ???? ????.

 <code class="javascript">layui.use('table', function(){ var table = layui.table; let currentPage = 1; let pageSize = 10; function fetchData(page, limit) { return fetch(`/api/data?page=${page}&limit=${limit}`) .then(response => response.json()) .then(data => { return { data: data.items, // Assuming your API returns an object with 'items' property count: data.totalCount // Assuming your API returns total count }; }); } fetchData(currentPage, pageSize).then(data => { table.render({ elem: '#demo', cols: [[ /* ... your columns ... */ ]], data: data.data, page: { curr: currentPage, limit: pageSize, count: data.count } }); }); });</code>

? ??? /api/data ? ???? ??? ??? ??? ???? ?? ?? ??? ?????. ?? ?? ??? ???? ???? ??????. ???? ????? API ?? ??? ? ??? ??? ???????. ?? ???? ?? ? ? ???? ?? ???? ??? ? ??? ???? currentPage ?????? ?? ??? ???? ?????. ?? ?? ? ?? ???? ?? ?? ??? ??? ?? ?????.

? ??? ???? ???? ?? Layui? ??? ?? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!