layui分页效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了layui分页效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5631字，纯文字阅读大概需要9分钟。
内容图文
layui分页效果的显示
- 导入layui的css和js文件
- 在html中写入分页的div
<!-- 创建一个空的div存放分页组件 -->
<div>
<div id="page_container"></div>
</div>
- 在
<script>中
// 表单初始化
var form, element, laypage
layui.use(['form', 'element', 'laypage'], function () {
element = layui.element,
form = layui.form,
laypage = layui.laypage;
//分页
laypage.render({
elem: "page_container",
count: {{result.length}}, //总页数
limit:5,
skin: '#1E9FFF', //自定义选中色值
skip: true, //开启跳页
jump: function(obj, first){
if(!first){
layer.msg('第'+ obj.curr +'页', {offset: 'b'});
}
}
});
});
ps:
数据：
<div class="layui-row">
<table class="layui-table">
<colgroup>
<col width="450" />
<col width="80" />
<col />
</colgroup>
<thead>
<tr>
<th>试卷列表</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- result是你要遍历的数据 -->
{{each result}}
<tr>
<td><input id="exam_id" type="hidden" value="{{@$value.exam_id}}" />试卷{{$index + 1}}</td>
<td>
{{if $value.is_answer === 1}}
<a name="brush" href="/student/brush?id={{@$value.exam_id}}" class="layui-btn layui-btn-warm layui-btn-xs">
<i class="layui-icon layui-icon-edit">重新答题</i>
</a>
<a name="view_result" href="{{@$value.exam_id}}" class="layui-btn layui-btn-normal layui-btn-xs">
<i class="layui-icon layui-icon-add-circle">查看结果</i>
</a>
{{else if $value.is_answer === 0}}
<a name="brush" href="/student/brush?id={{@$value.exam_id}}" class="layui-btn layui-btn-xs">
<i class="layui-icon layui-icon-edit">开始答题</i>
</a>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
源码：
{{extend './comment/layout.art'}}
{{block 'nav'}}
<li class="layui-nav-item layui-this"><a href="/student/index">刷题</a></li>
<li class="layui-nav-item"><a href="/student/wrong">错题本</a></li>
<li class="layui-nav-item"><a href="/student/more">个人中心</a></li>
{{/block}}
{{block 'main'}}
<!-- 页面主体 -->
<div class="body layui-container">
<!-- 查询条件和按钮 -->
<div class="layui-row" style="position: relative; height: 38px">
<form class="layui-form" action="" method="post">
<div class="layui-inline">
<select name="questions_type">
<option value="all">所有题库</option>
<option value="word">Word</option>
<option value="excel">Excel</option>
<option value="ppt">PPT</option>
<option value="windows">Windows基本操作</option>
</select>
</div>
<button {{result.length >= 3 && info_is_complete === false ? 'disabled' : ''}} name="create_examine"
class="layui-btn {{result.length >= 3 && info_is_complete === false ? 'layui-btn-disabled' : ''}}">创建试卷</button>
{{if result.length >=3 && info_is_complete === false}}
<span style="margin-left: 10px; color: red;">请完善个人信息后继续使用</span>
{{/if}}
</form>
</div>
<div class="layui-row">
<table class="layui-table">
<colgroup>
<col width="450" />
<col width="80" />
<col />
</colgroup>
<thead>
<tr>
<th>试卷列表</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{{each result}}
<tr>
<td><input id="exam_id" type="hidden" value="{{@$value.exam_id}}" />试卷{{$index + 1}}</td>
<td>
{{if $value.is_answer === 1}}
<a name="brush" href="/student/brush?id={{@$value.exam_id}}" class="layui-btn layui-btn-warm layui-btn-xs">
<i class="layui-icon layui-icon-edit">重新答题</i>
</a>
<a name="view_result" href="{{@$value.exam_id}}" class="layui-btn layui-btn-normal layui-btn-xs">
<i class="layui-icon layui-icon-add-circle">查看结果</i>
</a>
{{else if $value.is_answer === 0}}
<a name="brush" href="/student/brush?id={{@$value.exam_id}}" class="layui-btn layui-btn-xs">
<i class="layui-icon layui-icon-edit">开始答题</i>
</a>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<!-- 分页 -->
<!-- 创建一个空的div来生成分页组件 -->
<div>
<div id="page_container" style="margin: 0 auto"></div>
</div>
</div>
<div name="card" class="card layui-card" style="display: none;"></div>
{{/block}}
{{block 'script'}}
<script>
// 表单初始化
var form, element, laypage
layui.use(['form', 'element', 'laypage'], function () {
element = layui.element,
form = layui.form,
laypage = layui.laypage;
//分页
laypage.render({
elem: "page_container",
count: {{result.length}}, //总页数
limit:5,
skin: '#1E9FFF', //自定义选中色值
skip: true, //开启跳页
jump: function(obj, first){
if(!first){
layer.msg('第'+ obj.curr +'页', {offset: 'b'});
}
}
});
});
// 创建试卷按钮
$('button[name="create_examine"]').on('click', function (event) {
event.preventDefault()
$.post('/student/generate_exam', {
questions_type: $('select[name="questions_type"]').val()
}, function (res) {
if (res.status === 200) {
layer.msg(res.msg)
window.location.href = '/student/brush?id=' + res.data.exam_id
} else {
layer.msg(res.msg)
}
})
})
// 查看成绩按钮
$('a[name="view_result"]').on('click', function (event) {
event.preventDefault()
$('div[name="card"]').empty()
var exam_id = $(this).attr('href')
$.get('/student/view_exam?id=' + exam_id, function (res) {
if (res.status === 200) {
var score = res.score
var short_answer_score = score.Short_answer_score
short_answer_score = short_answer_score === 0 ? '请等待老师进行批阅' : short_answer_score
var $html =
'<div class="layui-card-body"><div class="count-result"><div class="score-font-style">' +
score.sum_score +
'</div><i class="score-underline"></i></div><div class="layui-collapse"><div class="layui-colla-item"><h2 class="layui-colla-title">详细分数</h2><div class="layui-colla-content"><table class="layui-table" lay-skin="nob"><tbody><tr><td>选择题</td><td>' +
score.choose_score + '</td></tr><tr><td>判断题</td><td>' + score.judge_score +
'</td></tr><tr><td>简答题</td><td>' + short_answer_score +
'</td></tr></tbody></table></div></div></div></div>'
$('div[name="card"]').append($html)
element.init();
layui.use('layer', function () {
const layer = layui.layer;
layer.open({
type: 1,
title: false,
area: '400px',
content: $('div[name="card"]'),
cancel: function () {
$('div[name="card"]').empty()
}
})
})
}
})
})
</script>
{{/block}}
内容总结
以上是互联网集市为您收集整理的layui分页效果全部内容，希望文章能够帮你解决layui分页效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】