当前位置:首页 > 网站模板 > 正文内容

layui前端页面模板加分页增删查改(layui 增删改查 完整案例)

网站模板2年前 (2023-01-13)1285

本篇文章给大家谈谈layui前端页面模板加分页增删查改,以及layui 增删改查 完整案例对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

layui的数据表格(table)分页篇

首先,最简单的先渲染一个表格,参考官方示例:

这里先讲讲一些渲染细节:

layui内部就是根据cols属性里面每项的field字段来输出数据(该字段跟后台返回的数据字段一致即可输出)。

另外,layui拼接html字符串的方式多次应用数组join方法的方式,这种方式值得安利一波:

否则用传统方式拼接html字符串就相形见绌了(不推荐):

接着,看一下分页:

从图中可以看出,我们请求地址没加请求参数,layui自动帮我们添加了page,limit的请求参数,默认值分别为1, 10,这是开启了分页的缘故(page: true)。那么,请求参数名是否可以定制呢?答案是可以的,参考request属性:

同样,响应参数名也是可以定制的,参考response属性:

注意,以上只是定制了参数名字而已,接下来才是重头戏:定制数据格式,参考parseData属性:

parseData可以帮助我们定制好与layui对应的表格数据格式,从而输出表格,这是很有用的,毕竟后端前辈返回的数据格式未必跟layui的一致呀。有了以上3种定制方式,我们就不惧输出数据表格了。采用这种方式输出的就是真正的实现了分页,下文提及的方式可不是真正的分页。

-----------------------快乐的分割线,前方jojo高能-----------------------

可能也有小伙伴无视了 request、response、parseData 三剑客,转而用起了data属性,过程如下:

拒绝了使用url属性请求,转用jquery ajax请求数据,最后再tableIns.reload({ data: res.data })一波,达成666操作。

这种做法从结果上看,似乎是可以的。。。。。。搭嘎,口头挖撸。

因为通过data属性赋值是不会分页去请求后端的,而是直接请求全部数据,然后layui内部进行前端分页处理,这样一来,如果数据量大的话,恐怕页面就要刷好一会儿了o(╥﹏╥)o。(只有通过data方式赋值才会进行前端分页处理,所以url方式可以放心食用)。

前台用layui框架实现表格分页,后台用asp.net的问题

layui的分页会把limit和page(也就是每页条数和当前页,大概是这个名字,具体看layui的数据表格说明)传到后台,你需要在后台接收这两个参数然后展示相应的内容。你可以在运行网页的时候,在网页里按f12,在网络监控中点下第2页,看看是否正确的向后台发送了请求,如果传参正确那就是后台的问题,这个没啥简单办法一说,要看你后台分页代码了。

使用layui前端框架,进行分页,php怎样传递数据

//以下将以jquery.ajax为例,演示一个异步分页

function demo(curr){

  $.getJSON('test/demo1.json', {

    page: curr || 1 //向服务端传的参数,此处只是演示

  }, function(res){

    //此处仅仅是为了演示变化的内容

    var demoContent = (new Date().getTime()/Math.random()/1000)|0;

    document.getElementById('view1').innerHTML = res.content + demoContent;

    //显示分页

    laypage({

      cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:div id="page1"/div

      pages: res.pages, //通过后台拿到的总页数

      curr: curr || 1, //当前页

      jump: function(obj, first){ //触发分页后的回调

        if(!first){ //点击跳页触发函数自身,并传递当前页:obj.curr

          demo(obj.curr);

        }

      }

    });

  });

};

//运行

demo();

Layui的数据表格增删改,后端回传json格式封装

最近有个需求,实现前端页面一个数据表格可编辑,随原页面的表单提交json数据,然后后端回传显示。Layui原来也没怎么用过,记个笔记记录一下。

添加行的有个小bug,超过分页行数后,再添加会变成无数据。所以只好初始设置分页为50。

另外,搞了个隐藏的标签随表单一起提交:

从数据表格的缓存中获取表格内输入的值放入标签:

这个之前从table的缓存中提取得到提交的json串含有Layui数据表格的索引,回传Layuitable显示的时候不需要,需要去掉。所以后端用了个正则表达式去除。

为了满足layui数据表格的返回格式,封装了一下数据格式。

layUI分页处理--乐字节前端

font color="red"模块加载名称: laypage /font

laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。

通过核心方法: laypage.render(options) 来设置基础参数。

当分页被切换时触发,函数返回两个参数: obj (当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)

font color="red"模块加载名称: table /font

创建一个table实例最简单的方式是,在页面放置一个元素 table id="demo"/table ,然后通过 table.render() 方法指定该容器。

数据接口 user.json

在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。

1) 带有 class="layui-table" 的 table 标签。

2) 对标签设置属性 lay-data="" 用于配置一些基础参数

3) 在 th 标签中设置属性 lay-data="" 用于配置表头信息

页面已经存在了一段有内容的表格,由原始的table标签组成,只需要赋予它一些动态元素。

执行用于转换表格的JS方法

layui前端页面模板加分页增删查改的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于layui 增删改查 完整案例、layui前端页面模板加分页增删查改的信息别忘了在本站进行查找喔。

扫描二维码推送至手机访问。

版权声明:本文由我的模板布,如需转载请注明出处。


本文链接:http://60200875.com/post/775.html

分享给朋友:

“layui前端页面模板加分页增删查改(layui 增删改查 完整案例)” 的相关文章

抖音书单背景素材图片(热门书单背景图片)

抖音书单背景素材图片(热门书单背景图片)

今天给各位分享抖音书单背景素材图片的知识,其中也会对热门书单背景图片进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、抖音里一本书的图片,上面全是经典语录,怎么...

下载ppt(下载ppt的软件)

下载ppt(下载ppt的软件)

今天给各位分享下载ppt的知识,其中也会对下载ppt的软件进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、如何下载网页中的ppt 2、电脑上怎么下载PPT...

包含PPT复合模板修饰全文怎么设置的词条

包含PPT复合模板修饰全文怎么设置的词条

今天给各位分享PPT复合模板修饰全文怎么设置的知识,其中也会对进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、ppt2010 什么叫使用“复合”模板修饰全文?...

塑料模板多少钱一平方水沟(塑料水沟盖板模具价格)

塑料模板多少钱一平方水沟(塑料水沟盖板模具价格)

今天给各位分享塑料模板多少钱一平方水沟的知识,其中也会对塑料水沟盖板模具价格进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、求助。塑料建筑模板的价格是按什么算...

自媒体视频剪辑教学视频(自媒体平台)

自媒体视频剪辑教学视频(自媒体平台)

今天给各位分享自媒体视频剪辑教学视频的知识,其中也会对自媒体平台进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、做自媒体教程视频 2、自媒体视频剪辑教学视...

手机支架3d模型图纸带尺寸(手机支架3d模型图纸带尺寸吗)

手机支架3d模型图纸带尺寸(手机支架3d模型图纸带尺寸吗)

今天给各位分享手机支架3d模型图纸带尺寸的知识,其中也会对手机支架3d模型图纸带尺寸吗进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、3Dmax怎么制作自行车...