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>
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;}
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;    line-height: 25px;    padding: 0 10px;border: 1px solid #ddd;    margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca;    border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{    display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;    color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
</style>
</head>
<body>
<br><br><br>

<div class="tcdPageCode"></div>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.page.js"></script>
<script>
    $(".tcdPageCode").createPage({
        pageCount:15,
        current:2,
        backFn:function(p){
            //console.log(p);
            $("#tcdPageCode").html+="总条数:"+total;
        },

    });
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
</div>
</body>
</html>

jquery.page.js中的内容

(function($){
    var ms = {
        init:function(obj,args){
            return (function(){
                ms.fillHtml(obj,args);
                ms.bindEvent(obj,args);
            })();
        },
        //填充html
        fillHtml:function(obj,args){
            return (function(){
                obj.empty();
                //上一页
                if(args.current > 1){
                    obj.append(‘<a href="javascript:;" class="prevPage">上一页</a>‘);
                }else{
                    obj.remove(‘.prevPage‘);
                    obj.append(‘<span class="disabled">上一页</span>‘);
                }
                //中间页码
                if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
                    obj.append(‘<a href="javascript:;" class="tcdNumber">‘+1+‘</a>‘);
                }
                if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
                    obj.append(‘<span>...</span>‘);
                }
                var start = args.current -2,end = args.current+2;
                if((start > 1 && args.current < 4)||args.current == 1){
                    end++;
                }
                if(args.current > args.pageCount-4 && args.current >= args.pageCount){
                    start--;
                }
                for (;start <= end; start++) {
                    if(start <= args.pageCount && start >= 1){
                        if(start != args.current){
                            obj.append(‘<a href="javascript:;" class="tcdNumber">‘+ start +‘</a>‘);
                        }else{
                            obj.append(‘<span class="current">‘+ start +‘</span>‘);
                        }
                    }
                }
                if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
                    obj.append(‘<span>...</span>‘);
                }
                if(args.current != args.pageCount && args.current < args.pageCount -2  && args.pageCount != 4){
                    obj.append(‘<a href="javascript:;" class="tcdNumber">‘+args.pageCount+‘</a>‘);
                }
                //下一页
                if(args.current < args.pageCount){
                    obj.append(‘<a href="javascript:;" class="nextPage">下一页</a>‘);
                }else{
                    obj.remove(‘.nextPage‘);
                    obj.append(‘<span class="disabled">下一页</span>‘);
                }
            })();
        },
        //绑定事件
        bindEvent:function(obj,args){
            return (function(){
                obj.on("click","a.tcdNumber",function(){
                    var current = parseInt($(this).text());
                    ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current);
                    }
                });
                //上一页
                obj.on("click","a.prevPage",function(){
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current-1);
                    }
                });
                //下一页
                obj.on("click","a.nextPage",function(){
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current+1);
                    }

                });
            })();
        }
    }
    $.fn.createPage = function(options){
        var args = $.extend({
            pageCount : 15,
            current : 3,
            backFn : function(){}
        },options);
        ms.init(this,args);
    }
})(jQuery);

项目中

    function AD(s){
        var postData = {TypeId:@ViewBag.keyValue,page:s };
        postData = JSON.stringify(postData);
        var data={queryJson:postData};

        $.SetForm({
            url: "../../publicinfomanage/notice/getpagelistjson",
            param: data,
            success: function (result) {
                $("#NLS").html("");
                var htmls = "";
                for (var i = 0; i < result.rows.length; i++) {
                    if (result.rows[i].FullHeadColor != undefined) {
                        htmls += "<li><a href=‘#‘ onclick=\"addTabs(‘‘,‘/publicinfomanage/notice/detail?keyvalue="+result.rows[i].NewsId+"‘,‘企业文化-"+result.rows[i].FullHead+"‘)‘><font color=‘"+result.rows[i].FullHeadColor+"‘>" + result.rows[i].FullHead + "</font></a><span style=‘float:right;‘>" + result.rows[i].CreateDate.substring(0,10)  + "</span></li>";
                    }else{
                        htmls += "<li><a href=‘#‘ onclick=\"addTabs(‘‘,‘/publicinfomanage/notice/detail?keyvalue="+result.rows[i].NewsId+"‘,‘企业文化-"+result.rows[i].FullHead+"‘)\">" + result.rows[i].FullHead + "</a><span style=‘float:right;‘>" + result.rows[i].CreateDate.substring(0,10)  + "</span></li>";
                    }
                }
                $("#NLS").html(htmls);

            }
        })
    }

    function pageCont(pc){
        $(".tcdPageCode").createPage({
            pageCount:pc,
            current:1,
            backFn:function(p){
                AD(p);  //p返回是当前第几页
            }
        });
    }
