layui 数据表格 ——后台数据获取

jsp或html

<table id="userList" lay-filter="userList"></table>

js

//用户列表
var tableIns = table.render({
    elem: '#userList',
    url : 'userAction_findAll.action',
    cellMinWidth : 95,
    page : true,
    height : "full-125",
    limits : [10,15,20,25],
    limit : 10,
    id : "userListTable",
    cols : [[
        {type: "checkbox", fixed:"left", width:50},
        {field: 'userName', title: '用户名', minWidth:100, align:"center"},
        {field: 'userEmail', title: '用户邮箱', minWidth:200, align:'center',templet:function(d){
            return '<a class="layui-blue" href="mailto:'+d.userEmail+'">'+d.userEmail+'</a>';
        }},
        {field: 'userSex', title: '用户性别', align:'center'},
        {field: 'userStatus', title: '用户状态',  align:'center',templet:function(d){
            return  d.userStatus == '0' ? "正常使用":"<span class='layui-red'>限制使用</span>";
        }},
        {field: 'userGrade', title: '用户等级', align:'center'},
        {field: 'userEndTime', title: '最后登录时间', align:'center',minWidth:150},
        {title: '操作', minWidth:175, templet:'#userListBar',fixed:"right",align:"center"}
    ]]
});

UserAction.java

// 接收前端发送来的分页参数
private int page = 1;
public void setPage(int page) {
    this.page = page;
}
public int getPage() {
    return page;
}
private int limit = 2;
public int getLimit() {
    return limit;
}
public void setLimit(int limit) {
    this.limit = limit;
}

public String findAll(){
    List<User> allUser = this.getUserService().findAllUser(this.getPage(), this.getLimit());
    Map<String, Object> result = new HashMap<String, Object>();
    result.put("code", 0);
    result.put("msg", "");
    result.put("count", this.getUserService().findTotalRecord(key));
    JSONArray array = JSONArray.fromObject(allUser);
    result.put("data", array);
    // 将其转换为JSON数据,并压入值栈返回
    ActionContext.getContext().getValueStack().set("jsonData", JSONObject.fromObject(result));
    return "success";
}

返回JSON数据格式,也是layui数据表格要求的格式

{
  "code": 0,
  "msg": "",
  "count": 15,
  "data": [
    {
      "usersId": "1",
      "userName": "user12",
      "userEmail": "123@qq.com",
      "userSex": "女",
      "userStatus": "0",
      "userGrade": "倔强青铜",
      "userEndTime": "2018-11-11 15:22:33"
    },{
      "usersId": "2",
      "userName": "asd",
      "userEmail": "123@qq.com",
      "userSex": "男",
      "userStatus": "1",
      "userGrade": "秩序白银",
      "userEndTime": "2018-11-11 15:22:33"
    },
    ......
  ]
}

注意:

1.js中table的field需要与返回的数据key相对应,比如field: “userName”“userName”: “asd” 
2.layui的数据表格向url发送请求时,会附上page以及limit这两个参数,所以服务端需要接收并以此为条件查找数据

 

  • 1
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 关于layui数据表格查询后台怎么写的问题,我可以给您一些指导性的回答。如果您使用layui数据表格,您需要编写后台代码来处理数据的查询请求。您可以使用服务器端脚本如PHP、Java、Python等编写后台代码,处理查询请求并返回符合条件的数据。您需要根据您的具体需求和数据结构设计后台代码的逻辑和查询语句。建议您在编写后台代码之前先了解layui数据表格的相关文档和示例代码,以便更好地理解和使用该插件。 ### 回答2: Layui是一款基于JavaScript的前端框架,它包含了丰富的UI组件,可以快速搭建出漂亮的界面。其中,Layui数据表格是一种常用的组件,用于展示和交互数据。 在实现Layui数据表格的查询功能时,我们需要做以下几个步骤: 1. 后台接收参数:前端传递查询条件给后台,一般使用POST方式传递,后台需要接收这些参数。可以使用框架如SpringMVC提供的注解@RequestParam来获取参数值。 2. 构建查询条件:后台接收到参数后,根据这些参数构建查询条件。可以使用SQL语句,例如使用where子句拼接查询条件,或者使用框架如MyBatis提供的动态SQL来实现条件构建。 3. 执行查询操作:使用构建好的查询条件执行查询操作,查询出满足条件的数据。可以通过调用数据库操作API来实现,例如使用JDBC、MyBatis等。 4. 分页查询:对于大数据量的表格,我们一般需要进行分页查询,即每次只查询一页的数据后台需要根据前端传递的分页参数,例如当前页码和每页显示数据量,计算出查询的起始位置和结束位置,并在查询条件中加入这些限制条件。 5. 返回查询结果:将查询出的结果返回给前端,一般使用JSON格式进行返回。可以使用框架提供的工具类将查询结果转换成JSON字符串,然后通过响应对象返回给前端。 综上所述,Layui数据表格的查询后台的实现步骤包括接收参数、构建查询条件、执行查询操作、分页查询和返回查询结果。通过以上步骤,就可以实现Layui数据表格的查询功能。 ### 回答3: Layui是一个基于前端框架的开源库,它提供了丰富的组件和工具,用于简化前端开发。其中的数据表格组件可以进行数据的展示、编辑、删除等操作。要实现Layui数据表格的查询功能,需要在后台进行相应的编写。 首先,需要定义一个后台接口用于接收前端传递过来的查询条件。可以使用常见的后台开发框架,如Spring MVC或Express.js。在该接口中,需要解析前端传递的查询条件,并根据条件在数据库中进行相应的查询操作。 接着,根据接口中接收到的查询条件进行数据库查询。可以使用SQL语句进行查询,也可以使用ORM框架进行对象关系映射。根据具体的业务需求,编写相应的查询语句或者利用ORM框架提供的API进行查询操作。 查询到数据后,需要将查询结果封装成JSON格式返回给前端。可以使用后台框架提供的JSON转换工具,将查询结果转换为JSON字符串。将查询结果返回给前端之后,前端可以根据返回的数据进行展示或者其他的操作。 在前端的页面中使用Layui数据表格组件进行展示,需要设置数据源为后台接口的URL,并指定查询条件。可以使用Layui数据表格配置项进行相应的设置,如设置列属性、分页等。通过发送Ajax请求,请求后台的接口,并将查询条件作为参数传递。接收到后台返回的数据后,根据数据进行表格的渲染和展示。 总之,实现Layui数据表格的查询功能,需要在后台编写相应的接口、数据库查询和返回数据的方法。前端需要配置页面和发送请求,接收并处理后台返回的查询结果。这样就可以实现Layui数据表格的查询功能了。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值