layui框架与框架与SSM前后台交互的方法前后台交互的方法
今天小编就为大家分享一篇layui框架与SSM前后台交互的方法,具有很好的参考价值,希望对大家有所帮助。
一起跟随小编过来看看吧
采用layui前台框架实现前后台交互,数据分页显示以及删除操作,具体方式如下:
一、数据分页显示一、数据分页显示
1.前端
(1)html页面
<!--轮播数据分页显示-->
<table class="layui-hide" id="content_lbt" lay-filter="content_lbt_filter"></table>
(2)请求渲染数据
$(function() {
/*轮播数据分页显示*/
layui.use(['table', 'update'], function() {
var table = layui.table,
upload = layui.upload;
table.render({
elem: '#content_lbt',
height: 500
//,url: 'data/content_lbt.json' //数据接口
,
url: 'http://localhost:9911/cms/queryCarouselList' //数据接口
,
page: true //开启分页
,
loading: true,//分页查询是否显示等待图标
text: {//若查询记录为空,执行此操作
none: '暂无相关数据'
} //默认:无数据。注:该属性为 layui 2.2.5 开始新增
,
cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,
cols: [
[{
field: 'id',
width: '10%',
title: 'ID',
sort: true
}, {
field: 'posterId',
width: '10%',
title: '上传者ID',
sort: true
}, {
field: 'posterName',
width: '15%',
title: '上传者姓名'
}, {
field: 'description',
width: '28%',
title: '描述',
minWidth: 200
}, {
field: 'photoPath',
width: '10%',
title: '图片',
minWidth: 100
}, {
field: 'createTime',
width: '10%',
title: '上传时间',
minWidth: 100
}]
],
request: {
pageName: 'page',
limitName: 'size'
},
limit: 10,
limits: [10, 20, 30, 40, 50]
评论0