jQuery分页训练

最新推荐文章于 2024-09-10 16:00:43 发布
最新推荐文章于 2024-09-10 16:00:43 发布
阅读量401 收藏
点赞数
分类专栏： javaweb学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43386754/article/details/86538398
版权

分页开发准备

  • 本次实现一个无刷新的分页操作,同时考虑到代码重问题,需要将这些代码做成一个组件,需要清楚的是,如果使用无刷新的分页处理,实际上就是使用的DOM处理,如果使用DOM处理使用jQuery是最容易的.

  • 模拟一些真是的数据库环境,对于实际的分页而言,有以下几个内容需要服务器端返回的:

    • 所有的数据(allDepts):假设本次实现的是一个部门数据的列表
    • 所有的数据量(allRecorders):实际中的数据量需要通过统计函数计算而来,本次使用固定的内容,对于于分业而言需要如下参数:cp:当前所在页,ls-每夜现实的数据行,模糊查询列cal,模糊查询关键字:kw
    • 本次使用JSON作为数据的返回操作

  • 建立一个PageModule项目()动态web项目

  • 建立一个PageServlet,这个Servlet只是负责信息的显示()本次不链接数据库

package mao.shu.servlet;

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

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Enumeration;

@WebServlet("/PageServlet")
public class PageServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContextType("application/json","UTF-8");
        //定义分页的默认数据
        int currentPage = 1;//默认当前所在页
        int linesize = 10;//默认每页现实的数据个数
        String keyword = "";//默认没有模糊查询关键字
        String column = "dname";
        //从请求路径中接收分页数据
        try{
            currentPage = Integer.parseInt(request.getParameter("cp"));
        }catch (Exception e){e.printStackTrace();}
        try{
            linesize = Integer.parseInt(request.getParameter("ls"));
        }catch (Exception e){e.printStackTrace();}
        if(request.getParameter("ky")!=null){
            keyword = request.getParameter("ky");
        }
        if(request.getParameter("col")!=null){
            column = request.getParameter("col");
        }

        //模拟一些数据,该数据使用JSON格式数据包裹
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("allRecorders",80);//模拟总数据为80条
        JSONArray allDepts = new JSONArray();//保存数组内容
        for (int i = (currentPage-1)*linesize+1; i <= currentPage*linesize ; i++) {
            if (i >= 80){
                break;
            }
            JSONObject temp = new JSONObject();
            temp.put("deptno",i);
            temp.put("dname","dname-"+i);
            temp.put("loc","loc-"+i);
            allDepts.add(temp);
        }
        jsonObject.put("allDepts",allDepts);
        //将所有数据打印到页面中
        response.getWriter().print(jsonObject);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
    public void printParam(HttpServletRequest request){
        Enumeration<String> name = request.getParameterNames();
        while(name.hasMoreElements()){
            String temp = name.nextElement();
            System.out.println("[参数名称] = "+temp+":"+request.getParameter(temp));
        }
    }
}
  • 此时Servlet已经可以正常运行了
  • 创建前端页面


<html>
<head>

    <title>部门信息</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/dept_list.js"></script>
    <script type="text/javascript" src="js/util/split_plugin_search.js"></script>
    <script type="text/javascript" src="js/util/split_plugin_bar.js"></script>
</head>
<body>
    <!--放置分页插件的层-->
    <div id="splitPluginSearchDiv"></div>
    <!--显示数据层-->
    <div id="deptTabletDiv">
        <table id="deptTable" border="1" width="100%">
            <tr id="dept-title">
                <td id="deptno-title">部门编号</td>
                <td id="dname-title">部门名称</td>
                <td id="loc-title">部门位置</td>
            </tr>
        </table>
    </div>
    <!--放置分页插件的div层-->
    <div id="splitPluginBanderDiv"></div>
