jsp:< input value ="1" id ="current" type ="hidden"/>

<div id= "fenYe">
     </div >
js:
//四级下拉关系配合数据
 
$(function(){
           //进来就查询全部
          fenye(1);
          chuliYeMa();
     });
var totalPage;
      //分页方法
     function fenye(current){
               if(current == undefined){
                   current = 1;
              }
               //将点击后的页放入隐藏框里
              $( "#current" ).val(current);
               //详细原因
              var xxYuanyinSelLen = $("#xxYuanyinSel option").length;
               var xxYuanyinSelVal = $("#xxYuanyinSel option:selected").val();
               //详细部位
              var xxbuweiSelLen = $("#xxbuweiSel option").length;
               var xxbuweiSelVal = $("#xxbuweiSel option:selected").val();
               //部位
              var buweiClassSelLen = $("#buweiClassSel option").length;
               var buweiClassSelVal = $("#buweiClassSel option:selected").val();
               //项目
              var xiangMuClassSelLen = $("#xiangMuClassSel option" ).length;
               var xiangMuClassSelVal = $("#xiangMuClassSel option:selected" ).val();
               //刷新表数据
              if (xxYuanyinSelLen != 0 && xxYuanyinSelVal != "0" ){
                    //按详细原因查询
                   var className = "xxyuanyin";
               fenyeGetMsg(className,xxYuanyinSelVal,current);
                //查询时将总页数查出来
               getTotalPage(className,xxYuanyinSelVal);
              } else if(xxbuweiSelLen != 0 && xxbuweiSelVal != "0" ){
                    //按详细部位查询
                   var className = "xxbuwei";
               fenyeGetMsg(className,xxbuweiSelVal,current);
                //查询时将总页数查出来
               getTotalPage(className,xxbuweiSelVal);
              } else if(buweiClassSelLen != 0 && buweiClassSelVal != "0" ){
                    //按部位查询
                   var className = "buweiClass";
                   fenyeGetMsg(className,buweiClassSelVal,current);
                //查询时将总页数查出来
               getTotalPage(className,buweiClassSelVal);
              } else if(xiangMuClassSelLen != 0 && xiangMuClassSelVal != "0" ){
                    //按项目查询
                   var className = "xiangmuClass";
               fenyeGetMsg(className,xiangMuClassSelVal,current);
                //查询时将总页数查出来
               getTotalPage(className,xiangMuClassSelVal);
              } else if(xiangMuClassSelVal == "0"){
                    //默认查询全部,和第一级请选择是查询全部
                   var className = "xiangmuClass";
               fenyeGetMsg(className,xiangMuClassSelVal,current);
                //查询时将总页数查出来
               getTotalPage(className,xiangMuClassSelVal);
              }
               //处理页码
          chuliYeMa();
     }
      //处理页码
     function chuliYeMa(){
          
           var current = $("#current" ).val();
          
           var shang = current*1 -1;
           var xia =  current*1 + 1;
           var str = "" ;
           if(current>1){
              str += "<a href='javascript:fenye("+shang+ ");'>上一页</a>&nbsp;"
          } else{
              str += "<a>上一页</a>&nbsp;"
          }
           for(var i=1;i<=totalPage;i++){
               if(i == current){
                   str += "<a class='"+i+"'>"+i+ "</a>&nbsp;"
              } else{
                   str += "<a href='javascript:fenye("+i+ ");'>"+i+"</a>&nbsp;"
              }
          }
           if(current < totalPage){
              str += "<a href='javascript:fenye("+xia+ ");'>下一页</a><br/>"
          } else{
              str += "<a>下一页</a><br/>"
          }
          $( "#fenYe").html(str);
          }
     
      //获得总页数
     function getTotalPage(className,id){
          $.ajax({
            url : '${pageContext.request.contextPath}/SchoolController/findSmTotalPageByClass' ,
           data:{
                "className" :className,
                    "id":id
            },
            type: "post",
            success: function(data){
              totalPage = data;
            },
            error: function(){
              alert( "查询总页数失败" );
           },
            async: false
         });
     }
     
      //分页中获得数据
     function fenyeGetMsg(className,id,current){
               $.ajax({
                  url : '${pageContext.request.contextPath}/SchoolController/findMessageByClass' ,
                 data:{
                    "className" :className,
                    "id":id,
                    "current":current
                  },
                  type: "post",
                  success: function(data){
                    var str = "" ;
                    for(var i=0;i<data.length;i++){
                         str += "<a href='${pageContext.request.contextPath}/SchoolController/smYulan.from?id="+data[i].id+ "' target='_blank'>"+data[i].title+ "</a>&emsp;&emsp;&emsp;" +data[i].createtime+"<br/>"
                    }
                      $("#schoolMessageTableTbody" ).html(str);
                  },
                  error: function(){
                 },
                  async: false
               });
     }

