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. linux 内核 编绎配制选项详解

    http://blog.sina.com.cn/s/blog_8308bc810102ux0j.html

  2. oc学习笔记2

    .oc中的BOOL类型 oc中的BOOL类型的值为YES和NO,有点小奇怪 在oc中YES不等于1,但是NO一定等于0,所以不要把1和YES来比较 .消息发送 在oc中,经常使用这样的术语:将allo ...

  3. r2d_01

  4. UITableViewCell的选中时的颜色及tableViewCell的selecte与deselecte

    1.系统默认的颜色设置 //无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = ...

  5. linux-ssh远程后台执行脚本-放置后台执行问题(转)

    写了一个监控负载的小脚本(死循环,测试结束后再kill对应进程),因需要监控多台服务器,所以在一台服务器上使用ssh统一执行脚本遇到问题:使用ssh root@172.16.146.20 '/usr/ ...

  6. 推荐几个对Asp.Net开发者比较实用的工具 2

    推荐几个对Asp.Net开发者比较实用的工具.大家有相关工具也可以在评论区留言,一起努力学习. 作为程序员要有挑战精神,大家可以尝试一下这些工具. 已经有篇文章写到了vs的扩展工具,这里不再累赘,请查 ...

  7. (转)使用OpenVPN的一些注意事项

    原文地址:http://www.365mini.com/page/16.htm 本文介绍的只是OpenVPN连接或使用过程中的一些注意事项,如果你尚未下载安装OpenVPN,你可以点击查看OpenVP ...

  8. .net System.TypeInitializationException 类型初始值设定项引发异常

    错误原因:静态字段连接数据库内容错误(应为Integrated Security=True) 果然解决! 来自:http://blog.csdn.net/zhang1597116/article/de ...

  9. nyoj832 合并游戏(状态压缩DP)

    题意 : n个石子, 给你一个n*n矩阵, A[i][j]表示第i个和第j个合并蹦出的金币值, 合并完石子 j 消失.求合并所有石子后,所得的最大金币数. 分析 :     1. 题中给的数据范围   ...

  10. ACM——数的计数

    http://acm.njupt.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=1050 数的计数 时间限制(普通/Jav ...