</body>
</html>

  • 为了能够将分页功能做成能够可重用的代码,应该将分页的搜索功能操作写在split_plugin_search.js文件中,将分页下的切换页面功能写在split_plugin_bar.js文件中.

  • 而每个数据分页的情况都不一样,这些不相同的部分因该有使用分页者自己完成,现在规定使用分页组件者应该将自定义的操作写在loadData()函数中完成

  • dept_list.js文件

$(function(){
    loadData();
});
//规定使用分页组件必须编写koadData()函数
function loadData(){
    //向Servlet中发送请求,返回的一定是json格式数据
    $.post("PageServlet",{"cp":jsParamCP,"ls":jsParamLS,"kw":jsParamKW,"col":jsParamCOL},
        function(data){
            //再追加数据前,先清空原表格数据
            clearTable();
            //返回的数据中包含有一组部门信息,使用的是json数组包装起来的
            for(var x=0;x <data.allDepts.length;x++){
                //取出每个部门的信息,交给addRow()函数处理,为表格添加数据
                addRow(data.allDepts[x].deptno,data.allDepts[x].dname,data.allDepts[x].loc);
            }
        },"json")
}
//清空表格中的数据
function clearTable(){
    //保留第一个表头
    $("#deptTable tr:gt(0)").empty();
}
//添加表格行数据
function addRow(deptno,dname,loc){
    $("#deptTable").append("<tr>" +"<td>"+deptno+"</td>" +"<td>"+dname+"</td>"+"<td>"+loc+"</td>"+ "</tr>")
}
  • 分页所需的数据应该交由组件控制,所以将分页所需的数据定义在split_plugin_bar.js中
//由split_plugin_bar.js来控制分页所需的数据
var jsParamCP = 1;
var jsParamLS = 10;
var jsParamKW = "";
var jsParamCOL = "dname";

基础分页

  • 现在整个程序的实现架构已经出现了,那么随后要处理的问题就是如何生成分页条,如果要想生成分也条可以借助于一些样式.
  • 将分页的样式拷贝到css目录中
  • 在以诶暗中进行改样式的导入
  • 一定要充分考虑到代码的宠用型设计,所以这个时候,用户可以看到的操作应该越少越好
    • 在solit_liugin_bar.js中定义一个函数,该函数中完成分页按钮的所有操作
    • 在split_plutin_bar.js文件中秩序进行分页的具体实现
    • 如果要进行分页处理,那么首先一定要知道总页数,但是总页数都是需要计算的来,并且所有接收到的数据都是字符串类型,为了达到可重用的调用,在split_plulin_bar.js文件中国新建立一个函数,calaAllpageSize()
  • 修改split_plugin_bar.js文件

//由split_plugin_bar.js来控制分页所需的数据
var jsParamCP = 1;
var jsParamLS = 10;
var jsParamKW = "";
var jsParamCOL = "dname";
var jsParamAllPageSize = 1;//保存分页总页数

function createPageNumber(data){
    calcAllPageSize(data.allRecorders);
}
function calcAllPageSize(allRecorders){
   if (allRecorders == 0){
    jsParamAllPageSize == 1;
   }else{
       jsParamAllPageSize = parseInt((allRecorders+jsParamLS-1)/jsParamLS);
       console.log(jsParamAllPageSize);
   }
}
  • 分页按钮的样式使用的是bootstrap中的按钮样式,在页面中"splitPluginBanderDiv"层生成页码按钮.
  • 但是为了方便每次添加页面,定义一个clearBander()函数,该函数负责清空原始的页码按钮元素.而后生成新的存放页码按钮的"ul"元素
function clearBaner(){
    //清空原始的数据
    $("#splitPluginBanderDiv").empty();
    //生成新的分页按钮ul
    $("#splitPluginBanderDiv").append("<ul class='pagination'></ul>")
}
  • 那么每次在生成新的分也条之前需要将原始的分页条清除掉,
function createPageNumber(data){//创建分页按钮的函数
    clearBaner();//清空分页按钮
    calcAllPageSize(data.allRecorders);
}
  • 考虑到有可能进行分页页码的动态生成处理,所以可以定义一个函数.addBar(),该函数
