用户登录
用户注册

分享至

LayUI分页基于ASP.NET MVC

  • 作者: 深花瓣
  • 来源: 51数据库
  • 2021-11-08

---恢复内容开始---

今天写了挺久的分页,百度了很多都没有很好的.net实例,今天我来更新一期关于layuitable分页

首先你得理解layui的官方文档的table分页部分,我在这里附上地址 http://www.51sjk.com/Upload/Articles/1/0/305/305425_20210728181602717.html 方便你们随时边看我的实例和lay文档

其实我写的很简单

首先介绍我用到的东西,使用前段模板:layui的table和layui的表单(此处不细提),开发工具:vs2017,数据库:sqlserver2008,orm:ef,框架:asp.net mvc,简单的三层架构

废话不多说,直接上代码

首先是cshtml的页面部分:

<div class="table">
            <table class="layui-table" id="layui_table_id" lay-filter="datatable"></table>
        </div>

定义一个table,此处我采用的三大渲染方式的--方法渲染

js代码:

table.render({//申明table的实例(前面的layui.use,我直接省略,如有需要请直接观看文档)
                id: "datatable",//此处可以看文档
                elem: '#layui_table_id',//指定表格元素
                url: '/release/pxbmbdatapaging',  //请求路径
                where: { pxid: data.value}, //扩展参数,可以传数据到后台
                title: '用户数据表',
                limit: 5,//一页能够显示的最大数目
                cellminwidth: 20 //全局定义常规单元格的最小宽度,layui 2.2.1 新增    
                , page: true//允许分页(一定要开启这个!)
                , method: 'post'  //提交方式
                , cols: [[
                    {
                        field: 'lsh', //json对应的流水号
                        title: '流水号',   //列名
                        sort: true//是否允许排序
                    },
                    {
                        field: 'xm', //json对应的姓名
                        title: '姓名'  //列名
                    },
                    {
                        field: 'xb', //json对应的性别
                        title: '性别'   //列名
                    }
                    ,
                    {
                        field: 'gzdw', //json对应的工作单位
                        title: '工作单位'   //列名
                    }
                    ,
                    {
                        field: 'lxdh', //json对应的联系电话
                        title: '联系电话'   //列名
                    }
                ]]
            });

有的小伙伴很好奇我的where参数是什么,首先我要告诉你,我的这个pxid是根据下拉菜单去选择我要呈现的数据,不去细细探究,你可以忽略

现在写好了js和html,是不是就可以了?

当然不是,你的数据呢???

为了更直观,我直接放出我的数据库

我这个数据库设计很粗糙,简单的思路就是根据pxid(培训id)去查询学生,可以看到我的pxid为3的学生是最多的,那我们就拿这列去实现分页功能

现在有了数据库和前段页面,现在就到写controller的时候了,可能有的小伙伴还不是很懂mvc的工作原理,这个你就得去补课了哦,但是mvc很好理解的!

controller代码:

 /// <summary>
        /// 学员报名表数据分页
        /// </summary>
        /// <returns></returns>
        [httppost]
        public jsonresult pxbmbdatapaging(int page, int limit, int pxid)
        {            
            list<ts_pxbmb> list=bllservice.getpagespxbmb(limit,page,pxid);//根据pxid获得的每页学生
            int count = bllservice.getpagespxbmbcount(pxid);//根据pxid获得的学生总数
            return json(new {code=0,count=count,data=list,msg="get data success!"}); //为什么要写这种格式呢,可以去查看官方文档去看看他的格式要求
        }

可以看到我的这个方法有了三个参数,第一个参数page是我们的页面索引-代表了这是第一页,第二个参数是limit就是我们每页显示的数据是多少,

我上面的js代码标注了limit为5,所以当第一次用户从下拉选择框选择pxid(培训项目时)传过来的值为1,5,pxid这个可以忽略。

可以看到,我使用了实体类列表list<ts_pxbmb>去获得我的数据,现在让我们转到bll(业务逻辑层去看看)我们是怎么获得值的。

bll代码:

首先是getpagespxbmb的这个方法的代码:

在你理解这段代码之前,首先你的去了解分页查询的sql语句,比如我用的就是sqlserver2008的分页查询用的是row_number() over(order by ** asc这个函数!建议你去百度了解一下(针对初学者了解分页的原理)

public static list<ts_pxbmb> getpagespxbmb(int pagesize,int pageindex,int pxid)
        {
            var start = pagesize * pageindex - pagesize + 1;//根据分页的页面去选择数据的开始因素
            var end = pagesize * pageindex;//获得分页的最后因素
            string sql = "select * from(select row_number()  over(order by id asc) as num ,* from ts_pxbmb) pxbmb where (lsh between "+start+" and "+end+") and pxid="+pxid+"";
            dalservice<ts_pxbmb> pxxx = new dalservice<ts_pxbmb>();
            list<ts_pxbmb> list = pxxx.selectmodelsbysql(sql).tolist();
            return list;
        }  
提示,我的两个方法的参数顺序不是一致的哦,所以你得注意!但这并不影响你的理解
至于为什么要这么写start和end?你可以想象 当我们穿过来的pageindex(页数)为1时,pagesize为5时,pxid为3时,start为1,end为5,那么我执行sql语句得到的结果就是,培训id为3的项目报名的学生的流水号从1到5(即从第一个到第五个)
在第二次传入的时候,pageindex(页数)为2时,pagesize为5时(pagesize是不变的),pxid为3时,那么我执行sql语句得到的结果就是,培训id为3的项目报名的学生的流水号从6到10(即从第六个到第十个)
执行后返回数据

再接下来就是getpagespxbmbcount的这个方法的代码
这个代码就是获得当pxid(培训项目)为某个值的时候,报名该培训项目学生的数量为多少。
public static int getpagespxbmbcount(int pxid) {
            string sql = string.format("select * from ts_pxbmb where pxid='"+pxid+"'");
            dalservice<ts_pxbmb> pxxx = new dalservice<ts_pxbmb>();
            int value = pxxx.selectcount(new ts_pxbmb(), sql);
            return value;
        }

很容易理解,具体的dal执行方法我就不说了,和ado.net一样

得到了数据后我们就整体的过一遍吧

提前说一句,我的测试pxid为3,它一共有13名学生!

现在我们运行看看

 

可以看到我们的数据已经出来了,layui的强大功能展现的淋漓尽致,你还有什么理由不用他呢?
本次实例很简单,希望某些大神可以给点关注,给点评价,菜鸟一枚,还望各位海涵,如有代码错误或者其他漏点,请与我联系,我将会及时改正,希望与博客园的各位大佬共同进步!每天学习一点点小知识!

 

软件
前端设计
程序设计
Java相关