基于AJAX的分页类实现代码

代码如下:

/**
* <p>pagination.js
* <p>通用的基于AJAX的分页类
* @author jeanwendy
* @version 1.0
*/
var paginationIndex = 0;
var pagination = function(trTemplatId) {
    $().ajaxStart(function() {
        $.blockUI({
            message : '<table><tr><td style="vertical-align :bottom"><font size=2pt> 加载数据,请稍后...</font></td></tr></table>'
        });
    }).ajaxStop($.unblockUI);

paginationIndex = paginationIndex + 1;
    this.id = paginationIndex;
    this.trTemplatId = trTemplatId;
    this.pageNo = 1;
    this.pageSize = 10;
    this.beforeQuery = null;
    this.afterQuery = null;
    this.url = null;
    this.params = null;
    this.templat = null;
    this.childrenCount = null;

this.setPageNo = function(pageNo) {
        if (pageNo != null)
            this.pageNo = pageNo;
    }
    this.setPageSize = function(pageSize) {
        if (pageSize != null)
            this.pageSize = pageSize;
    }
    this.setBeforeQuery = function(fn){
        this.beforeQuery = fn;
    }
    this.setAfterQuery = function(fn){
        this.afterQuery = fn;
    }

this.load = function(url, params) {
        //初始化(只在第一次查询时执行)
        if(this.templat == null && this.childrenCount == null){
            var templatObj = $('#'+this.trTemplatId);
            templatObj.parent().attr('id','tbody_id'+this.id);
            templatObj.removeAttr('id');
            templatObj.wrap("<div id='divTemplat'></div>");
            this.templat = $('#divTemplat').html();
            $('#divTemplat').remove();
            this.childrenCount = $('#tbody_id'+this.id).children().size();
        }
        //开始查询
        this.url = url;
        if(params == null) params = {};
        $.extend(params,{pageNo:this.pageNo,pageSize:this.pageSize});
        this.params = params;
        var thisObj = this;
        var options = {
            url : url,
            data : params,
            async : false, //采用同步方式请求
            type : 'POST',
            dataType : 'json',
            error : function(xmlhttp, errInfo, e) { //请求出错处理:如:404等
                if (xmlhttp.status == 200) alert('您已经很长时间没有访问网站,请退出后重新登陆!');
                else alert('请求后台服务时发生错误:' + xmlhttp.status);
            },
            success : function(data){
                //删除上一次的数据
                $('#tbody_id'+thisObj.id).children().filter(':gt('+(thisObj.childrenCount-1)+')').remove();
                thisObj.pageList(data.data);
                thisObj.pageBar(data.total);
                if($.isFunction(thisObj.afterQuery)) thisObj.afterQuery();
            }
        };
        if($.isFunction(this.beforeQuery)) this.beforeQuery();
        $.ajax(options); //发送请求
    }

this.pageList = function(data){
        var filedArr = this.templat.match(/\{[A-Za-z0-9_]+\}/ig);
        for(var i = 0;i < data.length;i++){
            var thisTemplat = this.templat;
            for(var j = 0;j < filedArr.length;j++){
                var key = filedArr[j].substring(1,filedArr[j].length-1);
                if(key == 'NO_'){ //序号标识
                    var value = (this.pageNo-1)*this.pageSize + i + 1;
                    thisTemplat = thisTemplat.replace(new RegExp('\{'+key+'\}','gm'),value);
                }else{
                    var value = data[i][key];
                    if(typeof(value) != "undefined" && value == null) value = '';
                    thisTemplat = thisTemplat.replace(new RegExp('\{'+key+'\}','gm'),value);
                }
            }
            $(thisTemplat).appendTo($('#tbody_id'+this.id));
        }
    }

this.pageBar = function(total){
        var templatObj = $(this.templat);
        var delChildren = templatObj.children(':gt(0)');
        delChildren.remove();
        templatObj.children().attr('colspan',$(this.templat).children().size());
        templatObj.children().attr('align','right');
        var pageCount;
        if(total % this.pageSize == 0) pageCount = total/this.pageSize;
        else pageCount = parseInt(total/this.pageSize) + 1;
        if(pageCount == 0) pageCount = 1;
        var toolbar = "第"+this.pageNo+"/"+pageCount+"页("+total+"条记录)";
        if(this.pageNo == 1) toolbar = toolbar + " 首页 上页";
        else toolbar = toolbar + " <a href='' id='firstPage"+this.id+"'>首页</a> <a href='' id='prePage"+this.id+"'>上页</a>";
        if(this.pageNo == pageCount) toolbar = toolbar + " 下页 末页";
        else toolbar = toolbar + " <a href='' id='nextPage"+this.id+"'>下页</a> <a href='' id='lastPage"+this.id+"'>末页</a>";
        toolbar = toolbar + " 每页<input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pageSize"+this.id+"' value="+this.pageSize+" />条";
        toolbar = toolbar + " <input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pageNo"+this.id+"' value="+this.pageNo+" />";
        toolbar = toolbar + " <input style='height:20px;border:1 solid black' id='goPage"+this.id+"' type='button' value='GO'>";
        templatObj.children().html(toolbar);
        $(templatObj.wrap("<div></div>").parent().html()).appendTo($('#tbody_id'+this.id));
        var thisObj = this;
        $('#firstPage'+thisObj.id).click(function(){
            thisObj.pageNo = 1;
            thisObj.load(thisObj.url,thisObj.params);
            return false;
        });
        $('#prePage'+thisObj.id).click(function(){
            thisObj.pageNo = parseInt(thisObj.pageNo) - 1;
            thisObj.load(thisObj.url,thisObj.params);
            return false;
        });
        $('#nextPage'+thisObj.id).click(function(){
            thisObj.pageNo = parseInt(thisObj.pageNo) + 1;
            thisObj.load(thisObj.url,thisObj.params);
            return false;
        });
        $('#lastPage'+thisObj.id).click(function(){
            thisObj.pageNo = pageCount;
            thisObj.load(thisObj.url,thisObj.params);
            return false;
        });
        $('#pageSize'+thisObj.id).keydown(function(e){
            if(e.keyCode==13) {
                var v = $('#pageSize'+thisObj.id).val();
                if(!isIntGreatZero(v) || v == '0'){
                    alert('您输入显示条数不合法,请重新输入!');
                    $("#pageSize"+thisObj.id).focus();
                    return;
                }
                if(v > 200){
                    alert('您输入显示条数过大了,请重新输入!');
                    $("#pageSize"+thisObj.id).focus();
                    return;
                }
                thisObj.pageNo = 1;
                thisObj.pageSize = v;
                thisObj.load(thisObj.url,thisObj.params);
            }
        });
        $('#pageNo'+thisObj.id).keydown(function(e){
            if(e.keyCode==13) {
                $('#goPage'+thisObj.id).triggerHandler('click');
            }
        });
        $('#goPage'+thisObj.id).click(function(){
         var v = $('#pageNo'+thisObj.id).val();
            if(!isIntGreatZero(v) || v == '0'){
                alert('您输入页数不合法,请重新输入!');
                $("#pageNo"+thisObj.id).focus();
                return;
            }
         if(v > pageCount){
                alert('您输入页数大于总页数,请重新输入!');
                $("#pageNo"+thisObj.id).focus();
                return;
            }
            thisObj.pageNo = v;
            thisObj.load(thisObj.url,thisObj.params);
        });
    }

}
//true if the string is empty
var isEmpty = function(text) {
    var isEmpty = true;
    for (var i = 0; i < text.length; i++) {
        if (text.charAt(i) != ' ') {
            isEmpty = false;
            break;
        }
    }
    return isEmpty;
}
//true if the string is int and great than zero or equals zero
var isIntGreatZero = function(str) {
    if (isEmpty(str))
        return false;
    var temp1 = true;
    var temp2 = '0123456789';
    for (var i = 0; i < str.length; i++) {
        var c = str.charAt(i);
        if (temp2.indexOf(c) == -1) {
            temp1 = false;
            break;
        } else {
            if (c == '0' && i == 0 && str.length > 1) {
                temp1 = false;
                break;
            }
        }
    }
    return temp1;
}

