Asp.Net之JS生成分页条的方法


Posted in Javascript onNovember 23, 2016

Default.aspx.cs中的代码

protected int pageIndex = 1;
protected int pageSize = 10;
protected int pageCount = 100;
protected string name = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
 int.TryParse(Request.QueryString["pageIndex"],out pageIndex);
 name=Request.QueryString["name"];
}

Default.aspx.cs中的代码

Body中的内容

名称:<input type="text" id="txtName" value="<%=name %>" />
  <div id="PageBar">

JS中的内容

<script src="jquery-1.4.1.js" type="text/javascript"></script>
  <script type="text/javascript">
  var pagecount=<%=pageCount %>;
  var pageindex=<%=pageIndex %>;
  var pageSize=<%=pageSize %>;
  $(function(){
    createPageBar(pageindex,pagecount);
  })

  //生成分页条
  function createPageBar(pageindex,pageCount){
   //拿到存放分页条的div并清空
   var pageBarObj=$('#PageBar');
   pageBarObj.html('');
   
   
   //判断给定页码
   if(pageindex<1){
     pageindex=1;
   }
   if(pageindex>pageCount){
     pageindex=pagecount;
   }

   //首页与上一页
   $('<a href="javaScript:void(0)">首页</a> ').appendTo(pageBarObj).click(function(){
     goPage(1);
   });

   if(pageindex>1){
     $('<a href="javaScript:void(0)">上一页</a> ').appendTo(pageBarObj).click(function(){
      goPage(pageindex-1);
     });
   }
   

   //数字分页
   var start=pageindex-4;
   if(start<1){
     start=1;
   }

   var end=start+9;
   if(end>pagecount){
     end=pagecount;
   }

   for(var i=start;i<=end;i++){
    $(' <a href="javascript:void(0)">['+i+']</a> ').appendTo(pageBarObj).click(function(){
     goPage(i);
    });
   }


   //下一页与尾页
   if(pageindex<pagecount){
    $('<a href="javaScript:void(0)">下一页</a> ').appendTo(pageBarObj).click(function(){
      goPage(pageindex+1);
     });
   }
   $('<a href="javaScript:void(0)">尾页</a>').appendTo(pageBarObj).click(function(){
     goPage(pagecount);
   });

  }

  //去跳转
  function goPage(pageindex){
    var name=$('#txtName').val();
    window.location="/Default.aspx?pageindex="+pageindex+"&name="+name;
  }
  </script>

以上这篇Asp.Net之JS生成分页条的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
javascript判断firebug是否开启的方法
Nov 23 #Javascript
JavaScript表单验证开发
Nov 23 #Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 #Javascript
分类解析jQuery选择器
Nov 23 #Javascript
概述jQuery的元素筛选
Nov 23 #Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 #Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 #Javascript
You might like
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
python实现简单猜单词游戏
2020/12/24 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
团委竞选演讲稿
2014/04/24 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers