前言

最近用到了这个功能，百度大半天，网上的不是有各种问题就是需要引入其他的插件，无奈，只能自己写，大致功能已经完成。前端页面用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>\r\n" +

                    "<h2>\r\n" +

                    "    <a href='articleDetail.html?aid="+data[i].articleId+"'>"+data[i].articleTitle+"</a>\r\n" +

                    "</h2>\r\n" +

                    "<h5>\r\n" +

                    "    <span class=\"glyphicon glyphicon-calendar\" aria-hidden=\"true\">"+data[i].nowDate+"</span>&nbsp;&nbsp;\r\n" +

                    "    <span class=\"glyphicon glyphicon-user\" aria-hidden=\"true\">"+data[i].user.userName+"</span>\r\n" +

                    "</h5>\r\n" +

                    "<p>"+data[i].articleSummary+"</p>\r\n" +

                    "<a href='articleDetail.html?aid="+data[i].articleId+"'>\r\n" +

                    "    <strong>More</strong>\r\n" +

                    "    <span class=\"glyphicon glyphicon-menu-right\" aria-hidden=\"true\"></span>\r\n" +

                    "</a>\r\n" +

                    "<hr />\r\n" +

                    "</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

纯手写实现ajax分页功能的更多相关文章

vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
简易-五星评分-jQuery纯手写
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
纯手写Myatis框架
1.接口层-和数据库交互的方式 MyBatis和数据库的交互有两种方式: 使用传统的MyBatis提供的API: 使用Mapper接口: 2.使用Mapper接口 MyBatis 将配置文件中的每一个 ...
手写原生ajax
关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...
springmvc 动态代理 JDK实现与模拟JDK纯手写实现。
首先明白动态代理和静态代理的区别: 静态代理:①持有被代理类的引用 ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...
SQL纯手写创建数据库到表内内容
建表啥的只点点鼠标,太外行了,不如来看看我的纯手写,让表从无到有一系列:还有存储过程临时表,不间断的重排序: 一:建数据库 create Database Show on primary ( name ...
纯手写SpringMVC到SpringBoot框架项目实战
引言 Spring Boot其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 通过这种方式,springboot ...
Ajax分页功能的实现
电脑换了固态硬盘,准备重装系统,因此打算把项目里一直延用的代码总结出来,防止丢失,以后也方便查阅.Ajax分页已经是非常普遍的技术了,所以也没什么需要特别说明的,直接贴代码: html部分 <! ...

随机推荐

神经网络内在逻辑：没打开的AI“黑匣子”
转载自:http://www.elecfans.com/rengongzhineng/592200.html 伴随着大数据,AI在沉寂了多年之后,又迎来了新的高潮.在这场涉及大部分科学的革命中,人工神 ...
(C#- 多线程) 在线程中创建object，共享问题。
研究如下问题: 1. 在一个进程的主线程中创建一个Object,其他线程都可以访问这个Object,并操作Object的方法. - 多线程同步问题. 2. 在一个进程的多个线程里面,每个线程都创建同一 ...
java jdk原生的http请求工具类
package com.base; import java.io.IOException; import java.io.InputStream; import java.io.InputStream ...
python读取文件时遇到非法字符的处理 UnicodeDecodeError: 'gbk' codec can't decode bytes in position
报错UnicodeDecodeError: 'gbk' codec can't decode bytes in position ipath = 'D:/学习/语料库/SogouC.mini/Samp ...
Python学习之==>第三方模块的安装、模块导入
一.模块&包 1.模块模块实质上就是一个Python文件,它是用来组织代码的.意思就是把Python代码写在里面,文件名就是模块的名称.例如:random.py,random就是模块的名称. ...
【SpringMVC】---RequestMapping、Ant 路径、PathVariable 注解、HiddenHttpMethodFilter 过滤器、用 POJO 作为参数
一.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=&qu ...
Scratch少儿编程系列：（六）诗词《从军行》赏析
一.程序说明本程序用来显示<从军行>诗词,逐字显示.本来计划用2.0制作,但在制作过程中,在“造型”中无法输入汉字,临时采用3.0版本,1.4版本也可以. 二.程序流程图为了更直观的描 ...
【Python】我的第一个完整的小说爬虫
写在开头纪念我的第一个爬虫程序,一共写了三个白天,其中有两个上午没有看,中途遇到了各种奇怪的问题,伴随着他们的解决,对于一些基本的操作也弄清楚了.果然,对于这些东西的最号的学习方式,就是在使用中学习 ...
【Linux开发】如何更改linux文件的拥有者及用户组(chown和chgrp)
本文整理自: http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.c ...
数据契约[DataContract]
数据契约(DataContract)服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务端和客户端之间要传送的自定义数据类型.一旦声明一个类型为DataContract,那么该类型就可以被序列 ...

纯手写实现ajax分页功能

前言

简介

简析

代码

效果

参考地址

纯手写实现ajax分页功能的更多相关文章

随机推荐

热门专题