前言

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

随机推荐

asp.net ajax传递Json给aspx.cs后台 webmethod方法传递json
1.提取一个向后台写入数据的方法 ///向后台cs页面请求数据的方法 function myPost(url,data,func) { $.ajax({ type: "post", ...
Nginx的正则表达式
Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Ра ...
Java数据结构之排序---插入排序
插入排序的基本介绍: 插入排序是对想要排序的序列以插入的方式寻找该元素的适当的位置,从而达到排序的目的. 插入排序的基本思想: 把n个待排序的元素看成一个有序表和一个无序表,开始时,有序表只有一个元素 ...
[LeetCode]-011-Longest Common Prefix
Write a function to find the longest common prefix string amongst an array of strings. []=>" ...
01 MySQL入门了解
MySql的前戏在学习Mysql之前,我们先来想一下一开始做的登录注册案例,当时我们把用户的信息保存到一个文件中: #用户名 |密码root|123321 alex|123123 上面文件内容的 ...
2018-2019-2-20175225 实验四《Android开发基础》实验报告
一.实验报告封面课程:Java程序设计班级:1752班姓名:张元瑞学号:20175225 指导教师:娄嘉鹏实验日期:2019年5月14日实验时间:13:45 - 21:00 实验序号:实验 ...
1、安装Scrapy
一.网址:https://doc.scrapy.org/en/latest/intro/install.html 二.安装过程中出现"cl.exe"找不到的错误,解决方法:http ...
双三次插值C代码（利用opencv）
双三次插值C代码(利用opencv) phasecubic2.cpp D:\文件及下载相关\文档\Visual Studio 2010\Projects\phasecubic2\phasecubic2 ...
安装 Windows 系统在 NVMe 规范的 M.2 接口的固态硬盘（SSD）上
作为一个程序员很重要的一项技能就是装系统 @_@,以前我都是随便用网上的工具做个系统盘,每次要用直接随手就搞好了,节省大家时间. 但最近同事装了个贼小的固态,然后我启动盘里的系统果断识别不出来他的固态 ...
delphi 进程通讯之WM_COPYDATA 发送程序（SendData.exe）可用
http://www.delphitop.com/html/wangluo/1529.html delphi 进程通讯之WM_COPYDATA 发送程序(SendData.exe) 作者:admin ...

纯手写实现ajax分页功能

前言

简介

简析

代码

效果

参考地址

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

随机推荐

热门专题