好的，以下是一个简单的示例代码，你可以根据自己的需求进行修改：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鲜花列表</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<table class="layui-table">
<thead>
<tr>
<th>
<input type="checkbox" name="all" lay-skin="primary" lay-filter="selectAll">
</th>
<th>鲜花照片</th>
<th>描述</th>
<th>
<a href="javascript:;" class="layui-table-sort layui-inline" lay-sort="price">价格</a>
</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tableData">
<!-- 这里需要动态生成表格数据 -->
</tbody>
</table>
</div>
</div>
<div id="page"></div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
// 全选
layui.use(['form'], function(){
var form = layui.form;
form.on('checkbox(selectAll)', function(data){
var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
child.each(function(index, item){
item.checked = data.elem.checked;
});
form.render('checkbox');
});
});
// 动态生成表格数据
$(function(){
var data = [
{id: 1, img: 'flower1.jpg', desc: '这是一朵美丽的玫瑰花', price: 50},
{id: 2, img: 'flower2.jpg', desc: '这是一朵香气扑鼻的百合花', price: 80},
{id: 3, img: 'flower3.jpg', desc: '这是一朵娇艳欲滴的牡丹花', price: 120},
{id: 4, img: 'flower4.jpg', desc: '这是一朵清新自然的郁金香', price: 70},
{id: 5, img: 'flower5.jpg', desc: '这是一朵高贵典雅的兰花', price: 150},
{id: 6, img: 'flower6.jpg', desc: '这是一朵芬芳四溢的茉莉花', price: 40},
{id: 7, img: 'flower7.jpg', desc: '这是一朵美轮美奂的樱花', price: 90},
{id: 8, img: 'flower8.jpg', desc: '这是一朵
粉嫩可爱的海棠花', price: 60},
{id: 9, img: 'flower9.jpg', desc: '这是一朵神秘高贵的蝴蝶兰', price: 200},
{id: 10, img: 'flower10.jpg', desc: '这是一朵清新自然的向日葵', price: 30},
{id: 11, img: 'flower11.jpg', desc: '这是一朵可爱俏皮的满天星', price: 20},
{id: 12, img: 'flower12.jpg', desc: '这是一朵富贵荣华的万年青', price: 100},
];
var html = '';
for(var i=0; i<data.length; i++){
html += '<tr>';
html += '<td><input type="checkbox" name="id[]" lay-skin="primary" value="'+data[i].id+'"></td>';
html += '<td><img src="'+data[i].img+'" width="80" height="80"></td>';
html += '<td>'+data[i].desc+'</td>';
html += '<td>'+data[i].price+'</td>';
html += '<td>';
html += '<a href="javascript:;" class="layui-btn layui-btn-xs">查看</a>';
html += '<a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-normal">编辑</a>';
html += '<a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger">删除</a>';
html += '</td>';
html += '</tr>';
}
$('#tableData').html(html);
});
// 分页
layui.use(['laypage'], function(){
var laypage = layui.laypage;
laypage.render({
elem: 'page',
count: 12,
limit: 6,
layout: ['prev', 'page', 'next', 'skip', 'count'],
jump: function(obj, first){
if(!first){
console.log(obj.curr, obj.limit);
// 这里可以根据当前页数和每页显示数量发送请求获取数据
// 然后重新生成表格数据
}
}
});
});
</script>
</body>
</html>
```
以上代码使用了layui框架，其中包括了表格、分页等常用组件。你可以在头部引入layui相关的样式和脚本文件，然后根据自己的需求进行修改、扩展。
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
