BootstrapTable usage backend uses SpringMVC+Hibernate-JS Tutorial-php.cn

This article is mainly about letting you play with BootstrapTable easily. The backend uses SpringMVC+Hibernate, which has a certain reference value. Interested friends can refer to it

It’s still the old saying, it’s not as easy to remember as it is Bad writing. I remember that there was pagination in a previous Demo project, but no plug-in was used. I hand-written the paging process, but the effect was not very good. Recently I came into contact with the plug-in BootstrapTable, which has the same style as Bootstrap. Now let’s talk about how to use it.

When you first get started, you can directly insert json data into it, and then set the paging method to client'. The table will be created quickly. However, in general projects, the background is used for paging, and it is impossible to start paging at once. Thousands of pieces of data were retrieved from the database. Not to mention the traffic problem, the client-side rendering was also difficult. In the process of using server back-end paging, I also encountered some problems. I believe that most people who come into contact with BootstrapTable for the first time will encounter them. So hereby write a complete example, which should be continued to be improved later, including additions, deletions, and changes.

Okay, stop talking nonsense and get on with the code.

Let’s start with the project structure:

The project is built using maven. Since the project structure is not very complicated, I won’t introduce it too much.
Next look at index.jsp

<%@ page contentType="text/html;charset=UTF-8"%>          
 
Bootstrap-table样例演示

Copy after login

Important points:

1. Import the necessary css files and js files, And pay attention to the version issue, which will be discussed later.

2. queryParams: This is the data passed from the front end to the back end when clicking paging or loading the table for the first time. There are two data, namely limit and offset. Limit means The number of records requested, offset represents the offset of the record

3. dataField: represents the object data passed by the backend, and the name must be the same as the name of the object.

Let’s look at the Controller again:

package controller; import java.util.Map; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import dao.UserDao; @Controller public class BootstrapTableController { @RequestMapping("/getPageInfo") public @ResponseBody Map getPageInfo(int limit,int offset) { System.out.println("limit is:"+limit); System.out.println("offset is:"+offset); UserDao userDao = new UserDao(); Map map = userDao.queryPageInfo(limit, offset); return map; } }

Copy after login

The Controller receives the limit and offset parameters passed from the front end, and then calls based on these two parameters. layer method to obtain data. Look at UserDao again:

package dao; import java.util.HashMap; import java.util.List; import java.util.Map; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.Transaction; import org.hibernate.cfg.Configuration; import org.hibernate.query.Query; import entity.User; public class UserDao { private Session session; private Transaction transaction; public Session getSession() { Configuration config = new Configuration().configure(); SessionFactory sessionFactory = config.buildSessionFactory(); Session session = sessionFactory.openSession(); return session; } public Map queryPageInfo(int limit, int offset) { String sql = "from User"; Session session = this.getSession(); Query query = session.createQuery(sql); query.setFirstResult(offset); query.setMaxResults(limit); List userList = query.list(); String sql2 = "select count(*) from User"; int totalRecord = Integer.parseInt(session.createQuery(sql2).uniqueResult().toString()); Map map = new HashMap(); map.put("total", totalRecord); map.put("data", userList); return map; } }

Copy after login

userDao is also relatively simple. The key is total and data. This is the data to be returned to the front desk. Note that the name must be the same as the front desk Correspondingly, you only need to return the entity data and total number of records, and BootstrapTable will do the rest for you.
Next, let’s take a look at the User in the entity layer

package entity; public class User { private int id; private String name; private int age; private String address; public User() { super(); } public User(int id,String name, int age, String address) { super(); this.id = id; this.name = name; this.age = age; this.address = address; } public String getName() { return name; } public int getId() { return id; } public void setId(int id) { this.id = id; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } @Override public String toString() { return "User [id=" + id + ", name=" + name + ", age=" + age + ", address=" + address + "]"; } }

Copy after login

There are also several configuration files, namely the SpirngMVC configuration file and web.xml And pom.xml, what should be matched should be matched:

SpringMVC-servlet.xml:

Copy after login

web.xml:

  Archetype Created Web Application  SpringMVC org.springframework.web.servlet.DispatcherServlet 1   SpringMVC /   default *.css   default *.js   default *.ttf   default *.woff   default *.woff2

Copy after login

pom.xml:

 4.0.0 Demo BootstrapDemo war 0.0.1-SNAPSHOT BootstrapDemo Maven Webapp http://maven.apache.org   junit junit 3.8.1 test   javax.servlet javax.servlet-api 3.1.0 provided   org.hibernate hibernate-core 5.2.6.Final   mysql mysql-connector-java 5.1.41    org.springframework spring-webmvc 4.3.10.RELEASE   com.fasterxml.jackson.core jackson-core 2.8.9   com.fasterxml.jackson.core jackson-databind 2.8.9   com.fasterxml.jackson.core jackson-annotations 2.8.9    BootstrapDemo

Copy after login

Then forget about the dao layer, it’s very Simple. Basically all the keys have been displayed here. Let’s take a look at the effect:

I don’t know if you have noticed that the button in the upper right corner is obviously larger. Circle, this is not good. In fact, the two buttons on the left are a circle smaller. I have searched online for a long time and basically no one has encountered such a problem. I have no choice but to force me to use a debugger to track these two buttons. button element, and finally use jQuery to manually change its size after the table is loaded, and then it works normally.

Of course, this only involves checking data, as well as deleting, adding and modifying data. We will introduce the implementation of these later. In fact, the most critical thing is checking. Once the check is done, the rest will fall into place. .

The above is the detailed content of BootstrapTable usage backend uses SpringMVC+Hibernate. For more information, please follow other related articles on the PHP Chinese website!