时间: 2024-10-11 12:21:09

jQueryPager20160918 分页控件的相关文章

asp.net分页控件CSS

.aspx代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample3_DataPager.aspx.cs" Inherits="Sample_03_DataPager" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

WPF 实现 DataGrid/ListView 分页控件

在WPF中,通常会选用DataGrid/ListView进行数据展示,如果数据量不多,可以直接一个页面显示出来.如果数据量很大,2000条数据,一次性显示在一个页面中,不仅消耗资源,而且用户体验也很糟糕.这篇博客将介绍如何创建一个分页控件. 为了简单起见,这个分页控件目前只有 首页/上一页/下一页/末页/总页数/第几页 等功能.实现思路,首页/上一页/下一页/末页 这四个通过路由事件来实现,在使用时可以使用命令进行绑定,或者直接使用均可.总页数和第几页通过依赖属性来实现,使用时将页数进行绑定显示

分页控件AspNetPager的样式美化

自从吴旗娃推出了AspNetPager分页控件之后,受到了广大程序员朋友的喜爱,无数个网站都出现这个控件的身影.可是大部分网站程序员的朋友都是直接套用,导致满世界的分页控件样式都是一样的简洁,伤不起啊 在前段时间的开发网站的过程中,突然觉得这个简洁的样式看着和网站整体的风格实在不搭调,于是看看AspNetPager的最后生成html,写了一段CSS样式,将分页的样式和网站整体风格统一起来了. 效果如下: 做的不是很好看,希望大家不要丢砖头,俺的头没包棉絮,伤不起 ~-_-~ CSS样式表: /*

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

本篇文章主要对asp.net创建事务的方法进行实例介绍,具有很好的参考价值,需要的朋友一起来看下吧 一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer"

在DevExpress程序中使用Winform分页控件直接录入数据并保存

一般情况下,我们都倾向于使用一个组织比较好的独立界面来录入或者展示相关的数据,这样处理比较规范,也方便显示比较复杂的数据.不过在一些情况下,我们也可能需要直接在GridView表格上直接录入或者修改数据,这种对于字段比较少,而且内容相对比较简单的情况下,效率是比较高的一种输入方式.本篇随笔主要介绍在DevExpress程序中使用GridView直接录入数据并保存的实现,以及使用Winform分页控件来进行数据直接录入的实现操作. 1.在GridView上展示数据 在GridView上展示数据,只

PagedDataSource数据绑定控件和AspNetPager分页控件结合使用列表分页

1.引用AspNetPager.dll. 2.放置Repeater数据绑定控件. <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> //绑定显示的列表代码 </ItemTemplate> </asp:Repeater> 3.在页面添加AspNetPager分页控件,会出现以下代码. <%@ Register Assembly="Asp

WinForm下编写分页控件,实现DataGridView的分页效果

 前几天做C/S项目的时候用到了分页查询,所以就想去网上找一些封装好的分页控件,类似BS项目中的那种.但是找了好几个都不是特别的好,没有自己想要的.而且WinForm 里面的DataGridView也不像WebForm里面的GridView那样有自带的分页功能.没办法还是自己动手封装一个吧,以后复用也方便. 从网上找了几个demo做了一下,实现挺简单的. 用到的方法就是编写一个用户控件,下面说明如何实现: 一,先画界面 新建一个用户控件,然后拖拽几个标签,文本框和按钮,排列好.如下图所示:

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

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

iOS中的分页控件(UIPageControl)

#import "RootViewController.h" @interface RootViewController () @end @implementation RootViewController - (void)viewDidLoad { [super viewDidLoad]; /** * UIPageControl 分页控件,提供以下几个功能: 1.展示当前总页数 2.展示当前是第几页 3.切换pageControl的当前显示的点对应显示不同的界面 */ //1.创建控