js写分页的更多相关文章

  1. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  2. 使用纯js写的一个分页

    上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...

  3. 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  4. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  5. 单篇文章JS模拟分页

    废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...

  6. Ajax写分页查询(实现不刷新页面)

    获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...

  7. 用ajax写分页查询-----2017-05-17

    要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...

  8. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  9. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

随机推荐

  1. patchdiff2 函数比较插件

    https://code.google.com/archive/p/patchdiff2/downloads

  2. -----------------------------MVC模式理解-----------------------------

    1.用户发送请求到控制层: 2.控制层将接受到的请求转发到模型层: 3.模型层将请求结果转发到控制层: 4.控制层将模型层返回的结果进行视图渲染: 5.视图渲染后返回(jstl): 6.将视图展示给用 ...

  3. 【转】MyEclipse第一个Servlet程序

    转自:http://blog.csdn.net/wangdingqiaoit/article/details/7674367 前言 本文旨在帮助学习java web开发的人员,熟悉环境,在Win7系统 ...

  4. 16Aspx.com源码2014年7月详细

            Web电子商务网(三层)V2.0源码 2014-07-31   [VS2010] 源码介绍: Web电子商务网(三层)V2.0源码 源码描述: 一.源码特点     采用三层架构开发, ...

  5. yield 关键字和迭代器

    一般使用方法     yield 关键字向编译器指示它所在的方法是迭代器块 在迭代器块中,yield 关键字与 return 关键字结合使用,向枚举器对象提供值. 这是一个返回值,例如,在 forea ...

  6. import com.sun.image.codec.jpeg.JPEGCodec不通过 Eclipse找不到包

    Eclipse默认把这些受访问限制的API设成了ERROR.只要把Windows-Preferences-Java-Complicer-Errors/Warnings里面的Deprecated and ...

  7. 【转】浅析Windows编程的剪贴板

    摘要: 本文对Windows剪贴板机制作了深入.全面的阐述,具体内容包括:文本.位图.DSP.自定义格式剪贴板的使用和多数据项和延迟提交技术. 关键词: VC++6.0: 剪贴板机制:数据格式:延迟提 ...

  8. Java_web 乱码和一些地址输错的问题(原创)

    1.首先记录下java_web的发布问题:安装好了Tomcat和MyEclipse后,从MyEcilpe中自动发布,不需要手动打开Tomcat 2.ipmort别人的程序后,先部署,后run后拉你的T ...

  9. [python]pep8编码规范

    一 代码编排1 缩进.4个空格的缩进(编辑器都可以完成此功能),不使用Tap,更不能混合使用Tap和空格.2 每行最大长度79,换行可以使用反斜杠,最好使用圆括号.换行点要在操作符的后边敲回车.3 类 ...

  10. xCode如何导入自定义的snippets文件

    xCode代码块snippets导入 目标文件放置位置 ~/Library/Developer/Xcode/UserData/CodeSnippets 操作方法: 解压缩并复制到以下目录即可