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. java11 Guava:谷歌开发的集合库

    Guava:谷歌开发的集合库,通过build path->Add External JARs 把guava.jar包加进去. 版本控制工具:.CVS .SVN .git 所以需要下载git客户端 ...

  2. android 中 系统日期时间的获取

    import    java.text.SimpleDateFormat; SimpleDateFormat    formatter    =   new    SimpleDateFormat   ...

  3. Hibernate缓存杂谈

    1.什么是缓存? 缓存是介于物理数据源与应用程序之间,是对数据库中的数据复制一份临时放在内存中的容器,其作用是为了减少应用程序对物理数据源访问的次数,从而提高了应用程序的运行性能.Hibernate在 ...

  4. Spring、struts、webwork2三者MVC的比较

    http://blog.sina.com.cn/s/blog_4a69fa43010005il.html 在web应用方面,Spring有独立的MVC实现,与struts和webwork2相比毫不逊色 ...

  5. Js 学习资料

    Js 语法 http://www.php100.com/manual/jquery/   jqGrid控件 http://www.trirand.com/blog/jqgrid/jqgrid.html

  6. Unity3D题目,Unity中利用GUI输出九九乘法表

    网上看到的这题,下面贴出源代码 using UnityEngine;using System.Collections; public class c99 : MonoBehaviour//C#脚本名: ...

  7. 火狐浏览器插件Modify Headers伪造IP地址

    安装插件:先打开火狐浏览器 => 找到下载好的 modify_headers.xpi 插件文件 => 鼠标按住插件文件不放,拖拽到火狐浏览器界面 => 按提示重启浏览器 => ...

  8. 基于mod_proxy+Apache 2.2.16+Tomcat 7的负载均衡与集群配置

    第一章. 背景简介 对于大多数企业应用,都希望能做到7*24小时不间断运行.要保持如此高的可用性并非易事,比较常见的做法是将系统部署到多台机器上,每台机器都对外提供同样的功能,这就是集群.系统变为集群 ...

  9. JavaScript学习笔记 -- ES6学习(二) let 和const

    ES6 中新增了两个命令: let 和const. let命令: let 用于声明变量,和var 类似,但是所声明的变量只在代码块中有效,不存在变量提升,有暂时性死区. 1.只在代码块中有效 和var ...

  10. erlang 里的if 和 case

    case Expression of Pattern1 [when Guard1] -> Expr_seq1; Pattern2 [when Guard2] -> Expr_seq2; … ...