(0)

相关推荐

  • asp+ajax实现静态页面分页的代码

    最近因工作需要,要在静态页面上实现分页,想了下,决定用AJAX来实现,所以就捣鼓了下面这么个东西,截图如下: 复制代码 代码如下: <html> <head> <title>AJAX静态分页</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css&quo

  • 用jQuery中的ajax分页实现代码

    功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请看源码: 1.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="Measur

  • ASP AJAX 静态分页第1/2页

    <html> <head> <title>AJAX静态分页演示:http://www.jb51.net</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> <!-- body                { text-al

  • AJAX分页的代码(后台asp.net)

    在ASP.NET 中有很多数据展现的控件,比如用的最多的GridView,它同时也自带了分页的功能.但是我们知道用GridView来显示数据,如果没有禁用ViewState,页面的大小会是非常的大的.而且平时我们点击首页,下一页,上一页,尾页这些功能都是会引起页面回发的,也就是需要完全跟服务器进行交互,来回响应的时间,传输的数据量都是很大的.AJAX的分页可以很好的解决这些问题. 开发的坏境是:jQuery AJAX+Northwind. 具体的步骤: SearchCustomer.aspx:

  • php ajax无刷新分页,支持id定位

    <?php Header("Content-Type:text/html; charset=utf-8"); function AjaxPage($Total,$ListNub,$CurrentPage,$Url,$AjaxAction,$HalfPer='',$ViewId='') { //计算总页数 $totalPage = @ceil($Total/$ListNub); $total=$totalPage-1; $re=""; //echo $Curre

  • 无框架 Ajax分页(原创)第1/2页

    使用如上方法确实可以实现Ajax分页效果,但我总觉得不够简洁,研究了一下午,终于捣鼓出了点东西O_o首先创建前台页面MyAjaxPager.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyAjaxPager.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.MyAjaxPager

  • ajax实现无刷新分页(php)

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>投票结果</title> <meta http-equiv="content-type" content=&quo

  • AJAX和三层架构实现分页功能具体思路及代码

    复制代码 代码如下: -----------------------------HTMLPage1.htm--------------------------------- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> table{ border:solid 1px #44

  • Ajax PHP分页演示

    今天看默默讲解分页,想想好像原创区很久没人发帖了,就顺便把默默的那个扩展开来,来个PHP+AJAX分页演示吧,好的,说来就来,首先我们依然是基本的AJAX开发框架: 复制代码 代码如下: var http_request=false;    function send_request(url){//初始化,指定处理函数,发送请求的函数      http_request=false;      //开始初始化XMLHttpRequest对象      if(window.XMLHttpReque

  • 基于AJAX的分页类实现代码

    复制代码 代码如下: /** * <p>pagination.js * <p>通用的基于AJAX的分页类 * @author jeanwendy * @version 1.0 */ var paginationIndex = 0; var pagination = function(trTemplatId) {     $().ajaxStart(function() {         $.blockUI({             message : '<table>

  • thinkPHP5框架实现基于ajax的分页功能示例

    本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法 首先看一下tp5的分页功能介绍 参数 描述 list_rows 每页数量 page 当前页 path url路径 query url额外参数 fragment url锚点 var_page 分页变量 type 分页类名 $caseDetails = CaseDetails::where(['status'=>1])

  • 一个PHP分页类的代码

    下面看这一段代码: PHP 复制代码 代码如下: <? /** * filename: ext_page.class.php * @package:phpbean * @author :feifengxlq<feifengxlq#gmail.com><http://www.phpobject.net/> * @copyright :Copyright 2006 feifengxlq * @license:version 2.0 * @create:2006-5-31 * @m

  • php 分页类 扩展代码

    原来发表过一个脱离数据库的分页类,最近使用的时候发现有些时候搜索的东西过于大的时候,采用url传递参数的方式,可能会有一定的影响或者叫已知的bug,这次做了一些扩展,同时兼容了以前的模式,使用上面很简单的,只需要多设置一个参数就可以了代码如下: 复制代码 代码如下: <?php /** * 功能: 分页类,根据提供的数据总量和页面大小 * 创建日期:Fri Apr 20 16:45:21 CST 2007 * 最后更新: * 作者: sanshi <sanshi0815@tom.com>

  • 基于游标的分页接口实现代码示例

    前言 分页接口的实现,在偏业务的服务端开发中应该很常见,PC时代的各种表格,移动时代的各种feed流.timeline. 出于对流量的控制,或者用户的体验,大批量的数据都不会直接返回给客户端,而是通过分页接口,多次请求返回数据. 而最常用的分页接口定义大概是这样的: router.get('/list', async ctx => { const { page, size } = this.query // ... ctx.body = { data: [] } }) // > curl /l

  • 又一个php 分页类实现代码

    复制代码 代码如下: <?php function genpage(&$sql,$page_size=10) { global $pages,$sums,$eachpage,$page; //总页数,总记录,每页数,当前页 $page = $_GET["page"]; if($page ==0)$page =1; $eachpage = $page_size; $pagesql = strstr($sql," from "); $pagesql = &

  • MyBatis基于pagehelper实现分页原理及代码实例

    使用pagehelper分页的原理是: 通过MyBatis的插件原理(类似web里的filter拦截器),在mapper配置文件将pagehelper注册为MyBatis的插件,从而进行分页 1.通过maven引入pagehelper依赖: <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper --> <dependency> <groupId>com.github.pagehe

  • javascript 支持页码格式的分页类

    但是他们插件的附属功能很多又不需要,而且没必要就为了这么一个功能区引用这个库,为速度考虑吧,当然你服务器好也行,但是其实这个效果不是必须的,但是觉的会常用,所以就包装成类了,供以后使用,也供有需要的人学习使用. 下面只是一个简单的demo,用的话自己可以在编辑页码样式,有默认的格式.不废话了,自己看吧,有注释使用说明...类(3kb)使用可以参照demo,不明白使用的可以留言. 以后会慢慢写一些项目开发中常遇到的问题,以及解决方案,和大家学习分享. jpage.js 复制代码 代码如下: /*

  • PHP+jquery+ajax实现分页

    本文实例为大家分享了jquery ajax实现分页的具体代码,供大家参考,具体内容如下 HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> CSS #list{width:680px; height:530px; margin:2px auto; position:relative} #list ul li{float

  • PHP ajax 分页类代码

    <?php //本分页类不处理SQL; //大大的加快了分页功能 //http://blog.csdn.net/fkedwgwy //潇湘博客--潇湘 /** 演示 require_once('../libs/classes/page.class.php'); $page=new page(array('total'=>1000,'perpage'=>20)); echo 'mode:1<br>'.$page->show(); echo '<hr>mode:

随机推荐