MyBatis+DataTables分页实现

最新推荐文章于 2025-04-07 11:17:38 发布

SEVEN LIU

最新推荐文章于 2025-04-07 11:17:38 发布

阅读量694

点赞数

CC 4.0 BY-SA版权

分类专栏： DataTables 文章标签： mybtais datatables 分页

本文链接：https://blog.youkuaiyun.com/u011273768/article/details/83026299

本文总结了如何使用MyBatis与DataTables进行分页操作。首先介绍了引入必要的js库，包括Bootstrap样式以提升分页效果。接着阐述了前端页面设置dataTables的js代码，仅需配置请求地址和显示列表。最后，讨论了后台处理分页请求，通过创建分页对象获取前端页码数据，并返回拼接好的JSON数据，以提高传输效率。

最近在做mybatis+datatables分页，来做个总结，dataTables还是有很多功能可以拿来一用的

首先贴一个效果图：

使用的时候还加了自定义的查询，后面会写到

1.引入js

<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="js/datatable/jquery.dataTables.min.js?4"></script>
<scripttype="text/javascript" language="javascript" src="js/datatable/dataTables.bootstrap.js"></script>

涉及到样式的需引用bootstrap对应的样式，否则dataTables原生的分页个人觉得是很难看了

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />

引用参数js，详细见上一篇文章 JQuery DataTables 参数(一)

<script type="text/javascript" language="javascript" src="js/datatable/dataTablesSettings.js?4"></script>

2.前端页面使用dataTables时的js

	var dataTable;
	$(document).ready(function() {
   
   
		$.dataTablesSettings.ajax={
   
     //ajax方式向后台发送请求
		         "type": "POST",
		         "url":"/base/example/list",
		         "data":{
   
      //传递的数据
		        	 "example.id":"1"
		        	 },
		         "dataType" : "json"
		     };
		$.dataTablesSettings.aoColumns=[//对接收到的json格式数据进行处理，data为json中对应的key