function addBar(index){//进行页码按钮的追加,index为页码内容
    var liobj = $("<li></li>");//每个页码按钮都是用li元素表示
    if(jsParamCP == index){//如果当前所在页于要生成的页码正好一样
        var spanObj = $("<a>"+index+"</a>");
        liobj.attr("class","active");
        liobj.append(spanObj);
    }else{
        var aObj = $("<a>"+index+"</a>");//如果生要生成的页码并不是当前所在页
        aObj.on("click",function(){
            //改变当前所在页
            jsParamCP = index;
            //重新加载页面
            loadData();
        });
        liobj.append(aObj);
    }
    $("#PageNumUl").append(liobj);
}
  • 而后在createPageNumber()函数中,通过循环的方式,生成页码
function createPageNumber(data){//创建分页按钮的函数
    clearBaner();//清空分页按钮
    calcAllPageSize(data.allRecorders);
    for(var x =1; x <=jsParamAllPageSize;x++){//根据总页数生成页码
        addBar(x);
    }
}
  • 在dept_list.js中,当用户使用loadData()函数的时候,只需要调用createPageNumber()这个函数完成分页页码的生成即可
function loadData(){
    //向Servlet中发送请求,返回的一定是json格式数据
    $.post("PageServlet",{"cp":jsParamCP,"ls":jsParamLS,"kw":jsParamKW,"col":jsParamCOL},
        function(data){
            //创建分页页码
            createPageNumber(data);
            //再追加数据前,先清空原表格数据
            clearTable();
            //返回的数据中包含有一组部门信息,使用的是json数组包装起来的
            for(var x=0;x <data.allDepts.length;x++){
                //取出每个部门的信息,交给addRow()函数处理,为表格添加数据
                addRow(data.allDepts[x].deptno,data.allDepts[x].dname,data.allDepts[x].loc);
            }
        },"json")
}
  • 基础分页效果

在这里插入图片描述

分页控制加强

  • 大部分的分页代码里面一定会有上一页以及下一页的操作处理,所以可以为此增加这样的功能
  • 定义一个新的函数,用户生成上一页
//创建上一页
function createLastPage(){
    var liobj = $("<li></li>");
    //如果当前所在页为1,表示已经到顶不了,不能再点击上一页了
    if(jsParamCP==1){
        liobj.attr("class","disabled");
        liobj.append("<span>上一页</span>");
    }else{
        var aobj = $("<a style='cursor:pointer'>上一页</a>");
        aobj.on("click",function(){
            jsParamCP--;
            loadData();
        });
        liobj.append(aobj);
    }
    $("#PageNumUl").append(liobj);
}
  • 定义一个函数为上一页的功能

//创建下一页
function createNextPage(){
    var liobj = $("<li></li>");
    //如果当前所在页为总页数,表示已经到底了
    if(jsParamCP==jsParamAllPageSize){
        liobj.attr("class","disabled");
        liobj.append("<span>下一页</span>");
    }else{
        var aobj = $("<a style='cursor:pointer'>下一页</a>");
        aobj.on("click",function(){
            jsParamCP++;
            loadData();
        });
        liobj.append(aobj);
    }
    $("#PageNumUl").append(liobj);
}
  • 对于这两个操作函数,应该在整个分页条前后执行
function createPageNumber(data){//创建分页按钮的函数
    clearBaner();//清空分页按钮
    calcAllPageSize(data.allRecorders);
    createLastPage();//创建上一页按钮
    for(var x =1; x <=jsParamAllPageSize;x++){//根据总页数生成页码
        addBar(x);
    }
    createNextPage();//创建下一页按钮
}

  • 在整个代码的处理过程之中,必须清楚一个问题,如果页码如果很多,那么就必须生成省略号,那么这个时候对于addBar()就不能够直接通过循环生成

  • 但是有几样按钮是可以单独存在的

    • 上一页
    • 下一页
    • 首页(第一页)
    • 尾页(最后一页,使用jsParamAllPageSize变量表示)

  • 定义一个专门增加省略点的函数

