分页技术(异步刷新)

<script type="text/javascript">
        _jsonData = [];
        $(function(){
                //生成测试数据 -- json
                for(var i = 0 ; i < 200 ; i++){
                        _jsonData.push({name:"张三"+(i+1),pwd:"123456abc"+(i+1),age:(i+1)});
                }
                pageTotal.getDate(1,1);
                //alert(_jsonData.length);
        });
        //封装分页数据
        var pageTotal= {
                        current:1, //当前页
                        pageCount:8 , //每页显示的数据量
                        count : 0 ,//总数据量
                        total : 0 , //总共的页码
                        first : 1, //首页
                        last : 0 , //尾页
                        pre : 0, //上一页
                        next : 0 , //下一页
                        getPages : function(){ //计算分页信息
                                pageTotal.total = Math.ceil(pageTotal.count / pageTotal.pageCount);
                                pageTotal.last = pageTotal.total ;
                                pageTotal.pre = pageTotal.current - 1 <= 0?1:(pageTotal.current - 1);
                                pageTotal.next = pageTotal.current + 1 >= pageTotal.total?pageTotal.total:(pageTotal.current + 1);
                        },
                        //获取数据
                        getDate: function(pageno,type){

                                //清除content所有数据和元素
                                $("#tbcontent").empty();
                                if(pageno == null){
                                        pageno = 1;
                                }
                                //设置当前页
                                pageTotal.current = pageno;
                                pageTotal.count = _jsonData.length;
                                //设置每页显示的数据条数
                                pageTotal.pageCount = 8;
                                //分页信息
                                for(var i = (pageno-1)*pageTotal.pageCount ; i < ((pageTotal.current)*(pageTotal.pageCount)) ; i++){
                                        $("#tbcontent").append("<tr><td>"+_jsonData[i]["name"]+"</td><td>"+_jsonData[i]["pwd"]+"</td><td>"+_jsonData[i]["age"]+"</td></tr>");
                                }
                                //获取分页样式
                                pageTotal.page(type); //type表示分页栏样式
                        },
                        page : function(type){
                                //清除分页栏元素
                                $("#pages").empty();
                                //填充分页样式欠要加载分页数据
                                pageTotal.getPages();
                                if(type == 1){

                                        var x = 6;
                                        //设置上下页
                                        $("#pages").append(pageTotal.current+"/"+pageTotal.total+"   <a href=‘javascript:pageTotal.getDate(1,"+type+");‘>首页</a>    ");
                                        var index = pageTotal.current <=Math.ceil(x/2)?1:(pageTotal.current)>=pageTotal.total-Math.ceil(x/2)?pageTotal.total-x:(pageTotal.current-  Math.ceil(x/2));
                                        var end = pageTotal.current <= Math.ceil(x/2)?(x+1):(pageTotal.current+Math.ceil(x/2))>=pageTotal.total?pageTotal.total:(pageTotal.current+Math.ceil(x/2));
                                        for(var i = index ; i <= end ; i++){
                                                if(i == pageTotal.current){
                                                        $("#pages").append("<a href=‘javascript:pageTotal.getDate("+pageTotal.current+","+type+");‘ class=‘on‘>"+i+"</a>");
                                                }else{
                                                        $("#pages").append("<a href=‘javascript:pageTotal.getDate("+i+","+type+");‘>"+i+"</a>");
                                                }
                                        }
                                        if(end != pageTotal.total){
                                                $("#pages").append("    <span>...</span>");
                                        }
                                        $("#pages").append("    <a href=‘javascript:pageTotal.getDate("+pageTotal.last+","+type+");‘>尾页</a>");
                                }
                        }
        };
</script>

  

时间: 2024-12-19 05:41:47

分页技术(异步刷新)的相关文章

jsp的分页技术

