JS 自写datapage.js 通用分页

最新推荐文章于 2024-05-18 10:03:59 发布
最新推荐文章于 2024-05-18 10:03:59 发布
阅读量341 收藏
点赞数
文章标签： json
原文链接：http://www.cnblogs.com/dullbaby/p/9181362.html
版权
JS 自写datapage.js 通用分页
var Page = function () { };
Page.prototype = {
    Loading: "<img src='/Content/Scripts/Datapager/loading.gif /><span>正在加载数据，请稍等...</span>",
    NoResult: "暂无相关数据！",
    Count: 10,
    Current: 1,
    Total: 0,
    Url: "",
    Dom: null,
    Container: null,
    Data: {},
    EXP: null,//扩展参数
    type: 0,
    CallBack: null,
    GetPageData: function () {
        $this = this;
        //if ($this.Dom) {
        //   $this.Data = new JSONSerializer().Serialize($this.Dom);
        //}
        
        this.Data.PageSize = this.Count;
        this.Data.PageNum = this.Current;
        this.Data.type = this.type;
        this.Data.EXP = this.EXP;
        this.Data._ = Math.random();
        $("#filter").hide();
        $("#dataArea").hide();
        $("#caption").html($this.Loading);
        $.ajax({
            url: $this.Url,
            async: false,
            cache: false,
            dataType: "json",
            data: $this.Data,
            success: function (result) {
                if (result.ReturnType) {
                    if (result.ReturnCount > 0) {
                        $("#pagers").show();
                        if ($this.CallBack) {
                            if ($this.Container) {
                                $this.Container.empty();
                            }
                            $this.CallBack(result.ReturnData);
                            // $this.Total = result.ReturnData[0].TotalItems;//原来写法
                            $this.Total = result.ReturnCount;//当前写法
                        }
                    }
                    else {
                        if ($this.Container) {
                            $this.Container.empty();
                        }
                        $("#mtitle").html("信息提示");
                        $("#msg").html(result.ReturnMsg);
                        $("#msg_btn").html("<a class=\"btn btn-warning\" style='border-radius:6px;'  data-dismiss=\"modal\">OK</a>");
                        $('#alertModel').modal('show');
                        $("#pagers").hide();
                    }
                }
                else {
                    if ($this.Container) {
                        $this.Container.empty();
                    }
                    $("#mtitle").html("信息提示");
                    $("#msg").html(result.ReturnMsg);
                    $("#msg_btn").html("<a class=\"btn btn-warning\" style='border-radius:6px;'  data-dismiss=\"modal\">OK</a>");
                    $('#alertModel').modal('show');
                    $("#pagers").hide();
                }
            },
            complete: function () {
                $this.Paged();
            }
        });
    },
    Paged: function () {
        var max = Math.ceil(this.Total / this.Count);
        $this = this;
        $("#btnSearch").unbind("click").click(function () {
            $this.Current = 1;
            $this.GetPageData();
        });
        $("#firstPage").unbind("click").click(function () {
            $this.Current = 1;
            $this.GetPageData();
        });
        $("#prePage").unbind("click").click(function () {
            if ($this.Current > 1) {
                $this.Current--;
                $this.GetPageData();
            }
        });
        $("#nextPage").unbind("click").click(function () {
            if ($this.Current < max) {
                $this.Current++;
                $this.GetPageData();
            }
        });
        $("#lastPage").unbind("click").click(function () {
            if ($this.Current < max) {
                $this.Current = max;
                $this.GetPageData();
            }
        });
        if ($this.Current == 1) {
            $("#firstPage,#prePage").addClass("disabled");
            $("#prePage").unbind("click");
            if ($this.Current == max) {
                $("#lastPage,#nextPage").addClass("disabled");
            }
            else {
                $("#lastPage,#nextPage").removeClass("disabled");
            }
        }
        else if ($this.Current == max) {
            $("#lastPage,#nextPage").addClass("disabled");
            $("#firstPage,#prePage").removeClass("disabled");
        }
        else {
            $("#lastPage,#nextPage,#firstPage,#prePage").removeClass("disabled");
        }
        $("#pages").val("当前第" + $this.Current + "页 共" + max + "页");
        $("#pages").unbind("blur").blur(function () {
            var page = parseInt($("#pages").val());
            if (page > 0 && page < max + 1) {
                $this.Current = page;
                $this.GetPageData();
            }
            else {
                $("#pages").val("当前第" + $this.Current + "页 共" + max + "页");
            }
        });
        $("#pages").unbind("focus").focus(function () {
            var page = $("#pages").val("");
        });
    },
    Pchange: function () {
        $this.Count = parseInt($("#selelct_PageCount").val());
        $this.Current = 1;
        $this.GetPageData();
    }
}
//初始化分页
$(function () {
    $("#selelct_PageCount").change(function () {
        var page = new Page();
        page.Pchange();
    });
});

 

 分页样式HTML

 

  <!--start 分页-->

                        <div class="content-body" style="border: none; " id="pagers">
                            <div class="gigantic pagination" style="margin-top: 10px; float:left; width: 322px;">
                                <a class="first" data-action="first" id="firstPage"><i class="fa fa-angle-double-left" style="font-size: 25px;"></i></a>
                                <a class="previous" data-action="previous" id="prePage"><i class="fa fa-angle-left" style="font-size: 25px"></i></a>
                                <input type="text" id="pages" />
                                <a class="next" data-action="next" id="nextPage"><i class="fa fa-angle-right" style="font-size: 25px"></i></a>
                                <a class="last" data-action="last" id="lastPage"><i class="fa fa-angle-double-right" style="font-size: 25px"></i></a>
                            </div>
                            <div>
                                <select id="selelct_PageCount" style="margin-left: 330px; margin-top: 10px; height: 37px; width: 55px;" class="maoxian">
                                    <i class="fa-caret-down"></i>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="5">5</option>
                                    <option selected="selected" value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="30">30</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                    <option value="200">200</option>
                                    <option value="500">500</option>
                                </select>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <!--end 分页-->

 

 css文件

