Springmvc + mongodb + js 分页显示数据

最新推荐文章于 2019-03-13 21:31:52 发布

DFDHZ

最新推荐文章于 2019-03-13 21:31:52 发布

阅读量554

点赞数

本文链接：https://blog.csdn.net/qq_30762453/article/details/51098006

版权

1、html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns = "http://www.w3.org/1999/xhtml" >

< head >

< title > task.html </ title >

< meta name = "content-type" content = "text/html; charset=UTF-8" />

< link rel = "stylesheet" type = "text/css" href = "${request.contextPath}/assets/bootstrap/css/bootstrap.min.css" />

< link rel = "stylesheet" type = "text/css" href = "${request.contextPath}/assets/bootstrap/css/bootstrap-responsive.min.css" />

< script type = "text/javascript" src = "${request.contextPath}/assets/js/jquery-1.8.3.min.js" ></ script >

< script type = "text/javascript" src = "${request.contextPath}/assets/bootstrap/js/bootstrap.min.js" ></ script >

< style type = "text/css" >

//跳转输入框

.pagination ul > li > input {

vertical-align : top ;

-webkit-border-radius : 0 ;

-moz-border-radius : 0 ;

border-radius : 0 ;

height : auto ;

*height : 20px ;

margin-bottom : 0px ;

background-color : #fff ;

border-left-width : 0 ;

width : 40px ;

float : left ;

min-height : auto ;

*min-height : 20px ;

}

</ style >

< script type = "text/javascript" >

function gopage(pageno){

$( "#pageno" ).val(pageno);

document.forms[0].submit();

}

//获取跳转页码

function page(){

$( "#pageno" ).val($( "#page" ).attr( "value" ));

document.forms[0].submit();

}

$(document).ready( function () {

if (${number}==1){

//如果只有一页，上一步，下一步都为灰色

$( "#upPage" ).css( "color" , "#AAA" ); //给上一步加灰色

$( "#nextPage" ).css( "color" , "#AAA" ); //给下一步加灰色

} else if (${pageView.pageNo}-1<1){

//如果是首页,则给上一步加灰色，下一步变蓝

$( "#upPage" ).css( "color" , "#AAA" ); //给上一步加灰色

$( "#nextPage" ).css( "color" , "#00F" ); //给下一步加蓝色

} else if (${pageView.pageNo}==${number}){

//如果是尾页,则给上一步加蓝色，下一步灰色

$( "#upPage" ).css( "color" , "#00F" ); //给上一步标签加蓝色

$( "#nextPage" ).css( "color" , "#AAA" ); //给下一步标签加灰色

} else {

//上一步为蓝色，下一步为绿色

$( "#upPage" ).css( "color" , "#00F" ); //给上一步加蓝色

$( "#nextPage" ).css( "color" , "#00F" ); //给下一步加蓝色

}

});

//task回显

