js简单分页,可用

//翻页调用
    var pageSize = 1;
    var counts = 1;
    var current_page = 1;
    var rows,total;
    search();            //查询所有

    function search(){
        current_page = 1;
        $.ajax({
            type: "POST",
            url: "findList",
            data: {name : $(‘#searchname‘).val()},
            success: function(data){
                total = data.length;
                counts = Math.ceil(total/pageSize);
                counts = counts == 0 ? 1 : counts;
                rows = data;
                PageCallback();
            }
        });
    }

     function PageCallback(){
         $("#Result").text("");
         $("#pagecount").text("1/1");
         var flag = current_page*pageSize;
         for(var i=(current_page-1)*pageSize;i<(flag>total?total:flag);i++) {
             var v = rows[i];
             parentnode = v.parentnode == null ? ‘‘ : v.parentnode;
             parentName = v.parentName == null ? ‘‘ : v.parentName;
             description = v.description == null ? ‘‘ : v.description;
             var html = "<tr>";
             html += "<td align=‘center‘ valign=‘middle‘>" + v.id + "</td>";
             html += "<td align=‘center‘ valign=‘middle‘>" + v.name + "</td>";
             html += "<td align=‘center‘ valign=‘middle‘>" + v.organizationId + "</td>";
             html += "<td align=‘center‘ valign=‘middle‘>" + v.description + "</td>";
             html += "<td align=‘right‘ valign=‘middle‘>";
             html += "<a class=‘yichu‘ href=‘javascript:void(0)‘ onclick=edit(‘";
             html += v.id + "‘,‘" + v.name + "‘,‘" + v.isroot + "‘,‘" + parentnode + "‘,‘" + parentName + "‘,‘" + v.status + "‘,‘" + description ;
             html += "‘); >查看/修改</a>";
             var zTree = $.fn.zTree.getZTreeObj("orgTree");
             html += "<a class=‘yichu‘ href=‘javascript:void(0)‘ onclick=del(‘" + v.id + "‘); >删除</a></td>";
             html += "</tr>";

             $("#Result").append(html);
         }
         $("#pagecount").text(current_page + "/" + counts );
     }

     //上一页
     function prePage(){
         if(current_page == 1)
             return;
         current_page--;
         PageCallback();
     }

     //下一页
     function nextPage(){
         if(current_page == counts)
             return;
         current_page ++;
         PageCallback();
     }

jsp如下:<div class="user_query" style="margin-top: 15px;">            <table width="100%" border="0" cellspacing="0" cellpadding="0">                <thead>                    <tr class="title">                        <td width="7%" align="center" valign="middle">组织编号</td>                        <td width="13%" align="center" valign="middle">组织名称</td>                        <td width="22%" align="center" valign="middle">层级标识</td>                        <td width="21%" align="center" valign="middle">说明</td>                        <td width="37%" align="right" valign="middle" class="user_join"><a                            href="javascript:void(0)" onclick="add();">添加组织</a></td>                    </tr>                </thead>                <tbody id="Result">                                    </tbody>            </table>        </div>        <div class="users_fanye">            <ul>                <li class="nex" onclick="prePage();">上一页</li>                <li class="nex" id="pagecount">1/1</li><!--                 <li class="nex">2/2</li> -->                <li class="nex" onclick="nextPage();">下一页</li>            </ul>        </div>
时间: 2024-11-10 18:38:15

js简单分页,可用的相关文章

Js 简单分页(二)

此次使用了http://www.purecss.org/ 的前端Css 效果图 上代码 1 //更新分页工具栏的效果展示 2 function updatepagetoolshow(){ 3 //判断当前页 及 总页数 4 if(curpage == 1 && totalpage == 1) 5 { 6 //设置跳转按钮 不可点 7 $("#pagetool .turn").addClass("pure-button-disabled"); 8 }

PHP+MYSQL实现简单分页

第一次发表文章,试一试,这是我编写的一段小代码,实现简单分页效果,代码如下: 1 <html> 2 <head> 3 <title>物资管理系统</title> 4 <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> 5 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstra

锋利的js前端分页之jQuery

原文:锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. 1 /** 2 * pageSize, 每页显示数 3 * pageIndex, 当前页数 4 * pageCount 总页数 5 * url 连接地址 6 * pager(10, 1, 5, 'Index')使用方法示例 7 */ 8 function pager(pageSize

原生js版分页插件

之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,特此记录下来.如有不足之处,欢迎指出. 本插件可以实现的功能: 1. 可初始化每页条数,以及重新选择每页条数 2.自定义首末页.上下页按钮的显示内容(是:<<.  >>.  < .  >    还是:首页.末页.上一页.下一页) 3.设置当前页在一定范围时,是否显示省略号按钮 4.自定义当前页按钮与省略号按钮之间显示的数字按钮的个

单篇文章JS模拟分页

废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请求的时候,就已经把全文回传给客户端了,只是我们通过js的方式,把全文隐藏,每次翻页至显示出我们需要的那一部分,而不是真正的按需要去发出HTML请求.所以,在做这个插件的时候去掉了ajax请求的功能及其附带参数,去掉了pageSize参数(恒等于1).这里就不讨论具体的技术细节了和上一篇的分页计算原理

zepto-selector.js简单分析

zepto 的selector模块是对jquery扩充选择器(jquery-selector-extensions)的部分实现.比如这样的选择方法:$('div:first') 和 el.is(':visible'). 下面是原代码,简单的写了一些注释- ;(function($){ var zepto = $.zepto, oldQsa = zepto.qsa, oldMatches = zepto.matches /* * 检察一个元素是否可见.除了要判断display是否是none之外,还

Node.js简单介绍

Node.js是一个能够让javascript执行在server上的平台,既是语言又是平台. Node.js是一个实时web应用程序的平台. Node.js有强大的包管理器npm,故node相关软件安装用npm命令安装. Node.js简单介绍,布布扣,bubuko.com

MVC中使用MVCPager简单分页

一.建立数据库以及建立MVC项目 自己随便建立一个数据库,并且添加数据.我建立的数据库如下. 二.建立LINQ to SQL映射. 然后一步步点确定 三.编写代码 在Controllers中建立控制器,模板为空.建立的项目如下: 要添加视图Index 在Controller中选中Index 并且添加视图, 模板选中List, 如下 注意后台要添加对MvcPager的程序集引用,后台代码如下: using Webdiyer.WebControls.Mvc; public class Student

JS简单的倒计时(代码优化)

倒计时网上一大堆,所以也没有什么好说的,支持:1.年,月,日,天,时分秒等倒计时. JS代码如下: /* * js简单的倒计时 * @param {date,obj} 日期 对象格式 */ function CountDown(date,obj) { var self = this; self.date = date; self.obj = obj; self._init(); }; $.extend(CountDown.prototype,{ _init: function(){ var se