还是那句老话,好记性不如烂笔头。记得以前的一个Demo项目里面有分页,但是没有用插件,自己手写的分页处理,但是效果并不是很好,最近接触到插件BootstrapTable,风格和Bootstrap统一,现在就来说说怎样使用它。
初上手,直接套json数据进去,然后设置分页方式为client',很快表格就做出来,但是一般项目中都是使用后台来进行分页的,不可能一下从数据库从捞出成千上万条数据,先不说流量的问题,客户端的渲染也吃力。在使用服务器后端分页的过程中,也遇到了一些问题,相信大部分初次接触BootstrapTable的人应该都会遇到。所以特此写一个完整的例子,后面应该还会继续完善,包括增、删、改。
好,废话少说,上代码。
先上项目架构:
项目使用maven构建,由于项目结构不是很复杂,所以就不做过多介绍。 接下来看index.jsp
重要的几点:
1、导入必要的css文件和js文件,并注意版本问题,这个后面会谈
2、queryParams:这是在点击分页或者初次加载表格的时候,前端向后端传递的数据,有2个,分别是limit和offset,limit表示请求的记录条数,offset表示记录的偏移量
3、dataField:表示后端传递的对象数据,名字要与对象的名字相同。
再来看Controller:
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<String,Object> getPageInfo(int limit,int offset) {
System.out.println("limit is:"+limit);
System.out.println("offset is:"+offset);
UserDao userDao = new UserDao();
Map<String,Object> map = userDao.queryPageInfo(limit,offset);
return map;
}
}
Controller接收前端传过来的limit和offset参数,然后根据这2个参数调用dao层方法来获取数据。再看UserDao:
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<String,Object> queryPageInfo(int limit,int offset) {
String sql = "from User";
Session session = this.getSession();
Query query = session.createQuery(<a href="/tag/sql/" target="_blank" class="keywords">sql</a>);
query.setFirstResult(offset);
query.setMaxResults(limit);
List<User> userList = query.list();
String <a href="/tag/sql/" target="_blank" class="keywords">sql</a>2 = "select count(*) from User";
int totalRecord = Integer.parseInt(session.createQuery(<a href="/tag/sql/" target="_blank" class="keywords">sql</a>2).uniqueResult().toString());
Map<String,Object> map = new HashMap<String,Object>();
map.put("total",totalRecord);
map.put("data",userList);
return map;
}
}
userDao也是比较简单的,关键就是total和data了,这是要返回到前台的数据,注意名字要和前台相对应,你只要返回实体数据和记录总数就可以了,剩下的BootstrapTable替你搞定。 接下来在看看entity层的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 + "]";
}
}
还有几个配置文件,分别是SpirngMVC的配置文件,还有web.xml以及pom.xml,该配的得配上:
SpringMVC-servlet.xml:
<context:component-scan base-package="controller"/>
<bean
class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
web.xml:
pom.xml:
<dependency>
<groupId><a href="/tag/MysqL/" target="_blank" class="keywords">MysqL</a></groupId>
<artifactId><a href="/tag/MysqL/" target="_blank" class="keywords">MysqL</a>-connector-java</artifactId>
<version>5.1.41</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.10.RELEASE</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.8.9</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.9</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.8.9</version>
</dependency>
然后dao层的就算了,很简单。到这里基本上所有的关键都已经展示了,来看看效果吧:
不知道细心的你注意到没有,右上角的一个按钮明显大了一圈,这不太好,其实是它左边2个按钮小了一圈,在网上找了很久,基本上没有人遇到这样的问题,没办法,逼我出绝招,使用调试器跟踪这两个按钮元素,最后使用jQuery在表格加载完毕然后手动改变其大小,然后正常了。
当然,这只涉及到了查数据,还有数据的删除、新增和修改,后面再来介绍这些的实现,其实最关键的还是查,查做出来了,其他的就水到渠成了。