layui分页

时间:2022-11-13 20:36:15

毕业已经两年,期间经历了很多。一个人欢笑与哭泣,在墙角、在路边、在床上。每天搭乘首班车来到公司,每天无数次反省自己,每天每天再问自己为什么活着。

一、下载并引用css和js

地址:点我

<link href="~/MyPlugin/layui/css/layui.css" rel="stylesheet" />
<script src="~/MyPlugin/layui/layui.js"></script>

二、设置容器

<ul id="biuuu_city_list"></ul>   //承载数据
<div id="layuiDemo"></div> //存放分页

三、编写js

<script>
layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage,
                layer = layui.layer;
            var nums = 10; //每页出现的数据量
            //调用分页
            laypage({
                cont: 'layuiDemo',//分页存放地址
                pages: Math.ceil(data.length / nums), //得到总页数
                skip: true,
                jump: function (obj) {
                    var thisData = data.concat().splice(obj.curr * nums - nums, nums);//obj.curr 行号
                    $("tbody").empty();
                    $.each(thisData, function (index, item) {
                        var trNew = $("<tr></tr>");
                        var td2 = $("<td>" + item.SERVICE_ID + "</td>");
                        td2.appendTo(trNew);
                        var td11 = $("<td>" + item.USER_ID + "</td>");
                        td11.appendTo(trNew);
                        var td3 = $("<td>" + item.USER_IP + "</td>");
                        td3.appendTo(trNew);
                        var td4 = $("<td>" + item.RETURN_CODE + "</td>");
                        td4.appendTo(trNew);
                        var td5 = $("<td>" + ConvertJSONDateToJSDateObject(item.VISIT_TIME).format("yyyy/MM/dd") + "</td>");
                        td5.appendTo(trNew);
                        var table = $("tbody");
                        table.append(trNew);
                    });
                }
            });         });
</script>

layui分页的更多相关文章

  1. LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>&gt ...

  2. 最易懂的layui分页

    该篇文章是在layui前端框架之分页基础上简洁化和详细化. 首先该示例采用的是Spring+MyBatis Plus+SpringMVC(常规的SSM框架),持久层换成MyBatis也行. 至于lay ...

  3. springBoot mybatis mysql pagehelper layui 分页

    <!-- 加入 pagehelper 分页插件 jar包--><dependency> <groupId>com.github.pagehelper</gro ...

  4. 二十九、layui分页插件的使用

    <div id="page1"></div> <script> //开启分页 var page = 1; function findstoreL ...

  5. tp5 设置layui分页

    \thinkphp\library\think\paginator\driver 添加 Layui.php <?php namespace think\paginator\driver; use ...

  6. SSM项目layui分页实例

    最近学了layui,发现其中的分页挺有意思的,所以整理了一下,一遍自己随时查看.(官方文档上已经很详细了,当中有不足的地方欢迎大家指出) 关于前台的js文件,css样式,js样式,大家可以到官网下 本 ...

  7. 基于MVC框架layui分页控件实现前端分页信息写法

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak@{ ViewBag.Title = ...

  8. js layui 分页脚本

    //分页 layui.use(['laypage'], function(){ var laypage = layui.laypage; laypage.render({ elem: 'page' , ...

  9. LayUI分页基于ASP&period;NET MVC

    ---恢复内容开始--- 今天写了挺久的分页,百度了很多都没有很好的.Net实例,今天我来更新一期关于layuiTable分页 首先你得理解layui的官方文档的Table分页部分,我在这里附上地址 ...

随机推荐

  1. 3&period;OGG函数

    1.COMPUTE     一般用来计算目标端和源段的字段值,使用这个函数计算出目标端对应列想要的值 Use the @COMPUTE function to return the value of ...

  2. IE11新文档模式Edge介绍与评估,及在WebBrowser应用中的使用。

    浏览器模式与文档模式概念是怎么来的? 1.浏览器模式与文档模式概念起源 为了解决兼容性的问题,在IE浏览器(IE8, IE9, IE10)中,引入了浏览器模式和文档模式两个概念,浏览网页时可以通过按F ...

  3. GP的使用心得

    在ArcEngine时,GP无疑是GIS开发者的神器.自ArcEngine9.2开始新增一个程序集ESRI.ArcGIS.Geoprocessor,它能调用包含扩展模块在内的所有Geoprocessi ...

  4. 【英语】Bingo口语笔记&lpar;41&rpar; - 有关爱情的表达

  5. Alibaba

    题意: 有n个东西在一条路上,已知他们的位置,和能获得他们的最后期限,求能获得n个东西的最小总时间. 分析: 想到了求”未来费用问题", dp[i][j][k]表示获得区间长i起点为j的所有 ...

  6. BrandZ:2016年全球最具价值品牌百强榜&lpar;完整报告&rpar;

    https://wppbaz.com/admin/uploads/files/BZ_Global_2016_Report.pdf Millward Brown编制的BrandZ最新排行榜(2016 B ...

  7. MAMP升级mysql5&period;6到5&period;7

    RT 1.先把mamp环境停掉 sudo sh /Applications/MAMP/bin/stop.sh 2.然后使用brew安装mysql5.7 brew install mysql 3.默认安 ...

  8. java常用类--字符串

    String import java.io.IOException; import java.util.Arrays; public class Linkin { public static void ...

  9. NVIDIA 驱动安装&lpar;超详细&rpar;

    目录 1. 删除原有驱动 2. 安装依赖 3. 禁用nouveau驱动: 4. reboot 5. 获取kernel source (important) 6. 关掉x graphic 服务 7. 安 ...

  10. RF&comma; GBDT&comma; XGB区别

    GBDT与XGB区别 1. 传统GBDT以CART作为基分类器,xgboost还支持线性分类器(gblinear),这个时候xgboost相当于带L1和L2正则化项的逻辑斯蒂回归(分类问题)或者线性回 ...