Jquery简单分页实现方法

2024-10-20 04:02:58

本文实例讲述了Jquery简单分页实现方法。分享给大家供大家参考。具体如下：

js代码：

function dolistpage(pagerow,pagenum,rowcount,pagecount){
 $("#pagemsg").html("每页显示"+pagerow+"条，当前" + pagenum + "/" +pagecount + "页 共" +rowcount + "条");
 if (pagenum == 1) {
  $("#fpbtn").attr("disabled", true);
  $("#rpbtn").attr("disabled", true);
 }else {
  $("#fpbtn").removeAttr("disabled");
  $("#rpbtn").removeAttr("disabled");
 }
 if (pagenum == pagecount) {
  $("#npbtn").attr("disabled", true);
  $("#lpbtn").attr("disabled", true);
 }else {
  $("#npbtn").removeAttr("disabled");
  $("#lpbtn").removeAttr("disabled");
 }
 $("#fpbtn").click(function(){
  loadtpage(1);
 });
 $("#rpbtn").click(function(){
  loadtpage(pagenum - 1);
 });
 $("#npbtn").click(function(){
  if ((pagenum + 1) >= pagecount)
   loadtpage(pagecount);
  else
   loadtpage(pagenum + 1);
 });
 $("#lpbtn").click(function(){
  loadtpage(pagecount);
 });
 $("#gpbtn").click(function(){
  var tzys = $("#gpinput").val();
  var re = /^[1-9]+[0-9]*$/;
  if (tzys == null || tzys == undefined || tzys == '') {
   alert("请输入跳转页数!");
   $("#gpinput").focus();
   return;
  }
  if (!re.test(tzys)) {
   alert("请输入正确跳转页数!");
   $("#gpinput").focus();
   return;
  }
  if (tzys > pagecount)
   tzys = pagecount;
  if (tzys <= 0)
   tzys = 1;
  loadtpage(tzys);
 });
 $("#gpinput").val(pagenum);
}

HTML代码：

<table>
 <tfoot>
  <tr>
   <td colspan="11">
    <span class="water-table-listbtn"></span>
    <span class="water-table-page">
     <span id="pagemsg" class="water-table-pagemsg">当前0/0页</span>
     <input type="button" id="fpbtn" value="首页"/>
     <input type="button" id="rpbtn" value="上页"/>
     <input type="button" id="npbtn" value="下页"/>
     <input type="button" id="lpbtn" value="尾页"/>
     <span id="pagemsg" class="water-table-pagemsg">跳转
     <input type="text" id="gpinput" size="3" value="0"/>页
     </span>
     <input type="button" id="gpbtn" value="跳转"/>
    </span>
   </td>
  </tr>
 </tfoot>
</table>

希望本文所述对大家的jquery程序设计有所帮助。

jQuery插件分享之分页插件jqPagination

使用方法: 添加 jQuery 类库.jqPagination 插件的 JS 和 CSS 文件复制代码代码如下: <link rel="stylesheet" href="jqpagination.css"/><script src="jquery-1.6.2.min.js"></script><script src="jquery.jqpagination.min.js">
jQuery插件jPaginate实现无刷新分页

