如何使用前端插件Datatables实现分页

最新推荐文章于 2025-07-01 14:21:23 发布

原创最新推荐文章于 2025-07-01 14:21:23 发布 · 643 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Datatables实现的分页示例，包括前端HTML页面的搭建、后端Java代码实现，以及MyBatis的XML配置。前端通过Datatables插件与后端交互，实现了动态加载数据的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>