jquery 分页控件功能

 //分页
<script>
        function getPageNum(num) {
            $("#PageNum ul").empty();
            var AllCount = num;
            var total = Math.ceil(AllCount / 5); //数据可分的页数
            $("#txtAll").val(total);
            for (var i = 1; i < total + 1; i++) {
                var html = "<li><a>" + i + "</a></li>";
                $("#PageNum ul").append(html);
            }
            var totalCount = Math.ceil(total / 8);//每八页份为一页
            var current = 1;
            $("#PageNum ul li:gt(7)").hide();
            $("#btnPrev").attr("disabled", "disabled").click(function () {

                $("#btnNext").removeAttr("disabled");
                current -= 1;
                $("#PageNum ul li").hide();
                var indexStart = (current - 1) * 7;
                var indexEnd = indexStart + 7;
                $(" #PageNum ul li").hide().slice(indexStart, indexEnd).show();
                if (current == 1) $(this).attr("disabled", "disabled");
            });

            $("#btnNext").click(function () {
                $("#btnPrev").removeAttr("disabled");
                current += 1;
                $("#PageNum ul li").hide();
                //$("#PageNum ul li").show();
                var indexStart = (current - 1) * 7;
                var indexEnd = current * 7 - 1 > $("#PageNum ul li").length - 1 ? $("#PageNum ul li").length - 1 : current * 7 - 1;
                $(" #PageNum ul li").hide().slice(indexStart, indexEnd+1).show();
               // $("#PageNum ul li:lt(" + indexStart + "), li:gt(" + indexEnd + ")", $("#PageNum ul")).hide();
                if (current == total) $(this).attr("disabled", "disabled");
            });

            $("#PageNum ul li").click(function () { //点击数字
                var index = $(this).index();
                getPageCurrent(index);
            })
            $("#btnConfirm").click(function () {
                var index = $("#txtIndex").val();
                getPageCurrent(index - 1);
            })
        }
        function getPageCurrent(index) {//index为要查询的页面的索引值
            var indexStart = index * 5;
            var indexEnd = indexStart + 5;
            $(" #thumbWrap_controlID ul li").hide().slice(indexStart, indexEnd).show();
        }</script>

html代码:
 <div class="products_contents" id="product">
                <div class="thumbWrap">
                    <h2 style="font-size: 30px; color: #f8b551; text-align: center; line-height: 56px;">
                    </h2>
                    <div class="thumbWrap_control" id="thumbWrap_controlID">
                        <ul>
                        </ul>
                    </div>
                    <div id="PageNum">
                    <input type="button" id="btnPrev" value="上一页" /><input type="button" id="btnNext" value="下一页" />
                    共<input type="text" id="txtAll"/>页
                        <ul>
                        </ul>
                        到<input type="text" id="txtIndex"/>页<input type="button" id="btnConfirm" value="确定" />
                    </div>
                </div>
            </div>
时间: 2024-08-02 09:24:54

jquery 分页控件功能的相关文章

Angularjs中使用jquery分页控件

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

sql分页存储过程配合jquery 分页控件

ALTER PROCEDURE [dbo].[getData] -- Add the parameters for the stored procedure here@tb varchar(150),@status nchar(2),@indexpage int,@endpage intASdeclare @str varchar(200)if @status is nullBEGIN set @str='SELECT * FROM (SELECT ROW_NUMBER() OVER (orde

日积月累系列之分页控件(js源码)

最近开发了一款分页控件,分享给大家. 主要功能和界面介绍 cform分页控件支持服务端分页.客户端分页.数据过滤.数据排序等功能. 源码介绍 cform-pager分页控件主要由三部分组成:css.scripts以及index.html,css主要是用于控制分页和列表的样式:scripts主要是负责分页数据抓取.分页控件.本地缓存.数据过滤.数据排序等功能:index.html则涉及了分页数据模板.分页容器以及相应的过滤.排序按钮. scripts介绍 scripts目录下面包含了cform-m

jQueryPager20160918 分页控件

分享一下自己在项目中引用的Jquery分页控件 index.html内容 <!DOCTYPE html> <html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>简单的jQuery分页插件下载</title> <style> *{

paginationjs一款功能强大的分页控件

在项目中,很多时候需要分页控件,分页控件自己写也比较简单,但是要写一个功能丰富的分页控件话,就麻烦了,这里推荐一款不错的空间,页数太多的话,显示总页数,搜索指定页码. github地址:https://github.com/superRaytin/paginationjs 简单demo代码: <!DOCTYPE html> <html> <head> <title>Paginationjs example</title> <meta htt

福利到~分享一个基于jquery的分页控件

前台分页控件有很多,以下是我的实现.默认情况下,点击页码会像博客园一样,在url后面加上"#p页码". 有2个参数需要注意: beforeRender: 在每个页码项呈现前会被调用,参数为页码的jQuery对象.这个时候我们可以在呈现前做一些处理,例如增加自己的属性等.默认情况下,点击页码,会在url后面加上“#p页码”,这样的url并不会刷新页面.如果我们需要刷新页面,例如url为,"default.aspx?index=页码",就可以在这个回调函数里处理. ca

如何Windows分页控件中增加统计功能

在我的博客里面,很多Winform程序里面都用到了分页处理,这样可以不管是在直接访问数据库的场景还是使用网络方式访问WCF服务获取数据,都能获得较好的效率,因此WInform程序里面的分页控件的使用是很好的一个解决方式,它能够快速获取数据,并将可能减少我们增加太多的代码逻辑,实现简单.高效.统一的理念.本篇主要介绍如何在分页的GridControl里面如何实现数据的统计功能. 一般情况下,分页控件呈现分为两种方式,一种需要有分页码的真正分页处理,一种是不需要分页处理,但是列表和功能基本保持一致的

自己做过分页功能吗?我们一起打造自己的分页控件

一.概述 这些日子在做一套系统,基本上告了一段落,其中包括分页相关的功能. 主要涉及:Url分页和Ajax 分页.而基本上开发中所用到的就这两种,当然有其他的方式,我们就不说了. 为什么会谈及这两种分页呢,原因如下 ajax 分页用户体验好,性能更好. Url 分页对于搜索引擎友好. 而做的这套系统两方面都需要,故此重新设计了分页方案.自认目前十分灵活便捷的分页控件. 二.效果预览 三.ajax分页的使用方式 说明:在配置分页参数的时候,smallPageUrl 表示加载每页内容的地址. 后台代

基于avalon+jquery做的bootstrap分页控件

刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代码贴上: 1 /** 2 * options.id avalon 所需要的$id 3 * options.total 总记录数 4 * options.rows 行数 5 * options.callback 6 */ 7 var Pager=function(options){ 8 var _th