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. Bluetooth 4.0之Android 讲解

    Android平台包含了对蓝牙网络协议栈的支持,它允许一个蓝牙设备跟其他的蓝牙设备进行无线的数据交换.应用程序通过Android蓝牙API提供访问蓝牙的功能.这些API会把应用程序无线连接到其他的蓝牙 ...

  2. mysql strace fsync,fdatasync

    mysql> show create table y; +-------+------------------------------------------------------------ ...

  3. linux Kernell crash dump------kdump 的安装设置+Linux系统崩溃的修复解决过程+mysql+kvm

    http://www.ibm.com/developerworks/cn/linux/l-cn-dumpanalyse/https://www.kernel.org/pub/linux/utils/k ...

  4. 【转】如何高效利用GitHub——2013-08-28 22

    http://www.yangzhiping.com/tech/github.html  正是Github,让社会化编程成为现实.本文尝试谈谈GitHub的文化.技巧与影响. Q1:GitHub是什么 ...

  5. HDU2076

    夹角有多大(题目已修改,注意读题) Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  6. Mac安装Mysql无法登录

    Mac安装的Mysql5.7.10 执行mysql -u root -p 就要求输入密码,但是新安装是没密码的.然后就会报错. ERROR 1045 (28000): Access denied fo ...

  7. (转+整理) oracle authid definer 与 authid current_user

    转:http://blog.csdn.net/indexman/article/details/17067531 http://blog.csdn.net/liqfyiyi/article/detai ...

  8. string应用

    今天在网上搜了一些资料. C# string类应用 判断是否包含子串 想要判断一个字符串中是否包含某个子串,可以用Contains方法来实现: ? public bool Contains (stri ...

  9. 关于安卓应用(APK文件)的二次打包

    http://blog.csdn.net/baiyuliang2013/article/details/40426681 很多开发者,不管是个人或是公司都不太注重自己开发的应用的安全性,即是 否会被不 ...

  10. UML类图细节

    类图表述的是类和类之间的关系,是前期用来推演代码设计,后期用来优化代码的结构,寻找设计不合理之处.网上解释类图和类图的画法,往往表述的十分晦涩,或者例子呆板,很难具体的操作. 类图一般在详细设计过程中 ...