zoukankan      html  css  js  c++  java

  • layui之table分页

    • layui的table分页用于的场景是数据成千上万太多时，可以对数据进行分页展示。
    • 首先展示一下效果图(只有两条数据数据库中，仅仅是为了测试这个layui的table分页)

    　　

    • 首先要做的准备是json的jar包，以及jackson的jar包，大家如果没有的话可以去maven上下载。

    　　

    • 　　然后需要要进行下载的是layui的js和css文件，直接去官网下载就可以。需要在页面中加入自己的js和css文件的位置。
    • <link rel="stylesheet" href="layui/css/layui.css"  media="all">　　
    • <script src="layui/layui.js" charset="utf-8"></script>
      <script src="js/jquery.min.js" charset="utf-8"></script>
    • 接下来废话不多说，就直接上代码吧！
    • 测试的jsp界面
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css"  media="all">
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

</body>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="layui/layui.all.js" charset="utf-8"></script>
<script src="js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
layui.use('table', function(){
    var table = layui.table;
    
    //第一个实例
    table.render({
      elem: '#test'//获取存放数据的table容器，即是table的id
      ,height: 515
      ,method:'post'
      ,cache:false //清除缓存
      ,url: 'MessageServlet?method=layuifind' //数据接口，最终传值数据到jsp的方法 
      ,page: true //开启分页
      ,cols: [[ //表头
       　　
        {field: 'companyname', title: '用户名', 300,sort: true}
        ,{field: 'contacts', title: '联系人', 300,sort: true} 
        ,{field: 'comaddress', title: '地址',  177,sort: true}
      ]]
    });
    
  });

</script>
</html>

    　//field中的sort属性是是否可以对数据进行排序根据相应的属性

    　

    　　代码中的url是进行数据交互的数据接口。接下来是后台操作的代码。

    　　数据接口MessageServlet？layuifind（写你自己的数据接口，也就是进行数据交互的servlet）：

    　　

    package com.servlet;

import java.io.IOException;
import java.io.StringReader;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.service.JsonUtils;
import com.service.MessageService;

import User.Users;
import User.userInfo;
import User.usermess;
import jdk.nashorn.internal.scripts.JS;
import net.sf.json.JSON;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.util.JSONUtils;






@WebServlet("/MessageServlet")
public class MessageServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**
     * 方法选择
     */
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String method = req.getParameter("method");

       if ("layuifind".equals(method)) {
            try {
                layuifind(req,resp);
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
//        
//        
        

    }
    
    private void layuifind(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException, SQLException {
        req.setCharacterEncoding("utf-8");
        
        resp.setContentType("text/html;charset=utf-8");
        
        
        
          //即是点击事件，获取点击跳转的页数，以及每页需要展示的数据 数目，第一次加载默认为page=1&&limit=10
               int page =Integer.parseInt(req.getParameter("page"));
               int limit =Integer.parseInt(req.getParameter("limit"));
               //封装的要传回给前台的数据类
               Users r=new Users();
               //向前端传回状态码 0为正常状态码
               r.setCode(0);
               r.setMsg("获得数据成功");
               //所有的数据数目，并不是单单一页展示的数目
               r.setCount(MessageService.getlayuiinfo(page, limit).size());
               //传递的数据集
               r.setData(MessageService.getlayuiinfo(page, limit));
               //加载处理  可有可无，并不影响
               delay();
               //向前端传递数据并显示
               resp.getWriter().print(JsonUtils.toJson(r));
               //System.out.println(JsonUtils.toJson(r));
    
    }
    
       public void delay(){
            try {
                Thread.sleep(2000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    

}

    封装的需要像前端传输的数据类

    package User;

public class Users {
      /**响应编码*/
    private int code;
    /**响应消息*/
    private String msg;
    /**数据总量*/
    private int count;
    /**数据*/
    private Object data;

    public Users() {
    }

    public Users(int code, String msg, int count, Object data) {
        super();
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = data;
    }

    @Override
    public String toString() {
        return "R [code=" + code + ", msg=" + msg + ", count=" + count + ", data=" + data + "]";
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
    
}

    service，执行查询操作的类

    package com.service;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;


import com.connect.Connect;
import com.sun.org.apache.bcel.internal.generic.Select;

import User.userInfo;
import User.usermess;





//服务层
public class MessageService {
    
    
    //测试layui
    public static List<userInfo> getlayuiinfo(int page,int limit) throws SQLException {
        // 查询语句的执行结果为一个表格，即多个学生对象的集合，所有可以创建数组列表对象来存储
        List<userInfo> lst = new ArrayList<userInfo>();
        // 获取连接对象
        Connection conn = Connect.getConn();
        String sql="select * from information ";
        try {
            // 连接对象conn调用createStatement()方法，创建一个执行SQL语句的对象st
            Statement st = conn.createStatement();
            // 执行SQL语句的对象st调用executeQuery()方法，执行查询语句，将查询到的结果返回到一个结果集中
            ResultSet rs = st.executeQuery(sql);
            // 遍历结果集对象
            while (rs.next()) {
                userInfo mes = new userInfo();
                mes.setCompanyname(rs.getString("companyname"));
                mes.setComaddress(rs.getString("comaddress"));
                mes.setComwebsite(rs.getString("comwebsite"));
                mes.setEmail(rs.getString("email"));
                mes.setLawperson(rs.getString("lawperson"));
                mes.setPostal(rs.getString("postal"));
                mes.setContacts(rs.getString("contacts"));
                mes.setPhone(rs.getString("phone"));
                mes.setFax(rs.getString("fax"));
                mes.setInsattr(rs.getString("insattr"));
                mes.setBelongcom(rs.getString("belongcom"));
                mes.setSummary(rs.getString("summary"));
                mes.setTechname(rs.getString("techname"));
                mes.setTechchat(rs.getString("techchat"));
                mes.setDiscuss(rs.getString("discuss"));
                mes.setSubject(rs.getString("subject"));
                mes.setDomain(rs.getString("domain"));
                mes.setVocation(rs.getString("vocation"));
                mes.setTogemodern(rs.getString("togemodern"));
                mes.setTogecom(rs.getString("togecom"));
                mes.setStatus(rs.getString("status"));
                mes.setMoney(rs.getString("money"));
                
            
                lst.add(mes);
            }
        } catch (Exception e) {
            System.out.println(e.getMessage());
        } finally {
            // 资源使用完之后，如果没有关闭，则需要关闭
            if (conn != null) {
                conn.close();
            }
        }
        //从所有的数据对象lst找出需要展示的数据存在一个新的list中
           List<userInfo> list = new ArrayList<>();
            int start=(page-1)*limit;//判断当前也开始的数据位置
            for (int i =start; i <start+limit&&i<lst.size(); i++) {
                list.add(lst.get(i));
            }
            return list;
    
    }
    
    
    


}

    需要将users响应数据类的对象转json数组存储

    package com.service;

import java.text.SimpleDateFormat;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class JsonUtils {
       /**
     * 序列化成json
     * */
    public static String toJson(Object obj) {
        // 对象映射器
        ObjectMapper mapper = new ObjectMapper();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd HH:mm:ss");
        mapper.setDateFormat(sdf);
        
        String result = null;
        // 序列化user对象为json字符串
        try {
            result = mapper.writeValueAsString(obj);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return result;
    }
}
  • 相关阅读:
    销售排行榜
    视频合并的问题
    全排列的问题
    24点的游戏
    分数拆分
    竖式
    MVVM
    package
    WP8.1APP执行流程
    W
  • 原文地址：https://www.cnblogs.com/moxihuishou/p/13900093.html
Copyright © 2011-2022 走看看