SpringBoot2整合Datatables1.10.19实战（前端分页）

什么是Datatables？

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。目前最新版本为1.10.19。

• 分页，即时搜索和排序（支持前端或后端分页）
• 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
• 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
• 各式各样的扩展: Editor, TableTools, FixedColumns ……
• 丰富多样的option和强大的API
• 支持国际化
• 超过2900+个单元测试
• 免费开源 （ MIT license ）

官方网站

Datatables官网
Datatables中文网

个人点评

Datatables是本人非常喜欢超级喜欢的一个表格控件，比BoostrapTable好用一些。从2013年接触至今，一直在用，喜爱有加，风格自适应性很强大，经理几代UI洗礼依据坚挺，网上会有多种配置，选择一份即可。对于少量数据，建议前端自动分页，效果更完美。对于大量数据，建议后台手工分页，加载更快。

CDN引用

静态文件方面，尽量不用放自己app服务器上，用cdn更快更轻

<script src="//cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

核心HTML代码

只要定义一个table，且指定id就行

 <table id="dataTable" class="display">
                <thead>
                <tr>
                    <!--<th><input type="checkbox" id="checkAll"></th>-->
                    <th>ID</th>
                    <th>题目</th>
                    <th>答案列表</th>
                    <th>可选答案</th>
                    <th>正确答案</th>
                    <th>答案解析</th>
                </tr>
                </thead>
</table><br>

核心JS代码

作为一个js/jq插件，初始化当然是由js来控制，当然也是配置的核心地方。这里仅用与前端自动分页配置，后台分页的，稍后的文章会介绍。

<script type="text/javascript">
    var oTable;

    $(document).ready(function(){
        oTable = $('#dataTable').DataTable( {
            //定义请求，如果用freemarker，则base_url可这样定义
            //var base_url = '${request.contextPath}';其他的自己根据实际情况改
            "ajax": base_url+"/qa/question/page",
            //定义字段
            "columns": [
                { "data": "questionId" },
                { "data": "questionDesc" },
                { "data": "selectJson" },
                { "data": "selectList" },
                { "data": "correctAnswer" },
                { "data": "explainStr" }
            ],
            //定义语言，不写也可以，就会变英文。
            "oLanguage": { //国际化配置
                "sProcessing" : "正在获取数据，可能网速不够快，请稍候...",
                "sLengthMenu" : "显示 _MENU_ 条/页",
                "sZeroRecords" : "没有您要搜索的内容",
                "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                "sInfoEmpty" : "记录数为0",
                "sInfoFiltered" : "(全部记录数 _MAX_ 条)",
                "sInfoPostFix" : "",
                "sSortClasses": false,
                "sSearch" : "搜索",
                "sUrl" : "",
                "oPaginate": {
                    "sPrevious" : "上一页",
                    "sNext" : "下一页"
                }
            }
        } );
    });
</script>

JPA后台核心代码

前端分页中，后端核心返回部分，只要包含data即可，其他全部交给前端分页。

@RestController
@RequestMapping("/qa")
public class QaController {
		@GetMapping("/question/page")
	    public Object questionPage(String classId, String seriaId, String seriaInnerId, String questionId, String sSearch, Integer pageNumber, Integer pageSize) {
	        //默认从第一页开始查
	        if (pageNumber == null || pageSize == null || pageNumber == 0 || pageSize == 0) {
	            pageNumber = 1;
	            pageSize = 999;
	        }
	        List<Question> list = questionRepository.findAllList(classId, seriaId, seriaInnerId, questionId, sSearch, (pageNumber - 1) * pageSize, pageSize);
	        //如果你不需要参数，直接用findAll即可，否则就自己写个分页，更好用。
	        //List<Question> list = questionRepository.findAll();
	        Map<String,Object> returnMap=new HashMap<>();
	        returnMap.put("data",list);
	        return returnMap;
	    }
 }

JPA方面，自己写一个手工分页。或者，直接使用JPA的xxxx.findAll()即可

public interface QuestionRepository extends JpaRepository<Question,Integer> {
    @Query(value ="select * from question t "
            + " where (t.question_desc like CONCAT('%',?5,'%') or ?5 is null ) "
            + " and (t.class_id=?1 or ?1 is null) "
            + " and (t.seria_id=?2 or ?2 is null) "
            + " and (t.seria_inner_id=?3 or ?3 is null) "
            + " and (t.question_id=?4 or ?4 is null) "
            + " order by t.class_id asc  limit ?6,?7 ",nativeQuery = true)
    List<Question> findAllList(String classId, String seriaId, String seriaInnerId, String  questionId, String sSearch, int pageNumber, int pageSize);

实战效果

这里只是页面的一部分，当然，你可以加上很多搜索框，例如选定日期，等等。前端分页内置的搜索框也是超级给力，数据量少的情况下，效果特好。（数据量少指少于1w条记录，一般几百到几千都没问题，大于1w的，果斷走后端分页）

浏览器请求

postman模拟浏览器请求，前端分页需求的参数教简单，后台只需要返回{"data":[{"xxx":"xxx"},{"xxx":"xxx"}]}