Spring+Datatables分页

最新推荐文章于 2024-04-19 09:58:04 发布

霸都王大炮

最新推荐文章于 2024-04-19 09:58:04 发布

阅读量391

点赞数

分类专栏：前端文章标签： jquery datatable-js datatable css

本文链接：https://blog.csdn.net/qq_35515521/article/details/78259444

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Spring项目中结合Datatables.js插件实现前端分页。作者在寻找提高前端代码效率的过程中，发现了Datatables，并发现其对PHP支持较好，但Java示例较少。通过研究和实践，作者分享了Spring+Datatables的简单分页实现，包括datatable.jsp页面、Controller层的处理、DatatablesViewPage和BaseController的代码，以及Users类。更多详细示例和说明可在Datatables官网查阅。

摘要由CSDN通过智能技术生成

在做项目的过程中，在开发前端中，很多js代码都是自己写的，虽然jquery给我提供了很大的便利，但是依然无法提高代码的效率。特别是前端列表这块，相比较而言是比较复杂的，这段时间内，自己想网上面有没有这方面插件。找了一下，发现不少，其中就有Datatables，他是基于jquery的。而且是纯js和CSS的代码，比较方便。看了datatables的官网，发现对PHP支持比较好，java的例子不多。我研究半天，加上借鉴别人的一些代码和思路。自己先写了一个简单的Spring+Datatables分页。比较简单。主要我分这几个部分。
1、主页：datatable.jsp。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/jsp/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<title>Insert title here</title>
</head>
<body class="dt-example">


    <div>
        <input type="text" id="level1"> 
        <input type="button" onclick="search1()"  value="查询">
    </div>

    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>名字</th>
                <th>编号</th>
                <th>小尾巴</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>
</body>
<script type="text/javascript">
$(document).ready(function() {
    table = $('#example').DataTable( {
        "pagingType": "simple_numbers",//设置分页控件的模式
         searching: false,//屏蔽datatales的查询框
         aLengthMenu:[2],//设置一页展示10条记录
         "bLengthChange": false,//屏蔽tables的一页展示多少条记录的下拉列表
         "oLanguage": {  //对表格国际化，添加各种样式
            "sLengthMenu": "每页显示 _MENU_条",  
            "sZeroRecords": "没有找到符合条件的数据",  
            "sProcessing": "正在玩命加载中。。。。。。",   
            "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",  
            "sInfoEmpty": "木有记录",  
            "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",  
            "sSearch": "搜索：",  
            "oPaginate": {  
            "sFirst": "首页",  
            "sPrevious": "前一页",  
            "sNext": "下一页",  
            "sLast": "尾页"  

            }  
        },
       "processing": true, //打开数据加载时的等待效果
        "serverSide": true,//打开后台分页
        "ajax": {
            "url": "${ctx}/users/findByPage", 
            "dataSrc": "aaData", 
            "data": function ( d ) {
                var level1 = $('#level1').val();
                //添加额外的参数传给服务器
                d.extra_search = level1;
            }
        },
        "columns": [
            { "data": "roleid" },
            { "data": "userid" },
            { "data": "password" },


        ],
        "columnDefs" : [ {
            // 定义操作列,######以下是重点########
            "targets" : 3,//操作按钮目标列
            "data" : null,
            "render" : function(data, type,row) {
            var id = '"' + row.level + '"';
            var html = "<a href='javascript:void(0);'  class='delete btn btn-default btn-xs'  ><i class='fa fa-times'></i> 查看</a>"
            html += "<a href='javascript:void(0);' class='up btn btn-default btn-xs'><i class='fa fa-arrow-up'></i> 编辑</a>"
            html += "<a href='javascript:void(0);'   onclick='deleteThisRowPapser("+ id + ")'  class='down btn btn-default btn-xs'><i class='fa fa-arrow-down'></i> 删除</a>"
            return html;
            }
            } ],

    });
} );

function search1()
{
    table.ajax.reload();
}

function deleteThisRowPapser(id){
    alert("删除==="+id)
}
</script>

</html>

2、spring里面的Controller层，Service层我就不贴，只是常规的sql。