//创建省略号
function createEllipses(){
    var elliObj = $("<li><span>...</span></span></li>");
    $("#PageNumUl").append(elliObj);
}

  • 在createPageNumber()函数中,定义一个种子数,根据这个种子树判断是否使用省略号代替.

    • 具体判断是这样的,定义一个种子数,例如:3,使用当前页数和种子树比较,
    • 如果当前页数小于种子树的两倍,则认为页面可以正常显示,并且每次切换页数都显示当前页数后两位.如果当前页数加上两倍的种子数还是小于总页数,则后面使用省略号表示
    • 如果当前页数大于种子数的两倍,则认为页数过多,前面部分使用省略号表示,中间显示当前所在页的前三个和后三个按钮,如果当前所在页数加上两倍的种子数,还是小于总页数,则后半部分使用省略号表示.

  • 修改createPageNumber()函数

{//创建分页按钮的函数
    clearBaner();//清空分页按钮
    calcAllPageSize(data.allRecorders);
    createLastPage();//创建上一页按钮
    addBar(1);//第一页
    var seed = 3;//判断总页数是否过大的种子数
   if(jsParamCP < seed*2){//此时页数并不多
        for(var x=2;x<jsParamCP+seed;x++){
            if(x<jsParamAllPageSize) {
                addBar(x);
            }
        }
        if(jsParamCP+seed < jsParamAllPageSize){//如果后面依然后许多页数
            createEllipses();//使用省略号代替
        }
   }else{//此时页数较多
       //前面部分使用省略号表示
       createEllipses();
       //显示出当前前三个和,当前后三个按钮
       var startIndex = jsParamCP-seed;
       for (var i = startIndex; i <=jsParamCP+3; i++) {
           if(i < jsParamAllPageSize) {//去掉大于总页数的按钮
               addBar(i);
           }
       }
       if(jsParamCP+seed < jsParamAllPageSize){//如果后面依然后许多页数
           createEllipses();//使用省略号代替
       }
   }
   addBar(jsParamAllPageSize);
    createNextPage();//下一页
}
  • 此时的页面效果

在这里插入图片描述

在这里插入图片描述

模糊索引

  • 在实际开发里面,模糊查询的操作一定是用户自己操作处理的,但是在模糊查询是需要求改PageServlet.java文件
  • 在PageServlet里面,返回模糊查询的选择列,依然按照"标签名称:列名称"格式返回
  • 每次请求时可能会发送一个模糊查询列和一个模糊查询关键字,在回应输出时应该将这两个值也带上
  • 修改PageServlet.java程序类
        //模拟一些数据,该数据使用JSON格式数据包裹
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("columnData","deptno:部门编号|dname:部门名称");
        jsonObject.put("keyword",keyword);
        jsonObject.put("column",column);
  • 对于模糊查询而言,那么用户可以处理的操作很简单,也应该像分页码一样给一个函数
  • 在split_plugin_search.js文件中定义一个createSearch()函数
//添加搜索框组件
function createSearch(data){
    jsParamKW = data.keyword;
    jsParamCOL = data.column;
    $("#splitPluginSearchDiv").empty();//清空原数据
    createSearchSelected(data.columnData);//添加搜索框下拉列表
    createTextInput(data);//生成搜索文本框
}
  • 在执行loadData()函数时,调用此函数
