栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

layui 简单实现 TABLE 分页功能

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

layui 简单实现 TABLE 分页功能

HTML:





MVC:
//模拟生成一个JSON
public ActionResult GetJson2(int pageNo, int pageSize)
{
            Random ra = new Random();//随机数
            int count = pageSize * 10;//总记录数

            string json = "";
            json += "{";
            json += ""count":" + count + ",";

            string data = ""data":[";
            for (int i = ((pageNo - 1) * pageSize); i < (pageNo * pageSize); i++)
            {
                if (data == ""data":[")
                {
                    data += "{"id":" + (i + 1) + ","name":"姓名_" + (i + 1).ToString() + "","age":" + ra.Next(10, 30) + ","sex":"" + ((i % 3 == 0) ? "女" : "男") + ""}";
                }
                else
                {
                    data += ",{"id":" + (i + 1) + ","name":"姓名_" + (i + 1).ToString() + "","age":" + ra.Next(10, 30) + ","sex":"" + ((i % 3 == 0) ? "女" : "男") + ""}";
                }
            }
            json += data + "]";

            json += "}";

            return Content(json);
}
 JSON字符串:
{"count":150,"data":[{"id":1,"name":"姓名_1","age":10,"sex":"女"},{"id":2,"name":"姓名_2","age":20,"sex":"男"},{"id":3,"name":"姓名_3","age":20,"sex":"男"},{"id":4,"name":"姓名_4","age":17,"sex":"女"},{"id":5,"name":"姓名_5","age":14,"sex":"男"},{"id":6,"name":"姓名_6","age":12,"sex":"男"},{"id":7,"name":"姓名_7","age":16,"sex":"女"},{"id":8,"name":"姓名_8","age":14,"sex":"男"},{"id":9,"name":"姓名_9","age":14,"sex":"男"},{"id":10,"name":"姓名_10","age":13,"sex":"女"},{"id":11,"name":"姓名_11","age":13,"sex":"男"},{"id":12,"name":"姓名_12","age":25,"sex":"男"},{"id":13,"name":"姓名_13","age":28,"sex":"女"},{"id":14,"name":"姓名_14","age":22,"sex":"男"},{"id":15,"name":"姓名_15","age":28,"sex":"男"}]}

 预览:


简单说明:
  • 开启分页功能:  page: true,
  • 当前每页记录数: limit: 15,
  • 记录数可选的集合: limits: [15, 30, 50, 100],
  • 从layui传递给mvc的分页参数: request: { pageName: 'pageNo', limitName: 'pageSize' }
  • 在mvc接收layui传来分页参数: public ActionResult GetJson2(int pageNo, int pageSize)
  • layui接收mvc传来的值: 

parseData: function (res) {               

return {

                    "code": 0,//数据类型,必须的
                    "count": res.count,//总记录数,用于分页
                    "data": res.data,//必须的
                }
            }

 

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号