.pagination {
    position:absolute;
  display: inline-block;
  border:1px solid #cecece;
  width:320px;
  height:37px;
  border-radius: 3px; }
.pagination a {
  background-color:#1fb5ac;
  display: block;
  float: left;
  width: 30px;
  height: 30px;
  outline: none;
  color: #1fb5ac;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  font-family: Times, 'Times New Roman', Georgia, Palatino;
  /* ATTN: need a better font stack */
  background-color: #1fb5ac;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));
  background-image: -webkit-linear-gradient(#fff, #fff);
  background-image: linear-gradient(#fff, #fff); }
  .pagination a:hover, .pagination a:focus, .pagination a:active {
    background-color: #fff;
    color: #000;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #cecece));
    background-image: -webkit-linear-gradient(#e4e4e4, #e4e4e4);
    background-image: linear-gradient(#e4e4e4, #e4e4e4); 
    background-image: -webkit-linear-gradient(#fff, #fff);
    background-image: linear-gradient(#fff, #fff);
    cursor:pointer;
  }
  .pagination a.disabled, .pagination a.disabled:hover, .pagination a.disabled:focus, .pagination a.disabled:active {
    background-color: #fff;
   
    background-image: -webkit-linear-gradient(#fff, #fff);
    background-image: linear-gradient(#fff, #fff);
    color: #cecece;
    cursor: default; 
    background-color: #f3f3f3;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));
    background-image: -webkit-linear-gradient(#fff, #fff);
    background-image: linear-gradient(#fff, #fff);
    color: #a8a8a8;
    cursor:not-allowed;
  }
.pagination a:first-child {
  border: none;
  border-radius: 2px 0 0 2px; }
.pagination a:last-child {
  border: none;
  border-radius: 0 2px 2px 0; }
.pagination input {
  float: left;
  margin: 0;
  padding: 0;
  width: 125px;
  height: 20px;
  outline: none;
  border: none;
  vertical-align: middle;
  text-align: center; }
/* gigantic class for demo purposes */
.gigantic.pagination {
  margin: 30px 0; }
.gigantic.pagination a {
    z-index:1000;
  height: 35px;
  width: 35px;
  font-size: 31px;
  line-height: 31px; }
.gigantic.pagination input {
  width: 178px;
  height: 35px;
  font-size: 14px;
  line-height: 30px;
  border-left:1px solid #cecece;
  border-right:1px solid #cecece;
}
/* log element for demo purposes */
.log {
  display: none;
  background-color: #EDEDED;
  
  height: 300px;
  width: 524px;
  overflow: auto;
  margin-left: 0;
  list-style: none;
  padding: 10px; }
  .log li {
    margin-top: 0;
    margin-bottom: 5px; }
select.maoxian {
    border:1px solid #cecece;
    -webkit-appearance: none;
    -moz-appearance: none;
    -appearance: none;
    background               : url(/images/basic/down.png) 85% / 15% no-repeat #fdfdfd;
    border-radius: 3px;
    cursor:pointer;
    font-size:0.7em;
}
select.maoxian:hover {
    border:1px solid #cecece;
    -webkit-appearance: none;
    -moz-appearance: none;
    -appearance: none;
    background               : url(/images/basic/down-hover.png) 85% / 15% no-repeat #fdfdfd;
    border-radius: 3px;
    cursor:pointer;
    font-size:0.7em;
}
 
select.hetong {
    border:1px solid #cecece;
    -webkit-appearance: none;
    -moz-appearance: none;
    -appearance: none;
    background               : url(/images/basic/down.png) 93% / 7% no-repeat #fdfdfd;
    border-radius: 3px;
    cursor:pointer;
    font-size:0.7em;
}
select.hetong:hover {
    border:1px solid #cecece;
    -webkit-appearance: none;
    -moz-appearance: none;
    -appearance: none;
    background               : url(/images/basic/down-hover.png) 93% / 7% no-repeat #fdfdfd;
    border-radius: 3px;
    cursor:pointer;
    font-size:0.7em;
}


 

 

 

posted on 2018-06-14 08:55  笨小孩做开发 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/dullbaby/p/9181362.html

aizhejuan4396
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Data Page Layouts for Relational Databases
10-13
Data Page Layouts for Relational Databases Data Page Layouts for Relational Databases
js通用分页方法
http://www.inRMB.com
03-04 142
[code="java"]Java后台： public class PageEntity { private int page;//当前页码 private int total;//一共多少条 private int totalPage;//一共多少页 private int firstResult;//当前首记录 private int lastResult;//...
Paged.js：浏览器中的分页利器
最新发布
gitblog_00077的博客
05-18 310
Paged.js：浏览器中的分页利器 项目地址:https://gitcode.com/pagedjs/pagedjs Paged.js 是一个开源库，它在浏览器中实现页面分栏展示，并能通过Web技术生成打印书籍。这个库是对Paged Media和Generated Content CSS模块的JavaScript复现，提供自定义属性处理程序的接口。 其核心功能的快速预览可在pagedjs.or...
JavaScript分页功能如何实现
xiaojie513的博客
05-11 1083
函数用于显示分页链接。具体实现可以根据具体需求进行调整。函数用于从数据源中获取当前页显示的数据，函数用于显示当前页的数据，
jQuery Mobile中页面page的data-*选项
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-31 2543
全栈工程师开发手册 （作者：栾鹏） jQuery Mobile 所有data-*选项 jQuery Mobile中页面page的data-*选项 带有 data-role=”page” 的容器。 //data-add-back-btn true | false 自动添加后退按钮，仅限头部栏 //data-back-btn-text sometext
jquery.pagination.js 分页扩展首页，尾页及输入框功能
07-17
jquery.pagination.js，扩展首页,尾页，及输入框，及输入框带有回车事件。
Spring Data + Thymeleaf 3 + Bootstrap 4 实现分页器实例代码
08-30
org.springframework.data.domain.Page 是 Spring Data 提供的一个分页器接口，提供了常用的方法，比如： * List getContent(); // 返回分页后的数据的列表 * int getTotalPages(); // 总页数 * long ...
JQuery+Ajax通用分页导航（任意表）
07-15
//第2个的id必须为wzj_page_table，两个隐藏域名称必须为pageNumber和pageCount //第3步：确认引入了JS和CSS,test.jsp页面中的代码，严禁修改元素id。否则运行报错。 //第4步：编写后端程序根据请求中传入的页码抓取...
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
01-19
上一篇文章介绍了vuejs实现的简单分页，如果我有几个页面都需要有分页效果，不可能每个页面都去复制一下这段代码吧，意思是封装一下，变成通用的组件。 首先使用基础 Vue 构造器，创建一个“子类”,Vue.extend( ...
通用分页组件
05-09
} <br/>} <br/>} <br/>如果是WEB页面上的分页可以直接使用 List data=WebPageUtils.acPageData(request,DemoPage.class); 就可以得到数据了，其中request中存放了ActionTypes中定义的各个...
Pagination:Angularjs 分页指令
06-10
用作属性或元素并指定以下引用范围元素的属性-- watch-data // 这是保存搜索结果的范围变量的名称-- search-function // 被调用以获取搜索结果的函数名称-- pagenum-var // 保存页码的作用域变量名-- page-num //...
pagedjs：在浏览器中显示分页内容，并使用网络技术生成印刷书籍
02-03
Paged.js-分页媒体工具 Paged.js是一个开放源代码库，用于在浏览器中显示分页内容并使用Web技术生成印刷书籍。 它包含一组用于CSS转换和分段布局的处理程序，这些处理程序可以填充和 CSS模块，并带有用于创建自定义属性新处理程序的钩子。 当前支持的属性可以上找到。 Pagedmedia.org上提供了有关 Media CSS和Paged.js入门的快速概述。 NPM模块 $ npm install pagedjs import { Previewer } from 'pagedjs' ; let paged = new Previewer ( ) ; let flow =
pdf:关于paged.js的教程
04-04
分页js 关于paged.js的教程
分页脚本及验证分页文本框的输入
iteye_796的博客
05-13 129
&lt;%@ page contentType="text/html;charset=UTF-8"%&gt;&lt;%@ include file="/common/taglibs.jsp"%&gt;&lt;a href="javascript:jumpPage(1)"&gt;首页&lt;/a&gt;&lt;s:if test="%{#request.page.pag
SQLSERVER中DATAPAGE概念
guxueliang的专栏
05-07 1367
在SQL Server中数据库中，所有的数据都是存放在数据文件当中的（日志数据除外）。数据最小的存储单位成为page（oracle为block），大小为8K(oracle可以自定义)，虽然每个page的的容量为8192字节，但是要保留大约132字节的标题信息，所有page数据存放上限为8060字节。 当用户添加一笔数据时，SQL Server会将它存入改数据表对应的page。假如每笔数据长度为80
JS数据分页
yuanbo_520的博客
05-11 326
前端分页方法
Data-Pagination 分页
hrbsfdxzhq01的博客
01-23 1519
&lt;!--设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以 外还提供了jumper和total，size和特殊的布局符号-&gt;，-&gt;后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于 设置每页显示的页码数量。--&gt; &lt;div class="blo...
jQuery分页插件(jquery.page.js)的使用
weixin_33691817的博客
07-26 563
效果描述： 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单，效果很棒   1.前端   首先html的head中引入相关css与js &lt;link rel="stylesheet" href="/css/page.css" /&gt; &lt;script type="text/javascript" src="/js...
分页总结
weixin_50708764的博客
12-13 191
1.变量的设置： 分页中涉及的变量主要有 总页数，每页显示的记录数，当前页数，总记录数—pageSize（每个页面所显示的记录数）、pageCount（一共有多少个页面）、showPage（目前显示第几页）、recordCount（总的记录数），为了方便理解，画了一张图： 总页数=总记录数%每页显示的记录数==0？总记录数/每页显示的记录数:总记录数/每页显示的记录数+1 2.查询语句的设计： sqlServer,mySql中一般采用top分页 select top 每页显示的记录数 from Tab
next.js 分页如何写
07-14
在 Next.js 中实现分页功能可以通过以下步骤进行： 1. 创建一个页面组件（例如 `pages/index.js`），用于显示分页数据。 2. 在页面组件中，使用 Next.js 提供的 `getServerSideProps` 方法来获取初始的分页数据。在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值