当前位置：移动技术网 > IT编程>开发语言>Jquery > 纯手写实现ajax分页功能

纯手写实现ajax分页功能

2019年08月14日 | 移动技术网IT编程 | 我要评论

前言

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

jQuery操作DOM对象的方法

# jQuery操作DOM 和增删改查 - 1.html() ```js $('ul li&... [阅读全文]
jQuery的clone()方法和data()方法

# jQuery中的clone()和data()方法 - clone() ```js $('.demo').clon... [阅读全文]
jq使用jsonp实现百度搜索

项目实现：还原百度搜索功能；项目原理：利用json回调页面传参; 什么是jsonp：就是利用<script>标签的src地址，让目标页面回... [阅读全文]
5.jQuery实现简单的on()和trigger()方法

# jQuery事件 - 1.on() ```js //1.事件类型type 2.selector 3.data... [阅读全文]
电器类电商网站分类大菜单，配色超舒服~

效果图 <!DOCTYPE html> <html lang="en"> <he... [阅读全文]
现代都市风移动端可折叠导航菜单

效果图 <!DOCTYPE html> <html lang="en"> <he... [阅读全文]
jQuery选择器的简单实现和笔记

# 引入jQuery工具库 ## 下载地址 - cdn:http://www.jq22.com/cdn/#a2 -... [阅读全文]
jQuery简单实现get()和eq()方法

# jQuery选择元素 - get() 从jQuery对象中获取某个指定的元素，返回原生的dom对象，所以不能再次链式调... [阅读全文]
水平导航-三级导航-切换流畅

效果图 <!DOCTYPE html> <html lang="en"> <he... [阅读全文]
互联网公司常用水平导航（二级导航）

效果图 <!DOCTYPE html> <html lang="en"> <he... [阅读全文]