1、datatables.html的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datatables例子</title>
<!--第一步：引入Javascript / CSS （CDN）-->
<!--或者下载到本地，下面有下载地址-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>
</head>
<body>
<table id="table_id_example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>userName</th>
<th>passWord</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
<!--第三步：初始化Datatables-->
$(document).ready( function () {
var table = $('#table_id_example').DataTable({
language: {
url:"zh_CN.txt"
},
"info" : true,
"paging": true,
"processing":false,
"searching": true,
//使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
//data 这里是固定不变的，userName , passWord为你数据里对应的属性
columns: [
{ data: 'userName' },
{ data: 'passWord' },
],
//开启服务器模式
serverSide: true,
//使用ajax异步请求
ajax:{
type:'POST',
url:'user/list1.do'
}
});
} );
</script>
</body>
</html>
2、显示页面：
3、后台代码:
model的User实体类:
package model;
import java.io.Serializable;
public class User implements Serializable{
private static final long serialVersionUID = 1L;
private Integer id;
private String userName;
private String passWord;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassWord() {
return passWord;
}
public void setPassWord(String passWord) {
this.passWord = passWord;
}
}
controller层：
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/list1")
@ResponseBody
public Map<String,Object> list1(Integer start ,Integer length,Integer draw){
Map<String,Object> map =userService.pageDate(start,length);
map.put("draw", draw);
return map;
}
}
service层：
@Service("userService")
public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao;
@Override
public Map<String, Object> pageDate(Integer start, Integer length) {
List<User> users = userDao.findUserPage(start,length);
Integer totel = userDao.findTotal();
Map<String,Object> map = new HashMap<String,Object>();
map.put("data", users);
map.put("recordsTotal", totel);
map.put("recordsFiltered", totel);
return map;
}
}
dao层：
public interface UserDao {
public List<User> findUserPage(@Param("startIndex") Integer startIndex,@Param("rows") Integer rows);
}
与UserDao对应的UserMapper.xml：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="dao.UserDao">
<!--当数据库的列名和实体类的属性名不相同时，要配置resultMap -->
<resultMap type="User" id="UserMap">
<id column="id" property="id"/>
<result column="user_name" property="userName"/>
<result column="pass_word" property="passWord"/>
</resultMap>
<select id="findUserPage" resultMap="UserMap">
select * from t_user limit #{startIndex},#{rows}
</select>
</mapper>
4、分析后续。。。