JS分页控件 可用于无刷新分页

JS分页控件,可用于无刷新分页

代码如下:

function PagerBar(recordcount, pagesize, pageindex, showpagecount) {
    var NumberRegex = new RegExp(/^\d+$/);
    this.PageIndex = 1; //页索引,当前页
    if (pageindex != null && NumberRegex.test(pageindex)) this.PageIndex = parseInt(pageindex);
    this.PageSize = 10; //页面大小
    if (pagesize != null && NumberRegex.test(pagesize)) this.PageSize = parseInt(pagesize);
    this.RecordCount = 0;
    if (recordcount != null && NumberRegex.test(recordcount)) this.RecordCount = parseInt(recordcount); //记录总数
    this.PageCount = 0;  //页总数
    var PagerBar = this;
    function CalculatePageCount(_pagesize, _recordcount) {//计算总页数
        if (_pagesize != null && NumberRegex.test(_pagesize)) PagerBar.PageSize = parseInt(_pagesize);
        if (_recordcount != null && NumberRegex.test(_recordcount)) PagerBar.RecordCount = parseInt(_recordcount);
        else PagerBar.RecordCount = 0;
        if (PagerBar.RecordCount % PagerBar.PageSize == 0) {//计算总也页数
            PagerBar.PageCount = parseInt(PagerBar.RecordCount / PagerBar.PageSize);
        }
        else {
            PagerBar.PageCount = parseInt(PagerBar.RecordCount / PagerBar.PageSize) + 1;
        }
    }
    if (this.RecordCount != 0) {//如果传入了记录总数则计算总页数
        CalculatePageCount(this.PageSize, this.RecordCount);
    }
    this.ReplaceString = "《#PageLink》"; //替换页数的文本,注:不可以有正则表达式中的符号
    this.ShowPagesCount = 5; //显示页数量
    if (showpagecount != null && NumberRegex.test(showpagecount.toString())) this.ShowPagesCount = parseInt(showpagecount);
    this.PreviouBarFormat = ""; //上一页显示文本格式
    this.IsShowPreviouString = true; //是否显示上一页
    this.NextBarFormat = ""; //下一页显示文本格式
    this.IsShowNextString = true; //是否显示下一页
    this.PageBarFormat = ""; //页面连接显示文本格式
    this.CurrentBarFormat = ""; //当前页显示文本格式
    this.IsShowPageString = true; //是否显示页索引
    this.FristBarFormat = ""; //首页链接显示文本格式
    this.IsShowFristString = true; //是否显示首页
    this.LastBarFormat = ""; //尾页显示文本格式
    this.IsShowLastString = true; //是否显示尾页
    this.CurrentRecordBarFormat = "当前记录{0}-{1}"; //当前记录显示文本格式
    this.IsShowCurrentRecordString = true; //是否显示当前记录
    this.CurrentPageBarFormat = "当前第" + this.ReplaceString + "页,共" + (this.PageCount == 0 ? 1 : this.PageCount) + "页"; //当前页文字说明文本格式
    this.IsShowCurrentPageString = true; //是否显示当前页文字说明文本
    this.OtherBarFormat = ""; //其他也显示文本
    this.IsShowOtherString = true; //是否显示其它页文本
    var regexp = new RegExp(this.ReplaceString, "g"); //替换页数文本正则表达式
    function GetFristPageString() {//获取首页文本
        if (PagerBar.FristBarFormat != "" && PagerBar.PageIndex != 1) {
            return PagerBar.FristBarFormat.replace(regexp, 1);
        }
        else {
            return "";
        }
    }
    function GetPreviouPageString() { //获取上一页文本
        if (PagerBar.PreviouBarFormat != "") {
            if (PagerBar.RecordCount > PagerBar.PageSize && PagerBar.PageIndex != 1) {//上一页HTML输出
                return PagerBar.PreviouBarFormat.replace(regexp, PagerBar.PageIndex - 1);
            }
            else {
                return "";
            }
        }
        else {
            return "";
        }
    }
    function GetPageString() {//获取中间页数链接
        var pagestr = "";
        if (PagerBar.CurrentBarFormat != "" && PagerBar.PageBarFormat != "") {
            var ShowPageFirest = PagerBar.PageIndex - parseInt(PagerBar.ShowPagesCount / 2 + 1) < 0 ? 0 : PagerBar.PageIndex - parseInt(PagerBar.ShowPagesCount / 2 + 1); //计算显示页数的其实页数
            if (PagerBar.PageCount < PagerBar.ShowPagesCount) {//当也总数小于显示页数量
                ShowPageFirest = 0;
            }
            else {
                if (PagerBar.PageIndex > (PagerBar.PageCount - parseInt(PagerBar.ShowPagesCount / 2 + 1))) {//当页总数在后几页显示
                    ShowPageFirest = PagerBar.PageCount - PagerBar.ShowPagesCount;
                }
            }
            for (var i = ShowPageFirest; i < ShowPageFirest + PagerBar.ShowPagesCount; i++) {//循环出书页数文本
                if (PagerBar.PageIndex == i + 1) {
                    pagestr += PagerBar.CurrentBarFormat.replace(regexp, i + 1);
                }
                else {
                    pagestr += PagerBar.PageBarFormat.replace(regexp, i + 1);
                }
                if (i >= PagerBar.PageCount - 1) {//当到达页总数的时候挑出循环
                    break;
                }
            }
        }
        return pagestr;
    }
    function GetNextPageString() {//获取下一页链接
        if (PagerBar.NextBarFormat != "") {
            if (PagerBar.RecordCount > PagerBar.PageSize && PagerBar.PageIndex != PagerBar.PageCount) {//输出下一页HTMl
                return PagerBar.NextBarFormat.replace(regexp, PagerBar.PageIndex + 1);
            }
            else {
                return "";
            }
        }
        else {
            return "";
        }
    }
    function GetLastPageString() {//获取尾页链接
        if (PagerBar.LastBarFormat != "" && PagerBar.PageIndex != PagerBar.PageCount && PagerBar.RecordCount != 0) {
            return PagerBar.LastBarFormat.replace(regexp, PagerBar.PageCount);
        }
        else {
            return "";
        }
    }

function GetFrontOtherPageString() {//获取前其它页链接
        if (PagerBar.OtherBarFormat != "") {
            if (PagerBar.PageIndex > PagerBar.ShowPagesCount / 2 + 1) {
                return PagerBar.OtherBarFormat.replace(regexp, PagerBar.PageIndex - PagerBar.ShowPagesCount <= 0 ? 1 : PagerBar.PageIndex - PagerBar.ShowPagesCount)
            }
            else {
                return "";
            }
        }
        else {
            return "";
        }
    }
    function GetAfterOtherPageString() {//获取后其它页链接
        if (PagerBar.OtherBarFormat != "") {
            if (PagerBar.PageIndex <= PagerBar.PageCount - PagerBar.ShowPagesCount / 2) {
                return PagerBar.OtherBarFormat.replace(regexp,
                PagerBar.PageIndex + PagerBar.ShowPagesCount >= PagerBar.PageCount ? PagerBar.PageCount : PagerBar.PageIndex + PagerBar.ShowPagesCount);
            }
            else {
                return "";
            }
        }
        else {
            return "";
        }
    }
    function GetCurrentRecordPageString() {//获取当前记录文本
        if (PagerBar.CurrentRecordBarFormat != "") {
            if (PagerBar.RecordCount == 0) {
                return "";
            }
            else {
                return PagerBar.CurrentRecordBarFormat.replace("{0}", (PagerBar.PageIndex - 1) * PagerBar.PageSize + 1).replace("{1}", PagerBar.PageIndex * PagerBar.PageSize > PagerBar.RecordCount ? PagerBar.RecordCount : PagerBar.PageIndex * PagerBar.PageSize);
            }
        }
        else return "";
    }
    function GetCurrentPageBarString() {//获取当前页记录文本
        if (PagerBar.CurrentPageBarFormat != "") {
            return PagerBar.CurrentPageBarFormat.replace(regexp, PagerBar.PageIndex);
        }
        else return "";
    }
    this.GetString = function (pageindex) {//输出HTML代码(全部模式)
        if (pageindex != null && NumberRegex.test(pageindex)) {//如果传入了页索引则赋值
            this.PageIndex = parseInt(pageindex);
        }
        if (this.PageCount == 0) {//如果没有计算过页总数,则计算页总数
            CalculatePageCount(this.PageSize, this.RecordCount);
        }
        var pagestr = "";
        if (this.IsShowCurrentPageString) {
            pagestr = GetCurrentPageBarString();
        }
        if (this.IsShowCurrentRecordString) {
            pagestr += GetCurrentRecordPageString();
        }
        if (this.IsShowFristString) {
            pagestr += GetFristPageString();
        }
        if (this.IsShowPreviouString) {
            pagestr += GetPreviouPageString();
        }
        if (this.IsShowOtherString) {
            pagestr += GetFrontOtherPageString();
        }
        if (this.IsShowPageString) {
            pagestr += GetPageString();
        }
        if (this.IsShowOtherString) {
            pagestr += GetAfterOtherPageString();
        }
        if (this.IsShowNextString) {
            pagestr += GetNextPageString();
        }
        if (this.IsShowLastString) {
            pagestr += GetLastPageString();
        }
        return pagestr;
    }
    this.GetNormalString = function (pageindex) {
        if (pageindex != null && NumberRegex.test(pageindex)) {//如果传入了页索引则赋值
            this.PageIndex = parseInt(pageindex);
        }
        if (this.PageCount == 0) {//如果没有计算过页总数,则计算页总数
            CalculatePageCount(this.PageSize, this.RecordCount);
        }
        var pagestr = "";
        pagestr += GetFristPageString();
        pagestr += GetPreviouPageString();
        pagestr += GetPageString();
        pagestr += GetNextPageString();
        pagestr += GetLastPageString();
        return pagestr;
    }
    this.GetSimpleString = function (pageindex) {
        if (pageindex != null && NumberRegex.test(pageindex)) {//如果传入了页索引则赋值
            this.PageIndex = parseInt(pageindex);
        }
        if (this.PageCount == 0) {//如果没有计算过页总数,则计算页总数
            CalculatePageCount(this.PageSize, this.RecordCount);
        }
        var pagestr = "";
        pagestr += GetPreviouPageString();
        pagestr += GetCurrentPageBarString();
        pagestr += GetNextPageString();
        return pagestr;
    }
}

