zoukankan html css js c++ java

纯手写实现ajax分页功能

前言

最近用到了这个功能，百度大半天，网上的不是有各种问题就是需要引入其他的插件，无奈，只能自己写，大致功能已经完成。前端页面用bootstrap做样式，分页功能用ajax实现，没用其他插件哦，只引入引这些：

    <link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>

简介

简析

主要思路就是写两个ajax方法，一个ajax方法负责更新页数的同时调用另外一个ajax方法，另一个ajax方法负责加载页面数据。

代码

<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>文章列表</title>
    <link href="css/style.css" rel="stylesheet" />
    <link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function rows(np){
        $.ajax({
            url : '../article/rows',
            type : 'POST',
            dataType : 'json',
            /* data : params, */
            success : function(data) {
                var pageCount = data%5 == 0 ? data/5 : (data/5+1);
                var codePage = "";
                for (var j=np-2; j<=np+2; j++) {
                    if(j > pageCount && j > 0){
                        codePage += 
                            "<li><a id='"+(j-5)+"' onclick='pages("+(j-5)+");rows("+(j-5)+");'>"+(j-5)+"</a></li>";
                    }
                }
                for (var j=np-2; j<=np+2; j++) {
                    if(j >= 1 && j <= pageCount) {
                        codePage += 
                            "<li><a id='"+j+"' onclick='pages("+j+");rows("+j+");'>"+j+"</a></li>";
                    }
                }
                for (var j=np-2; j<=np+2; j++) {
                    if(j < 1 && j <= pageCount){
                        codePage += 
                            "<li><a id='"+(j+5)+"' onclick='pages("+(j+5)+");rows("+(j+5)+");'>"+(j+5)+"</a></li>";
                    }
                }
                
                $("#page-size").html(codePage); 
            },
            error : function() {
                alert("rows出错了！");
            }
        });
    }
    
    function pages(p){
        $.ajax({
            url : '../article/page',
            type : 'POST',
            dataType : 'json',
            data : {"pageNow":p},
            success : function(data) {
                var code = "";
                for (var i=0; i<data.length; i++) {
                code += 
                    "<div>
" + 
                    "<h2>
" + 
                    "    <a href='articleDetail.html?aid="+data[i].articleId+"'>"+data[i].articleTitle+"</a>
" + 
                    "</h2>
" + 
                    "<h5>
" + 
                    "    <span class="glyphicon glyphicon-calendar" aria-hidden="true">"+data[i].nowDate+"</span>&nbsp;&nbsp;
" + 
                    "    <span class="glyphicon glyphicon-user" aria-hidden="true">"+data[i].user.userName+"</span>
" + 
                    "</h5>
" + 
                    "<p>"+data[i].articleSummary+"</p>
" + 
                    "<a href='articleDetail.html?aid="+data[i].articleId+"'>
" + 
                    "    <strong>More</strong>
" + 
                    "    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
" + 
                    "</a>
" + 
                    "<hr />
" + 
                    "</div>";
                }
                $("#tableBody").html(code);
            },
            error : function() {
                alert("page出错了！");
            }
        });
    }
    
    $(document).ready(function () {
        rows(1);
        pages(1);
    });
    
    </script>
</head>

<body>
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">动态</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
                </ul>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">动态</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            管理 <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">文章</a></li>
                            <li><a href="#">评论</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="row">


            <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1">

                <div class="list-group" id="tableBody">

                    <div>
                        <h2>
                            <a href="#">在教室内活动应注意安全</a>
                        </h2>
                        <h5> <span class="glyphicon glyphicon-calendar" aria-hidden="true">2018-02-10</span>
                            <span class="glyphicon glyphicon-user" aria-hidden="true">SpringBoot Redis</span>
                        </h5>
                        <p>在教室内活动，有许多看起来细微的事情值得同学们注意，否则，在教室里也同样容易发生危险。以下就是几个同学们需要注意的几点：
                            1. 防磕碰。目前大多数教室空间比较狭小，又置放了许多桌椅、饮水机等用品，所以不应在教室中追逐、打闹，做剧烈的运动和游戏，防止磕碰受伤。
                            2．防滑、防摔。教室地板比较光滑的，要注意防止滑倒受伤；需要登高打扫卫生、取放物品时，要请他人加以保护，注意防止摔伤。
                            3．防坠落。无论教室是否处于高层，都不要将身体探出阳台或者窗外，谨防不慎发生坠楼的危险。
                            4．防挤压。教室的门、窗户在开关时容易压到手，也应当处处小心，要轻轻地开关门窗，还先留意会不会夹到他人的手。
                        </p>
                        <a href="#">
                            <strong>More</strong>
                            <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
                        </a>
                        <hr />
                    </div>
                    <div>
                        <h2>
                            <a href="#">在教室内活动应注意安全</a>
                        </h2>
                        <h5> <span class="glyphicon glyphicon-calendar" aria-hidden="true">2018-02-10</span>
                            <span class="glyphicon glyphicon-user" aria-hidden="true">SpringBoot Redis</span>
                        </h5>
                        <p>在教室内活动，有许多看起来细微的事情值得同学们注意，否则，在教室里也同样容易发生危险。以下就是几个同学们需要注意的几点：
                            1. 防磕碰。目前大多数教室空间比较狭小，又置放了许多桌椅、饮水机等用品，所以不应在教室中追逐、打闹，做剧烈的运动和游戏，防止磕碰受伤。
                            2．防滑、防摔。教室地板比较光滑的，要注意防止滑倒受伤；需要登高打扫卫生、取放物品时，要请他人加以保护，注意防止摔伤。
                            3．防坠落。无论教室是否处于高层，都不要将身体探出阳台或者窗外，谨防不慎发生坠楼的危险。
                            4．防挤压。教室的门、窗户在开关时容易压到手，也应当处处小心，要轻轻地开关门窗，还先留意会不会夹到他人的手。
                        </p>
                        <a href="#">
                            <strong>More</strong>
                            <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
                        </a>
                        <hr />
                    </div>

                </div>
                <nav aria-label="Page navigation" class="text-center">
                    <ul class="pagination pagination-lg" id="page-size">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">&laquo;上一页</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">下一页&raquo;</a></li>
                        <li><a href="#">尾页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Copyright &copy; 2019 &nbsp; 朱学良 &nbsp; 蒙ICP备15101216号-1 &nbsp;</a></li>
            </ul>
        </div>
    </nav>