function loadData(){
    //向Servlet中发送请求,返回的一定是json格式数据
    $.post("PageServlet",{"cp":jsParamCP,"ls":jsParamLS,"kw":jsParamKW,"col":jsParamCOL},
        function(data){
            //创建分页页码
            createPageNumber(data);
            //创建搜索框
            createSearch(data);
            //再追加数据前,先清空原表格数据
            clearTable();
            //返回的数据中包含有一组部门信息,使用的是json数组包装起来的
            for(var x=0;x <data.allDepts.length;x++){
                //取出每个部门的信息,交给addRow()函数处理,为表格添加数据
                addRow(data.allDepts[x].deptno,data.allDepts[x].dname,data.allDepts[x].loc);
            }
        },"json")
}
  • 检索框之中需要两个内容,一个是下拉列表,另一个是输入文本:
  • 编写一个创建下拉列表的函数
//添加搜索框下拉列表
function createSearchSelected(columnData){
    var selectObj = $("<select></select>");
    var columns = columnData.split("|");
    for (var i = 0; i < columns.length; i++) {
        var temp = columns[i].split(":");
        var optionObj = $("<option value='"+temp[0]+"'>"+temp[1]+"</option>");
        selectObj.append(optionObj);
       if(jsParamCOL == temp[0]){
           optionObj.attr("selected",true);
       }
    }

    $("#splitPluginSearchDiv").append(selectObj);

}
  • 随后还需要追加一个文本输入框,那么就需要有检索
  • 定义一个创建文本输入框的函数
//生成搜索文本框
function createTextInput(data){
    var inputobj = $("<input id='searchKw' value='"+data.keyword+"'/>");
    var searchBut = $("<input type='button' value='搜索'>");
    searchBut.on("click",function(){
        //改变模糊查询列和模糊查询值的关键字的值
        jsParamCOL = $("#col").val();
        jsParamKW = $("#searchKw").val();
        loadData();
    });
    var resultCount = $("<span>共返回"+data.allRecorders+"条数据</span>")
    $("#splitPluginSearchDiv").append(inputobj);
    $("#splitPluginSearchDiv").append(searchBut);
    $("#splitPluginSearchDiv").append(resultCount);
}
  • 在loadData()函数中调用createSearch()函数
//规定使用分页组件必须编写koadData()函数
function loadData(){
    //向Servlet中发送请求,返回的一定是json格式数据
    $.post("PageServlet",{"cp":jsParamCP,"ls":jsParamLS,"kw":jsParamKW,"col":jsParamCOL},
        function(data){
            //创建分页页码
            createPageNumber(data);
            //创建搜索框
            createSearch(data);
            //再追加数据前,先清空原表格数据
            clearTable();
            //返回的数据中包含有一组部门信息,使用的是json数组包装起来的
            for(var x=0;x <data.allDepts.length;x++){
                //取出每个部门的信息,交给addRow()函数处理,为表格添加数据
                addRow(data.allDepts[x].deptno,data.allDepts[x].dname,data.allDepts[x].loc);
            }
        },"json")
}
  • 最后的效果

在这里插入图片描述