使用示例:

暂无

内容中需要的知识点
分页符《#PageLink》

(0)

相关推荐

  • JavaScript实现前端分页控件

    现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查询参数构造好发向后台,后台处理后以特定的格式返回,多为json,比较流行处理起来也很方便.当后台数据到达后,浏览器重新渲染界面当然也包括js分页控件,如果觉得每次绘制分页控件对前端性能有影响也可以不绘制,但实现起来相对麻烦. 本人写的分页控件参考了其他网友的代码,链接忘了,控件接受四个参数或一个对象

  • 基于JS分页控件实现简单美观仿淘宝分页按钮效果

    最新版本代码请移步到https://github.com/pgkk/kkpager 在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html 分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS代码: Js代码 var kkpager = {

  • ANGULARJS中使用JQUERY分页控件

    首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨. 分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用.接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法. 首先在web项目中引用jquery1.10.Angularjs库文件以及jq-pagination控件. 我降指令名称为custompagination,为指令添加Html样式. 然后给指令添加对应的控

  • Vue.js结合bootstrap实现分页控件

    本文为大家分享了使用vue.js结合bootstrap 开发的分页控件,供大家参考,具体内容如下 效果如下 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit

  • angularjs实现的前端分页控件示例

    前言:之前写个一个jQuery的分页显示插件,存在许多的bug,现在由于业务需要,学习的一点AngularJS,重新用angularjs实现了这个分页插件 实现效果图: (效果图是加上了bootstrap的css文件) 用法: angular-pagination.js代码: /** * angularjs分页控件 * Created by CHEN on 2016/11/1. */ angular.module('myModule', []).directive('myPagination',

  • JS分页控件 可用于无刷新分页

    JS分页控件,可用于无刷新分页 复制代码 代码如下: function PagerBar(recordcount, pagesize, pageindex, showpagecount) {     var NumberRegex = new RegExp(/^\d+$/);     this.PageIndex = 1; //页索引,当前页     if (pageindex != null && NumberRegex.test(pageindex)) this.PageIndex =

  • vs.net控件updatePanel实现无刷新的方法

    页面部分 复制代码 代码如下: <asp:ScriptManager ID="ScriptManager1" runat="server">    </asp:ScriptManager>    <h2>        使用VS控件updatePanel实现无刷新    </h2>    <p>         <asp:UpdatePanel ID="UpdatePanel1"

  • jQuery实现ajax无刷新分页页码控件

    这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用. 下面是

  • ASP.NET无刷新分页简单实现

    下面就是和大家分享的实现无刷新分页功能的全部步骤,欢迎学习. 1.新建一个分页存储过程: CREATE procedure [dbo].[P_Pager] (@PageNumber int, @PageSize int) as declare @sql nvarchar(4000) set @sql = 'select top ' + Convert(varchar, @PageSize) + ' * from T_Test where [type]=1 and id not in (selec

  • asp.net分页控件使用详解【附实例下载】

    一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %> 2.写一个Repeater列表控件用于显示数据 <asp:Repeater ID

  • 解析asp.net的分页控件

    一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %> 2.写一个Repeater列表控件用于显示数据 <asp:Repeater ID

  • asp.net jquery无刷新分页插件(jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

  • Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)

    Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) 先给大家展示下效果图: [功能] 下拉刷新和上拉分页逻辑 /下拉刷新 /上拉更多 /滚动栏 /工具栏半拉显隐 Author: surfsky.cnblogs.com Lisence: MIT 请保留此文档声明 History: init. surfsky.cnblogs.com, 2015-01 add initPosition pro

  • jquery分页插件jquery.pagination.js实现无刷新分页

    本文实例为大家分享了jquery分页插件实现无刷新分页的相关代码,供大家参考,具体内容如下 1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值

随机推荐