jPaginate是基于jQuery的动感滚动分页插件,它的表现形式是像分页的按钮一样,非常有意思的是这些按钮却可以滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的前后滚动. PHP读取第一页数据: <div id="pagetxt"> <?php $query = mysql_query("select id,title,addtime from article order by id desc limit 0, 6"); while ($
jQuery插件pagination实现分页特效

实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进. 使用方法: 1.加载插件和jQuery <link rel="stylesheet" href="
jQuery前端分页示例分享

大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. 复制代码代码如下: /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总页数 * url 连接地址 * pager(10, 1, 5, 'Index')使用方法示例 */ function pager(pageSize, pageIndex, pageCoun
jquery向上向下取整适合分页查询

在用ajax进行分页查询时,分页的数目要用到取整函数 <script language="javascript"> var uu=Math.floor(5.36) //向下取整结果为5 var uu=Math.floor(5.88) //结果为5 Math.ceil(5.33) //向上取整,结果为6 Math.round(5.55) //四舍五入结果为6 math.round(5.22) //结果为5 </script>
推荐一款PHP+jQuery制作的列表分页的功能模块

做了一个列表分页的功能模块,主要的文件包括分页类 page.class.php 和控制 ajax 分页的ajax.js,主要功能有: 1.可以选择 3 种常见的 url 分页格式: 2.可以选择 url 分页还是 ajax 分页: 3.两种分页方式都可以自定义分页 a 标签的文字: 4.url 分页方式可以自定义分页偏移量: 5.url 分页方式可以选择手动跳转方式:手动输入页码跳转或下拉菜单选择页码跳转. 列表分页功能含有但不一定全部包含的元素包括: 首页.下一页.上一页.末页.具体页
分享一个自己动手写的jQuery分页插件

工作需要一个JS分页插件,心想自己动手写一个吧,一来上网找一个不清楚代码结构的,出了问题难以解决,而且网上的插件所包含的功能太多,有些根本用不到,就没必要加载那段JS,二来想起没写过jQuery插件,就当练一下手了,好了,先看结果: http://demo.jb51.net/js/2014/EasyPage/ 简单说一下这个插件所要实现的功能后台将查询出来的内容全部显示到页面上,这个插件要控制这些内容,使其一页一页显示.有上一页,下一页,首页,尾页的功能.在第一页时,上一页,首页要隐藏.在最后
jQuery打印指定区域Html页面并自动分页

最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件用法: $("div#printmain").printArea(); 但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页 <div style="page-break-after: always;"></div> 有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件中的属性参数. PrintArea
Jquery简单分页实现方法

本文实例讲述了Jquery简单分页实现方法.分享给大家供大家参考.具体如下: js代码: function dolistpage(pagerow,pagenum,rowcount,pagecount){ $("#pagemsg").html("每页显示"+pagerow+"条,当前" + pagenum + "/" +pagecount + "页共" +rowcount + "条");
jquery简单倒计时实现方法

本文实例讲述了jquery简单倒计时实现方法.分享给大家供大家参考,具体如下: var intDiff = parseInt(60); //倒计时总秒数量 function timer(intDiff) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0; //时间默认值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 2
Yii实现简单分页的方法

本文实例讲述了Yii实现简单分页的方法.分享给大家供大家参考,具体如下: yii分页方法 function actionPage(){ $criteria=new CDbCriteria(); $count=Archives::model()->count($criteria); $pages=new CPagination($count); // results per page $pages->pageSize=10; $pages->applyLimit($criteria); $
在大数据情况下MySQL的一种简单分页优化方法

通常应用需要对表中的数据进行翻页,如果数据量很大,往往会带来性能上的问题: root@sns 07:16:25>select count(*) from reply_0004 where thread_id = 5616385 and deleted = 0; +----+ | count(*) | +----+ | 1236795 | +----+ 1 row in set (0.44 sec) root@sns 07:16:30>select id from reply_0004 wher
asp.net实现简单分页实例

本文实例讲述了asp.net实现简单分页的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: /// <summary> /// 分页内容 /// </summary> /// <param name="size">页面大小</param> /// <param name="count">页面数量</param> /// <param name="curren
asp.net+ajax简单分页实例分析

本文实例讲述了asp.net+ajax简单分页实现方法.分享给大家供大家参考,具体如下: 这里涉及两个.aspx文件,一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来显示一些测试数据,后一个用来对分页进行处理.js文件夹下面还有一个testJs.js的文件,它就是ajax操作的核心部分.不错,code is cheap.看代码: /*testJs.js*/ // 此函数等价于document.getElementById /document.all fun
jquery简单插件制作(fn.extend)完整实例

本文实例讲述了jquery简单插件制作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&qu
jQuery实现伪分页的方法分享

本文实例讲述了jQuery实现伪分页的方法.分享给大家供大家参考,具体如下: 可以对表格数据进行伪分页,而且只需要执行简单的代码就可以实现. 实现的很简单.样式也不太好看,大家可以自行调整,纠正. 下面是一个table,tbody里加载tr数据,无论你怎么加载, 在数据加载完成后便可以对table数据进行伪分页.注意div引用的class,我填充的数据是四列的,所以td里加了colspan,div是分页显示区域 <table> <tbody id="dialog-items&q
jQuery实现的简单分页示例

本文实例讲述了jQuery实现的简单分页.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&
jQuery简单创建节点的方法

本文实例讲述了jQuery简单创建节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1

Jquery简单分页实现方法

相关推荐

随机推荐