{[("青椒盖饭")]}
关注
专栏目录
从零开始构建机器学习平台——架构设计、模块拆解及实现方案
AI天才研究院
08-10 809
概述在当今数据驱动的时代,机器学习已经成为众多行业和领域的核心技术。然而,构建一个完整、高效且可扩展的机器学习平台仍然是一项复杂的工程挑战。从数据收集和预处理,到模型训练、评估和部署,再到持续监控和优化,每个环节都需要精心设计和实现。本文旨在为读者提供一个全面的指南,详细介绍如何从零开始构建一个功能完备的机器学习平台。我们将深入探讨平台的整体架构设计,各个关键模块的功能和实现,以及在实际开发过程中可能遇到的挑战和解决方案。
广州.Net+Android训练营 课程体系4.1版
gzcz2545119563的专栏
04-18 3128
--- 总学时3个月 重要升级信息： a.加入.Net for Android 和 Unity3D游戏开发，.Net也可以开发 Android/IOS 的3D游戏啦！ 1. Part1.0：.Net基础加强、数据库操作、三层架构 Part1.1：C#基础增强 核心技术课程 1.C#基础加强：属性原理、OOP高级、多态、多态的两种代码表现形式、静态
jquery 分页——jqueryPage.js
11-23
jquery 分页——jqueryPage.js
使用JQuery实现分页功能
HelloJava1234的专栏
03-16 245
导读：原文作者Rajeev H发表了一篇《Paginate with JQuery》，文中介绍了使用JQuery代码制作的既漂亮又好用的分页插件。以下是文章摘要： 分页功能是用户在屏幕上的点击纪录列表按钮，从而实现上一页和下一页的分页功能。当你页面有大量的文字、图片信息，屏幕显示过长时，分页功能就起到了的作用。 让我们来看如何使用JQuery实现分页功能的插件。在本篇文章中就不具体介绍如何...
掌握jQuery实现分页动画与交互
最新发布
weixin_35815766的博客
09-10 1406
本文还有配套的精品资源，点击获取 简介：文章详细介绍了如何利用jQuery库实现网页中的分页效果。首先解释了分页的基本概念，并展示了实现翻页效果的基本步骤，包括HTML结构、CSS样式设计以及编写jQuery代码来处理翻页逻辑。文章重点讲解了数据加载、事件监听、动态显示/隐藏内容以及翻页动画等核心函数，并且提出了优化与扩展建议，如计算总页数、添加前后翻页按钮、状态保持、搜索...
JQuery分页
a5575vhj的博客
03-22 343
var searchParams = { currentPage : 1, pageSize : 10, }; $(function() { getQualityStarRank(searchParams); getMyQualityStarRank(); }); function getQualityStarRank(params){ //获取排名...
jQuery分页
Hellos_Worlds的博客
01-20 848
注: 只引用了jquery-1.8.2版本的脚本,其余版本的jquery脚本也可以 css样式: * { margin: 0; padding: 0; list-style: none; } .wrapper { width: 800px; margin: 50px auto; } /*清除浮动*/ .wrapper::after { content: ""; display: block; clear: both; } ul li
jquery分页
qq_44091061的博客
04-25 3901
jquery分页
大学生创新创业训练计划项目-学生管理系统
06-28
将企业项目中典型技术，比如MVC设计模式、三层架构、单态模式、Servlet、Jsp、Filter、Ajax、Jquery、Jdbc、动态SQL、图表技术、FileUpload、权限管理、验证码、自动登录、组合查询、无刷新分页等融入到案例模块中。...
实际项目训练之传智播客
09-14
6. **Ajax应用实例**: 在实际项目中，Ajax广泛应用于各种场景，如搜索建议、动态加载内容、表单验证、无刷新分页等。"传智播客ajax课堂源码"很可能包含了这些应用场景的示例代码，帮助学习者理解和实践。 在学习和...
Jquery 分页超简洁代码
天地不仁，以万物为刍狗！
04-23 1551
jQuery pagination $(document).ready(function(){ //how much items per page to show var show_per_page = 5;  //getting the amount of elements inside content div var number_of_items = $('#conte
jquery 分页
08-07
由于项目的需求，做了一个jquery 分页 ，类似于QQ空间的“近期访问好友”分页功能，重点运用的是jquery 选择器：lt和gt，没有做不到，只有想不到，开发的乐趣 ，无处不在！如有 优化的地方，请指正！
jquery实现分页
04-21
jquery实现分页，自带样式，可传多个参数
js 分页 jQuery分页
09-08
js 从后台获取json格式数据,然后进行简单的分页操作,没有使用插件,作为页面的分页还是比较简单的,很容易懂,适合学习web前段不是很长的人借鉴
jquery的分页
weixin_30922589的博客
10-15 90
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-s...
Java Web图书管理系统开发与需求实现
3. 实现技术：主要技术栈包括JSP、Servlet、JavaBean、JDBC、DAO以及jQuery用于页面交互，EL和JSTL用于简化JSP页面的表达式和控制结构，Bootstrap提供美观的前端布局，图形验证码保证账户安全，分页技术优化数据展示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值