package com.iuweb.demo.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.apache.log4j.Logger;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.iuweb.common.controller.BaseController;
import com.iuweb.common.model.Page;
import com.iuweb.common.model.Pagination;
import com.iuweb.demo.model.DataTableMode;
import com.iuweb.demo.model.DatatablesViewPage;
import com.iuweb.demo.model.Users;
import com.iuweb.demo.service.UsersService;
import com.iuweb.user.model.User;
@Controller
@RequestMapping(value = "/users")
@Scope("prototype")
public class UsersController extends BaseController{ 
    private static final Logger logger = Logger.getLogger(UsersController.class);
    @Resource
    private UsersService usersService;

    /**
     * DataTable的分页查询Demo
     * 
     * @author wangguan,
     * @date 2017年10月13日 上午9:44:55,
     * @version argType
     */
    @RequestMapping(value = "/findByPage")
    @ResponseBody
    public DatatablesViewPage<Users>  findByPage(HttpServletRequest request,
            @RequestParam(value = "length", defaultValue = "3", required = false) int pageSize,
            @RequestParam(value = "start", defaultValue = "0", required = false) int pagec) {
        DatatablesViewPage<Users> view = new DatatablesViewPage<Users>();
        Map params = super.inputParams(request);
        /*// 获取前台额外传递过来的查询条件
        String extra_search = request.getParameter("extra_search");*/
        int currentPage=(pagec/pageSize)+1;
        Pagination pagination = new Pagination(pageSize, currentPage);
        params.put("pagination", pagination);
        List<Users> list = usersService.getAll(params);
        /*Page page = new Page();
        page.setCount(pagination.getCount());
        page.setData(list);*/
        /*// 随便组织的查询结果
        List<DataTableMode> list = new ArrayList<DataTableMode>();
        for (int i = 0; i < 22; i++) {
            DataTableMode alarm = new DataTableMode();
            alarm.setLevel(i);
            alarm.setTotal(100L);
            alarm.setLast_name("我的" + i + "号小尾巴");
            list.add(alarm);
            list.add(alarm);
        }*/
        view.setiTotalDisplayRecords(pagination.getCount());
        view.setiTotalRecords(pagination.getCount());
        view.setAaData(list);
        return view;

    }


}

3、DatatablesViewPage.java

package com.iuweb.demo.model;

import java.util.List;

public class DatatablesViewPage<T> {
     private List<T> aaData; //aaData 与datatales 加载的“dataSrc"对应
        private int iTotalDisplayRecords; 
        private int iTotalRecords;
        public DatatablesViewPage() {

        }
        public List<T> getAaData() {
            return aaData;
        }
        public void setAaData(List<T> aaData) {
            this.aaData = aaData;
        }
        public int getiTotalDisplayRecords() {
            return iTotalDisplayRecords;
        }
        public void setiTotalDisplayRecords(int iTotalDisplayRecords) {
            this.iTotalDisplayRecords = iTotalDisplayRecords;
        }
        public int getiTotalRecords() {
            return iTotalRecords;
        }
        public void setiTotalRecords(int iTotalRecords) {
            this.iTotalRecords = iTotalRecords;
        }


}

4、BaseController.java

/**
 * @(#)BaseAction.java Copyright 2016 Magingunion, Inc. All rights reserved.
 */
package com.iuweb.common.controller;

import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;
import java.util.Set;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang3.StringUtils;



public abstract class BaseController {
    @SuppressWarnings({ "rawtypes", "unchecked" })
    protected Map inputParams(HttpServletRequest request) {
        Map params = new HashMap();
        Map<String, String[]> map = request.getParameterMap();
        Set<Entry<String, String[]>> set = map.entrySet();
        Iterator<Entry<String, String[]>> it = set.iterator();
        while (it.hasNext()) {
            Entry<String, String[]> entry = it.next();
            for (String i : entry.getValue()) {
                if (StringUtils.isNotEmpty(i)) {
                    if (params.containsKey(entry.getKey())) {
                        i = i + ',' + params.get(entry.getKey());
                        params.put(entry.getKey(), i);
                    } else {
                        params.put(entry.getKey(), i);
                    }
                }
            }
        }
        return params;
    }

}

5、Users.java

/**
 * @(#)Users.java Copyright 2016 Magingunion, Inc. All rights reserved.
 */
package com.iuweb.demo.model;

import com.iuweb.common.model.BaseModel;

public class Users extends BaseModel {
    private String userId;
    private String password;
    private String userName;
    private String roleId;
    public String getUserId() {
        return userId;
    }
    public void setUserId(String userId) {
        this.userId = userId;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getRoleId() {
        return roleId;
    }
    public void setRoleId(String roleId) {
        this.roleId = roleId;
    }

}