function updateid(id) {

$.ajax({

type : "post" ,

url : "${request.getContextPath()}/task/detail.do" ,

data : {

"id" : id,

dataType : "json" ,

success : function (data) {

if (data.state == 0) {

$( "#update" ).modal( "hide" );

$( "#dow" ).modal( "hide" );

return ;

}

$( "#id" ).val(data.task.id);

$( "#level" ).val(data.task.level);

error: function (){

alert( "abnormal" );

$( "#update" ).modal( "hide" );

$( "#dow" ).modal( "hide" );

}

});

}

function update() {

$.ajax({

cache : false ,

type : "POST" ,

url : "${request.getContextPath()}/task/update.do" ,

data : $( '#upform' ).serialize(), // 你的formid

async : false ,

success : function (data) {

$( "#update" ).modal( "hide" );

if (data.state == 0) {

$( "#update" ).modal( "hide" );

return ;

}

});

}

</ script >

</ head >

< body >

< ul class = "nav nav-tabs" >

< li class = "active" >

< a href = "${request.contextPath}/task/list.do" > 任务 </ a >

</ li >

< li >

< a href = "${request.contextPath}/list.do" > BOT </ a >

</ li >

</ ul >

< div style =" margin : 0 auto ; width : 800px ; height : auto ; margin-top : 100px ;" >

< table class = "table table-bordered table-hover" style =" margin-top : 10px ;" >

< thead >

< tr >

< th > # </ th >

< th > 批次 </ th >

< th > 优先级 </ th >

< th > 状态 </ th >

< th > 任务ID </ th >

< th > 类型 </ th >

< th > 操作 </ th >

</ tr >

</ thead >

< tbody >

< #list pageView.datas as task>

< tr >

< td > ${task_index+1} </ td >

< td > ${task.batch} </ td >

< td > ${task.level} </ td >

< td > ${task.status} </ td >

< td >< #if task.type == 'scan'>${task.tid} < #else>${task.id} </ #if> </ td >

< td > ${task.type} </ td >

< td >

< #if task.status!='executing'>

< a href = "" data-toggle = "modal" data-target = "#update" onclick = "updateid('${task.id}',1)" > update </ a >

</ #if>

</ td >

</ tr >

</ #list>

</ tbody >

</ table >

< div class = "pagination" >

< ul >

< li >

< a href = "#" > 当前显示第${Begin}至${End}条，共${pageView.totalCount}条 </ a >

</ li >

< li >

< a href = "#" onclick = "gopage(1)" > 首页 </ a >

</ li >

< li >

< a href = "#" onclick = "gopage(${pageView.upPage})" id = "upPage" > 上一页 </ a >

</ li >

< li >

< a href = "#" onclick = "gopage(${pageView.nextPage})" id = "nextPage" > 下一页 </ a >

</ li >

< li >

< a href = "#" onclick = "gopage(${pageView.totalPage})" > 尾页 </ a >

</ li >

< li >

< a href = "#" > 当前第${pageView.pageNo}页跳至 </ a >

</ li >

< li >< input type = "text" class = "input" id = "page" /></ li >

< li >< a href = "javascript:void();" onclick = "page()" > 页 Go </ a ></ li >

< li >

< a href = "#" > 共${number}页 </ a >

</ li >

</ ul >

</ div >

< form action = "${request.contextPath}/task/list.do" method = "post" style =" display : none ;" >

< input type = "hidden" name = "pageno" id = "pageno" />

</ form >

</ div >

< div class = "modal fade" id = "update" tabindex = "-1" data-backdrop = "false" >

< div class = "modal-dialog" >

< div class = "modal-content" style =" width : 500px ;" >

< div class = "modal-header" >

< button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" style =" margin-right : -50px ;" >

</ button >

< h4 class = "modal-title" id = "exampleModalLabel" > Update Level </ h4 >

</ div >

< div class = "modal-body" style =" text-align : center ;" >

< form id = "upform" class = "form-horizontal" >

< input type = "hidden" id = "id" name = "id" >

< div class = "form-group" >

< label for = "level" class = "control-label col-md-4" > Level: </ label >

< div class = "col-md-7" >

< input type = "text" class = "form-control" id = "level" name = "level" />

</ div >

< div class = "form-group" >

< label for = "flag2" > 任务 </ label >

< input class = "form-control" id = 'flag2' type = "radio" name = 'flag' value = "2" />

< label for = "flag1" > 子任务 </ label >

< input class = "form-control" id = 'flag1' type = "radio" name = "flag" value = "1" />

</ div >

< button class = "btn btn-primary" id = "submit_btn" style =" margin-top : 10px ;" onclick = "update();" > Save </ button >

</ form >

</ div >

</ body >

</ html >

2、controller

package com.bot.controller;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.apache.commons.lang.StringUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

import com.bot.model.ShowTask;
import com.bot.model.Task;
import com.bot.utile.DateUtil;
import com.bot.utile.StaticVarialbes;
import com.bot.view.Pagination;
import com.mongodb.BasicDBList;

/**
*
* @author liuyajun
*
*/
@Controller
@RequestMapping("task")
public class TaskController extends BaseController<Task> {

     /**
     * 查询task任务
     *
     * @param request
     * @param response
     */
     @RequestMapping("list")
     public String taskList(HttpServletRequest request, ModelMap modelMap) {
          String pageNo = request.getParameter("pageno");
          // 分页查询
          Integer p = 1;
          if (StringUtils.isNotEmpty(pageNo)) {
               p = Integer.parseInt(pageNo);
          }
          Pagination<Task> pagination = null;
          Map<String, Object> map = new HashMap<String, Object>();
          pagination = taskDaoImpl.getPage(p, StaticVarialbes.PAGE_SIZE, map);

          if (pagination.getDatas() != null) {
               for (int i = 0; i < pagination.getDatas().size(); i++) {
                    pagination.getDatas() .get(i) .setToday(DateUtil.isToday(pagination.getDatas().get(i).getDate(), new Date()));
               }
          }
          //总页数
          long number = pagination.getTotalCount()%StaticVarialbes.PAGE_SIZE==0?pagination.getTotalCount()/StaticVarialbes.PAGE_SIZE:pagination.getTotalCount()/StaticVarialbes.PAGE_SIZE+1;
          //开始条数
          long Begin = (p-1)*StaticVarialbes.PAGE_SIZE+1;
          //结束数
          long End = p*StaticVarialbes.PAGE_SIZE;
          modelMap.put(StaticVarialbes.PAGEVIEW, pagination);
          modelMap.put("now", new Date());
          modelMap.put("number",number);
          modelMap.put("Begin", Begin);
          modelMap.put("End", End);
          return "task.html";
     }

     /**
     * 修改任务优先级
     * @param request
     * @param response
     */
     @RequestMapping("update")
     public void update(HttpServletRequest request, HttpServletResponse response) {
          String id = request.getParameter("id");
          String level = request.getParameter("level");
          String flag = request.getParameter("flag");

          JSONObject jo = new JSONObject();
          if (StringUtils.isNotEmpty(id) && StringUtils.isNotEmpty(flag)) {
               if (StringUtils.isNotEmpty(level)) {
                    Map<String, Object> nmap = new HashMap<String, Object>();
                    Map<String, Object> lmap = new HashMap<String, Object>();
                    if (flag.equals("1")) {
                         lmap.put("id", id);
                         nmap.put("level", Integer.parseInt(level));
                         nmap.put("date", new Date());
                         taskDaoImpl.findAndModify(lmap, nmap);
                    } else {
                         Task task = taskDaoImpl.findById(id);
                         List<Task> list = taskDaoImpl.list(task.getTid());
                         for (int i = 0; i < list.size(); i++) {
                              lmap.put("id", list.get(i).getId());
                              nmap.put("level", Integer.parseInt(level));
                              nmap.put("date", new Date());
                              taskDaoImpl.findAndModify(lmap, nmap);
                         }
                    }
               } else {
                    jo.put("state", 0);
               }
          } else {
               jo.put("state", 0);
          }
          renderJSON(response, jo.toString());
     }

     /**
     * 根据id查询
     *
     * @param request
     * @param response
     */
     @RequestMapping("detail")
     public void detail(HttpServletRequest request, HttpServletResponse response) {
          String id = request.getParameter("id");
          JSONObject jo = new JSONObject();
          if (StringUtils.isNotEmpty(id)) {
               Task task = taskDaoImpl.findById(id);
               if (task != null) {
                    jo.put("state", 1);
                    jo.put("task", task);

               } else {
                    jo.put("state", 0);
               }
          } else {
               jo.put("state", 0);
          }
          renderJSON(response, jo.toString());

}

3、dao

@Override