layui 传递前端请求_前端请求后端,后端查询完毕传到前端 ,用layui 将 数据分页...
前端:我用的是layui框架的分页
js 文件
layui.config({
base : "script/"
}).use(['form','layer','jquery','laypage'],function(){
var form = layui.form(),
layer = parent.layer === undefined ? layui.layer : parent.layer,
laypage = layui.laypage,
$ = layui.jquery;
//分页参数
var currentPageAllAppoint = 1;
var totalPageAllAppoint = 0;
var dataLength = 0;
//加载页面数据
var deskData = [];
$(document).ready(function(){
getDataInfo(); // ajax请求
toPage();// 分页
});
function deskDataList(data){
$(".desk_content").html(renderDate(data,currentPageAllAppoint));
//渲染数据
function renderDate(data,curr){
var dataHtml = '';
var currData = data;
if(currData != null && currData.length != 0){
for(var i=0;idataHtml += '
'
+ ''
+ ''+isNull(currData[i].name)+''
+ ''+isNull(currData[i].index)+''
+ ''+isNull(currData[i].roomId)+''
+ ''+isNull(currData[i].players)+''
+ ''+isNull(currData[i].descript)+''
+ ''+isNull(currData[i].observers)+''
+ ''+format(currData[i].createTime)+''
+'';
}
}else{
dataHtml = '
暂无数据';
}
return dataHtml;
}
}
function getDataInfo(){
console.log("getDataInfo");
$.ajax({
type:"post",
async:false,
url:"../../../bim/desk/findDesk",
data:{curr : currentPageAllAppoint},
success:function(data,status){
console.log(data);
totalPageAllAppoint = data.content.last;//总页数(后台返回)
console.log(currentPageAllAppoint);
console.log(totalPageAllAppoint);
deskDataList(data.content.data);
}
});
}
function toPage(data){
//分页
var nums = 10; //每页出现的数据量
laypage({
cont : "page",
pages : totalPageAllAppoint,//TODO 获取后台传进的数据Page中的totalCount 总条数
curr : currentPageAllAppoint,
jump : function(obj,first){
//?第二次的时候怎么判断
currentPageAllAppoint = obj.curr;
if(!first){
getDataInfo();
}
$('.desk_list thead input[type="checkbox"]').prop("checked",false);
form.render();
}
})
}
后端:主要是写一个接口来接收传递过来的数据
第一步:代码实现Controller 类
@RestController
@RequestMapping(path = "/bim/desk",produces = MediaType.APPLICATION_JSON_VALUE)
public class DeskContorller extends BaseController {
@Autowired
private DeskService deskService;
@Autowired
private DeskTransfer deskTransfer;
@RequestMapping(path = "/findDesk")
public Result> findDeskByName( @RequestParam("curr") Integer curr,HttpSession session) throws BizException{
Paginationdesk = this.deskService.findDeskByName((curr - 1) * 10,10);
PagedeskData = desk == null ? null : Page.transfer(desk, this.deskTransfer, curr, 10);
return Result.createSuccessResultFrom(deskData);
}
}
注释:DeskData作为前端的请求结果,传给前端的字段,以及查询内容
具体的查询语句就自己发挥就好,mysql数据库只要加上start,limit就好了
1,Pagination类:(可以写成公共类)
public final class Paginationimplements java.io.Serializable {
private static final long serialVersionUID = -9130388649947529938L;
private final int totalCount; // 总条数:用在Page计算最后一页
private final ListpageRecords; // 数据量
public Pagination(ListpageRecords, int totalCount) {
this.pageRecords = CollectionUtils.isEmpty(pageRecords) ? Collections.emptyList() : Collections.unmodifiableList(pageRecords);
this.totalCount = Math.max(0, totalCount);
}
public Pagination(Record[] pageRecords, int totalCount) {
this(pageRecords == null ? Collections.emptyList() : Arrays.asList(pageRecords), totalCount);
}
public ListgetPageRecords() {
return this.pageRecords;
}
public int getTotalCount() {
return this.totalCount;
}
}
2,Page的实现 (可以写成公共类)
package me.mjzx.foundation.web;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import org.apache.commons.collections4.CollectionUtils;
import me.mjzx.foundation.Pagination;
import me.mjzx.foundation.Transfer;
public final class Page{
// 将从后台取出的Pagination桌子信息,转化成Page的
public static Pagetransfer(Paginationpagination,DeskTransfertransfer,int currPage,
int pageSize) {
Listrecords = Collections.emptyList();
final ListpageRecords = pagination == null ? null : pagination.getPageRecords();
final int totalCount = pagination == null ? 0 : Math.max(0, pagination.getTotalCount());
if (CollectionUtils.isNotEmpty(pageRecords) && transfer != null) {
records = new ArrayList<>(pageSize = Math.max(pageSize, pageRecords.size()));
for (final Record record : pageRecords) {
records.add(transfer.translate(record));
}
}
return new Page<>(currPage, pageSize, totalCount % pageSize == 0 ? totalCount / pageSize : totalCount / pageSize + 1, records);
}
private final int curr; // 当前页 ,
private final int size;// 限制长度
private final int last; // 最后一页
private final Listdata; // 当前页的数据
public Page(int curr, int size, int last, Listdata) {
this.curr = Math.max(1, curr);
this.size = Math.max(1, size);
this.last = Math.max(1, last);
this.data = Collections.unmodifiableList(data);
}
.....此处省略getter ,setter方法
}
3,Transfer转换类
public class DeskTransfer {
@Override
public Desk translate(DeskData value) {
// TODO Auto-generated method stub
return null;
}
@Override // 将Desk转换成DeskData
public DeskData translate(Desk record) {
DeskData deskData = new DeskData();
try {
deskData.setDeskId(record.getId());
deskData.setDescript(record.getDescript());
deskData.setIndex(record.getIndex());
deskData.setName(record.getName());
deskData.setObservers(record.getObservers().toString());
deskData.setRoomId(record.belongTo() == null ? null : record.belongTo().getId());
Match4Ddz match = this.matchService.findMatchByDesk(record.getId());
Listusers = match == null ? null : this.joinService.findJoinUsersByMatch(match.getId());
deskData.setPlayers(users == null || users.size() == 0 ? null : this.tranf(users));
deskData.setCreateTime(record.getCreateTime());
} catch (BizException e) {
e.printStackTrace();
}
return deskData;
}
}
4,DeskData的字段(传到前端显示的字段)
public class DeskData extends BaseData{
private static final long serialVersionUID = 1431046417980934140L;
private Integer deskId;
private String name;
private Integer index;
private Integer roomId;
private Listplayers;
private String descript;
private String observers;
private long createTime;
....此处省略getter setter方法
}
layui 传递前端请求_前端请求后端,后端查询完毕传到前端 ,用layui 将 数据分页...相关推荐
- weblogic请求服务端超时后重发一次请求_记一次后端服务偶发502的排错之旅
现象 最近线上业务反馈,服务不定时的出现502报错.登陆到网关日志平台查询httpcode等于502的,还真的发现同一个服务出现的概率还是蛮高的.所以开始了502的排查之旅. 抓包吧 为了复现问题,直 ...
- android 设置允许http请求_网络请求框架----OkHttp原理
一.前言 在 Android 中,网络请求是一个必不可少的功能,因此就有许多代表网络请求客户端的组件库,具有代表性的有下面三种: Apache 的 HTTP 客户端组件 HttpClient. Jav ...
- 中级前端笔试_在短短8个月内如何获得中级前端开发人员的角色
中级前端笔试 by Matthew Burfield 通过马修·伯菲尔德(Matthew Burfield) 在短短8个月内如何获得中级前端开发人员的角色 (How I got a mid-level ...
- 学java好还是web前端好_到底是学习Java好,还是Web前端好?
要想之后的发展空间比较大的话,我个人的建议还是要往全栈 Web前端开发 优势:人才缺口大,发展前景好,需求量大 前景指数:★★★★★ web前端开发前景大好!其中的HTML5技术更是日趋成熟,HTML ...
- python写前端代码_哪种ide能同时写java和前端代码?
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 我想你们都听过它的传说. 它是唯一的上古神器,什么idea,eclipse,atom ...
- python数据库查询不出结果_记一次pymysql查询不到表中最新插入的数据的问题
问题 本周工作中遇到一个问题,同事用Python和公司的db客户端在团队的测试框架上实现连接池功能,db连接用的是pymysql.但在跑demo时,出现了诡异的现象: 多次select查询表中数据 所 ...
- js long类型精度丢失_后端Long类型传到前端精度丢失的正确解决方式
原因:前端js对Long类型支持的精度不够,导致后端使用的Long传到前端丢失精度,比如现在分布式id生成算法"雪花算法"在使用中就会出现问题. 解决方式: 1.后端的Long类型 ...
- .net core 后台 post设置等待时间_[vueelementadmin]前端发送的post请求的数据,后端接收不到并报EOFException异常的解决方案...
最近在做的以后后台管理的项目,采用前后端分离的方式进行开发,前端采用的是 vue-element-admin 版本,版本为4.2.1,后端服务使用的是springboot进行开发,接口数据交互遵循re ...
- layui 传递前端请求_layui弹出层如何传值?
layui弹出层如何传值?下面本篇文章给大家介绍一下layui弹窗间的传值(layui弹出层传值)(窗口传值).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 主要有两部分从主窗口传 ...
最新文章
- 机械转行的都干啥去了?机械转行计算机难吗?
- ContentObserver类的使用
- 【转】【CUBE】Oracle分组函数之CUBE魅力
- 增强包_情暖冬至 饺子飘香——临沭县兴华学校冬至“趣味包饺子”比赛圆满结束...
- JavaScript 引擎和 Just-in-Time 编译概念,Hot Function 的简单介绍
- pythonista3安装stash_Pythonista下stash安装教程
- web.xml.jsf_看一下即将发布的JSF 2.3 Push支持
- 缓存穿透、缓存击穿与失效时的雪崩效应
- python数据结构与算法
- Linux 一句话 命令
- 网络嵌入之STNE model
- iOS 使用Socket
- jboss mysql_jboss7.1.1配置mysql数据源
- re正则表达式7_{}
- 凡事易学难精,要精通都要天赋
- Java调用OpenDDS(1)-编译安装openDDS-补上了所有网络上其他文章遗漏的细节
- ae去闪插件deflicker使用_夜晚视频灯光去闪烁 Deflicker插件
- 用计算机制作模拟汽车,计算机模拟在汽车行业应用将兴起
- linux中文显示为乱码
- 知识点滴 - 关于苹果认证MFI
热门文章
- robust scene text recognition with automatic rectification
- 枚举反射的应用(sql update语句匹配)
- NLP之路-Deep Learning for NLP 文章列举
- VC中使用GetModuleFileName获取应用程序路径
- C加密 java_c语言的des加密,怎么用java解密
- 眼图 非差分线_TMDS181 的眼图振铃问题
- 我点击一个单选框时另外一个单选框里的内容属性隐藏掉_一个交通工程专业硕士研究生的总结与独白(二):交通生成预测及TransCAD操作...
- python import _ssl_如何在python 2.7.6中导入_ssl?
- python的特性注定了代码无法保密_python 基础
- 如何备份服务器日志到其他服务器_云计算迁移别忘了备份物理服务器和数据