【layui】实现分页

最新推荐文章于 2023-03-13 17:14:16 发布

牛哞哞杂记

最新推荐文章于 2023-03-13 17:14:16 发布

阅读量1.6k

点赞数

分类专栏： JavaScript+html+css layui 文章标签： javascript

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_40558766/article/details/108600879

版权

JavaScript+html+css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

layui

1 篇文章 0 订阅

订阅专栏

使用 laypage 实现分页

layui官网地址：点击这里

实现效果：
在这里插入图片描述

代码如下：


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>分页</title>
  <!-- layui.css 可以从官网上下载，再放入自己项目，地址就改成自己项目的地址-->
  <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
</head>
<body>
 
<div id="test"></div> 

 <!-- layui.js 可以从官网上下载，再放入自己项目，地址就改成自己项目的地址-->
<script src="//res.layui.com/layui/dist/layui.js"></script>
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'test' //注意，这里的 test 是上面的 ID，不用加 # 号
    ,count: 100 //数据总数，从服务端得到
    ,limit: 10 //默认显示10条
  });
});
</script>

</body>
</html>

使用 table 进行分页

实现效果
在这里插入图片描述

代码：


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>表格数据分页</title>
  <!-- layui.css 可以从官网上下载，再放入自己项目，地址就改成自己项目的地址-->
  <link rel="stylesheet" href="../layui.css" media="all">
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body>
 
<table class="layui-hide" id="demo" lay-filter="test"></table>

<!-- layui.js 可以从官网上下载，再放入自己项目，地址就改成自己项目的地址-->
<script src="../layui.js"></script>
<script>
layui.use('table', function(){
  var laypage = layui.laypage //分页
  ,table = layui.table //表格
  
  //执行一个 table 实例
  table.render({
    elem: '#demo'
    ,url: '/demo/table/user/' //数据接口
    ,title: '用户表'
    ,page: true //开启分页，true代表开启分页，false代表关闭分页
    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
      ,{field: 'city', title: '城市', width:150} 
    ]]
  });
});
</script>
</body>
</html>

完毕~

牛哞哞杂记

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【layui】实现分页

layui官网地址：点击这里实现效果：代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>分页</title>  <link rel="stylesheet" href="//res.layui.com/layui/dist
复制链接

扫一扫