</body>

</html>

后台：处理数据（SSM框架写的，看吧）

package com.securty.imut.controller;



import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Timestamp;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.FileUtils;
import org.apache.log4j.helpers.LogLog;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.securty.imut.bean.Article;
import com.securty.imut.service.ArticleService;
import com.securty.imut.util.WangEditor;

 
@Controller
@RequestMapping(value="/article")
public class ArticleController {
 
    @Autowired
    private ArticleService articleService;
    
    /**
     * 查找所有
     * @return
     */
    @RequestMapping(value="/list")
    @ResponseBody
    public List<Article> list(){
        List<Article> list = articleService.findAll();
        return list;
    }
    
    /**
     * 查找
     * @return
     */
    @RequestMapping(value="/page")
    @ResponseBody
    public List<Article> page(HttpServletRequest request){
        Article article = new Article();
        Timestamp nowDate = new Timestamp(System.currentTimeMillis());
        article.setNowDate(nowDate);
        String pn = request.getParameter("pageNow") == null ? String.valueOf(1) : request.getParameter("pageNow");
        int pageNow = Integer.parseInt(pn);
        int pageSize = 5;
        int startRows = pageSize*(pageNow-1);
        List<Article> list = articleService.queryPage(startRows);
        return list;
    }
    
    /**
     * 查找
     * @return
     */
    @RequestMapping(value="/rows")
    @ResponseBody
    public int rows(HttpServletRequest request){
        return articleService.getRowCount();
    }
    
    @RequestMapping(value="/add")
    @ResponseBody
    public int add(Article article){
        return articleService.addArticle(article);
    }
    
    @RequestMapping(value="/update")
    @ResponseBody
    public int update(Article article){
        return articleService.updateArticleById(article);
    }
    
    @RequestMapping(value="/read")
    @ResponseBody
    public Article read(Article article){
        return articleService.selectArticlesById(article);
    }
    
    @RequestMapping(value="/delete")
    @ResponseBody
    public int delete(Integer aid){
        return articleService.deleteArticleById(aid);
    }
    
    @RequestMapping(value = "/upload",method=RequestMethod.POST)
    @ResponseBody
    public WangEditor uploadFile(
            @RequestParam("myFile") MultipartFile multipartFile,
            HttpServletRequest request) {
 
        try {
            // 获取项目路径
            String realPath = request.getSession().getServletContext()
                    .getRealPath("");
            InputStream inputStream = multipartFile.getInputStream();
            String contextPath = request.getContextPath();
            // 服务器根目录的路径
            String path = realPath.replace(contextPath.substring(1), "");
            // 根目录下新建文件夹upload，存放上传图片
            String uploadPath = path + "upload";
            // 获取文件名称
            String filename = multipartFile.getOriginalFilename();
            // 将文件上传的服务器根目录下的upload文件夹
            File file = new File(uploadPath, filename);
            FileUtils.copyInputStreamToFile(inputStream, file);
            // 返回图片访问路径
            String url = request.getScheme() + "://" + request.getServerName()
                    + ":" + request.getServerPort() + "/upload/" + filename;
            
            String [] str = {url};
            WangEditor we = new WangEditor(str);
            return we;
        } catch (IOException e) {
            LogLog.error("上传文件失败", e);
        }
        return null;
 
    }
}

效果

参考地址

https://github.com/Aizhuxueliang/security

查看全文

相关阅读:
PAT 甲级 1129 Recommendation System
PAT 甲级 1129 Recommendation System
PAT 甲级 1128 N Queens Puzzle (20 分)
PAT 甲级 1128 N Queens Puzzle (20 分)
PAT 甲级 1096 Consecutive Factors (20 分)
PAT 甲级 1096 Consecutive Factors (20 分)
PAT 甲级 1135 Is It A Red-Black Tree (30 分)
PAT 甲级 1135 Is It A Red-Black Tree (30 分)
AcWing 900. 整数划分
 AcWing 899. 编辑距离线性dp

原文地址：https://www.cnblogs.com/nqdxt/p/11352881.html