layui分页效果

layui分页效果的显示

1. 导入layui的css和js文件
2. 在html中写入分页的div

<!-- 创建一个空的div存放分页组件 -->
<div>
    <div id="page_container"></div>
  </div>

3. 在<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}}