推荐一款分页插件

插件展示效果

使用方法

引入插件CSS、js。

<link rel="stylesheet" type="text/css" href="pagination.css" /><script src="jquery.paging.js" type="text/javascript" charset="utf-8"></script>

在项目中添加一个方法

function getDPage(totalPage,currPage){
    $(‘.pagination‘).pagination({
        pageCount:totalPage,
        coping:true,
        current:currPage,
        prevContent:‘上一页‘,
        nextContent:‘下一页‘,
        callback:function(api){
            getData(api.getCurrent());
            $(‘body,html‘).scrollTop(0);
        }
    });
}

最后是分页的使用

该处为传给之前写的方法中的参数:totalPage为后台传给的页码的总数,page为当前选中的页码数。
function getData(page) {$(".pagination").addClass("hidden");//分页先隐藏var data=({})//传递给后台的参数,page为选中的页码,
    $.ajax({
        type: "post",
        url: ‘‘,
        data: {
            "data": JSON.stringify(data)
        },
        dataType: "json",
        success: function(data) {
                $(".pagination").removeClass("hidden");//展示分页
            if(page == 1) {
                $(".pagination").empty();//单页面有多个分页的情况先需要先清除页面分页代码。
                if($(".pagination").html().trim() == "") {
                    getDPage(totalPage, page);//该处为传递给之前定义的方法中的参数:totalPage为后台传递的页码的总数,page为当前选中的页码数。
                }
            }
        },
        beforeSend: function(t) {},
        error: function(t) {
            var a = JSON.stringify(t)
        }
    });
}

为何需要先隐藏分页,原因是项目一般都会要求只有一页是不需要展示分页效果。

获取列表一信息时必须使用getData(page)方法,分页才能正常使用。

样式CSS、js我已整理好:http://pan.baidu.com/s/1bpGT68Z

时间: 2024-10-15 14:23:29

推荐一款分页插件的相关文章

【超酷超实用】CSS3可滑动跳转的分页插件制作教程

原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷,很适合一些个性化的个人网站使用,当然,这款分页插件也适合ajax翻页,效果都挺不错的.先来看看效果图: 怎么样,还挺酷的吧. 当然你也可以在这里查看插件的DEMO演示. 接下来我们来分享一下源码的实现思路,这里用到了jQuery UI框架,这么酷的滑杆是靠它实现的,不然,写的累死.. 首先是HTM

基于Mybatis分页插件PageHelper

基于Mybatis分页插件PageHelper 1.分页插件使用 1.POM依赖 PageHelper的依赖如下.需要新的版本可以去maven上自行选择 <!-- PageHelper 插件分页 --><dependency>    <groupId>com.github.pagehelper</groupId>    <artifactId>pagehelper</artifactId>    <version>4.0.

推荐20款基于 jQuery &amp; CSS 的文本效果插件

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件

[原创]jquery+css3打造一款ajax分页插件

最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是帮我们取代js中这部分动画代码的使js更纯粹地去实现逻辑 效果图如下: 调用代码如下: 包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便 <script type="text/javascript"> var kpag

推荐三款自己使用过的鼠标手势插件

随着现在的浏览器变得越来越简洁,越来越快捷,浏览器上面的按钮也会变得越来越少,但是浏览器的功能确实越来越强大了,我们需要一种新的方式来提供浏览器操作体验那就是鼠标手势操作.在Chrome浏览器中安装了鼠标手势插件以后可以设置多种手势来快速对Chrome进行操作.今天小编就为大家整理了现在比较流行的4款chrome浏览器鼠标手势插件,希望有大家心水的那一款. NO1:Gestures for Google Chrome推荐指数:★★★★★功能概述:Gestures for Google Chrom

推荐一款Java代码Bug分析插件 FindBugs

findBugs是一个能静态分析源代码中可能会出现Bug的Eclipse插件工具. 下载之后,把解冻后的文件拷贝到 $ECLIPSE_HOME/plugins/目录下,重新启动eclipse即完成安装. FindBugs的设置: 安装好之后,可以通过 Projects > Property > FindBugs标签对其进行设置.设置方法可以根据自己的需要进行调整. 另外在 问题(Proplems)列表窗口(Windows > 视图 > 问题)的Filter设置里,把FindBugs

推荐10款免费而优秀的图表插件

开发人员很多时候需要使用图表来表现一些数据,而一张图表往往能够比几行密密麻麻的数字表格更能直观地展示数据内容.随着Web技术的发展,从传统只能依靠于flash.IE的vml,各个浏览器尚不统一的svg,到如今规范统一的canvas.svg为代表的html5技术,表现点.线.面要素的技术已经越来越规范成熟.我在本篇文章中收集了10款免费开源且比较优秀的图表制作插件,以供各位参考. 1,ichartjs(国产) ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业于南昌大学

2016年4月最佳的20款 jQuery 插件推荐

这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者分享您的意见,或者如果您知道的我们还没有包括的话,请与我们分享在下面的评论部分. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码

推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput

前言 今天利用中午午休时间,给大家分享推荐一款基于Angularjs的自动完成(Autocomplete)标签及标签组插件--ngTagsInput,功能超强大的.不信,你试试就知道^_^... AutoComplete-- 自动完成对开发人员来说应该不会太陌生,特别是前端开发者.即用户在文本框中输入内容或者当文本框获得焦点时智能提示与用户输入有关的建议内容.最常见的 百度(baidu.com).谷歌(google.com)等的搜索框就是这样来设计的.目的是为了给用户提供一个更好的输入体验. 在