在jsp开发中,很多时候要用到分页技术,另外纯粹的分页实现就占了很多篇幅,所以使用javabean就十分有必要. 此文章依据实际代码,想大家展示jsp中利用javabean实现分页 目录结构如下: javabean的代码如下: package lytjb; import java.sql.ResultSet; import javax.servlet.http.HttpServletRequest; public class fenye { ResultSet CountTopicrs = nu

无刷新分页技术,Ajax+smarty

这里运用Smarty模板,更简单 本文主要的技术:AJAX,PHP,Smarty,另外自己封装了一个很简单的类 类: (function(){    function $(id) {        return document.getElementById(id);    }    $.init=function() {        try{return new XMLHttpRequest();}catch(e){};        try{return new ActiveXObject

浅谈Java分页技术

话不多言.我们要实现java分页技术,我们首先就需要定义四个变量,他们是: int  pageSize;//每页显示多少条记录 int pageNow;//希望现实第几页 int pageCount;//一共有多少页 int rowCount;//一共有多少条记录 说明: 1.pageSize是指定的 2.pageNow是用户选择的 3.rowCount是从表中查询得到的 4.pageCount是计算得到的,该计算为: if(rowCount%pageSize==0) { pageCount=r

MVC分页技术

这个是用的插件分页技术 前台引用和js <script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/js/kkpager.min.js"></script> <link rel="stylesheet&quo

Lucene 查询分页技术

常用的Lucene查询代码如下所示,该代码的作用是将path路径下的所有索引信息返回 1 public String matchAll(String path) { 2 try { 3 Directory directory = FSDirectory.open(new File(path)); 4 DirectoryReader reader = DirectoryReader.open(directory); 5 IndexSearcher searcher = new IndexSearc

django分页技术django-pagination和Paginator

转载前还请注明出处:http://blog.csdn.net/gugugujiawei 一.概述 几乎所有的web应用,都需要分页功能,但分页技术总体来说分两种,一种是全部加载,存于浏览器的缓存中,一种是分页访问,部分加载.前一种方法优点是实现简单,在一些对项目要求不多的特定应用上用得较多,可以利用的插件譬如datatables,而后一种方法优点是不会占用服务器太多的缓存,对于数据量大的列表项必须用到这种技术.由于我现在的项目属于管理后台,管理来自成千上万用户的数据,因而只能用到第二种方法.初期

眼下最好的JSP分页技术

2005-08-24   来源:CSDN  作者:wanchao2001 前言     在使用数据库的过程中,不可避免的须要使用到分页的功能,但是JDBC的规范对此却没有非常好的解决.对于这个需求非常多朋友都有自己的解决方式,比方使用 Vector等集合类先保存取出的数据再分页.但这样的方法的可用性非常差,与JDBC本身的接口全然不同,对不同类型的字段的支持也不好.这里提供了一种与 JDBC兼容性非常好的方案.   JDBC和分页 Sun的JDBC规范的制定,有时非常让人哭笑不得,在JDBC1.

25、连接池(DBCP、C3P0)、动态代理与分页技术

连接池 思考: 程序中连接如何管理? 1. 连接资源宝贵:需要对连接管理 2. 连接: a) 操作数据库,创建连接 b) 操作结束, 关闭! 分析: 涉及频繁的连接的打开.关闭,影响程序的运行效率! 连接管理: 预先创建一组连接,有的时候每次取出一个: 用完后,放回: 学习连接池: a. 自定义一个连接池 b. 学习优秀的连接池组件 a) DBCP b) C3P0 动态代理 Java提供了一个Proxy类,调用它的newInstance方法可以生成某个对象的代理对象,使用该方法生成代理对象时,需

Servlet+JavaBean+JSP真假分页技术详解

说明:分页技术分为真分页和假分页,具体采用哪种技术需要根据需求自我抉择.其实两者之间实现区别并不是太大.在分页之前我们需要搞明白对谁进行分页,一般情况是将数据封装到一个list集合中,明白这这一点问题基本上就已经解决了.(编写匆促如有错误请联系我) 下面首先介绍真分页. 方法一: 为了大家学习起来方便, 我将在项目中用到的内容都放在这个文档中,所以可能会比较萝莉啰嗦. 1.构建数表,字段如下 goods goodid int goodname varchar(45) price flaot 2,

Web开发之分页技术

熟悉Web开发的小伙伴们都知道分页这个玩意儿,但是不会编程的小伙伴们对这个也绝对不陌生,只是不知道这是在Web开发中的一个非常重要的需求和技术罢了. 大家在浏览网上的文章或者图片的时候,经常会看到如下所示的页码显示效果: 这就是所谓的分页技术.为什么要进行分页呢? 很简单内容过多,会使我们的网页过长,我们在浏览网页的时候,不得不一直拖着滚动条或者一直去转鼠标的滚轮,才能看到全部的内容,转一圈.两圈.三圈,你觉得没什么,但是一直这么转下去,相信你会觉得非常的不爽,如此一来,为了获得更好的用户体验,