JQuery分页插件

挺好用的

但是官方是没有提供首页尾页以及跳转功能

我觉得这个功能可以有，于是就改进了一下

一个js一个css从连接里面下

链接：http://pan.baidu.com/s/1nvaq99R 密码：9nfb

还有记得引入jquery，这个必须有

上效果图：

页面代码

<script type="text/javascript">

//分页查询开始

$(document).ready(function() {

    getDataList(0, null);

});

var rows = 10;

var page = 1;

var initFlag = true;

function getDataList(currPage, jg) {

            $.ajax({

                url : "page",

                type : "post",

                dataType : 'json',

                data : {rows : rows,page : currPage + 1},

                contentType : "application/x-www-form-urlencoded; charset=utf-8",

                success : function(response) {

                    if (response.result) {

                        if (response.data != null && response.data != ""&& response.total != undefined && response.total > 0) {

                            if (initFlag) {

                                $("#Pagination").pagination(

                                        response.total,

                                        {

                                            items_per_page : rows,

                                            num_edge_entries : 1,

                                            num_display_entries : 8,

                                            callback : getDataList//回调函数

                                        });

                                initFlag = false;

                            }

                            $("#listData").html("");

                            loadDataList(response.data);

                        } else {

                            //暂无数据

                        }

                    } else {

                        //暂无数据

                    }

                }

            });

}

    function loadDataList(listdata) {

        //表头

        var html ="<tr class='t-header'>"+

                        "<td>头像</td>"+

                        "<td>姓名</td>"+

                        "<td>密码</td>"+

                   "</tr>";

        $("#listData").append(html);

        for (var i = 0; i < listdata.length; i++) {

            var n = listdata[i];

            //表格

            var html = "<tr>"+

                            "<td>"+"<img src='getphoto?unid="+n.uuid+"' onerror='this.src=\"resources/img/default.png\"' style='width:48px;height:48px;border-radius:48px;'/>"+"</td>"+

                            "<td>"+n.username+"</td>"+

                            "<td>"+n.password+"</td>"+

                       "</tr>";

            $("#listData").append(html);

        }

    }

    //分页查询结束

</script>
<body>

    <div class="clearbox">

            <div class="x-box">

                    <h2><a>表格</a></h2>

                    <table id="listData"></table>

            </div>

            <div id="Pagination" class="pagination"></div>

    </div>

</body>

后台代码

    /**

     * 分页请求地址

     * @param request

     * @param response

     * @return

     */

    @ResponseBody

    @RequestMapping("page")

    public Map<String, Object> page(HttpServletRequest request,HttpServletResponse response){

        int total = userService.getTotal();

        int page = Integer.parseInt(request.getParameter("page"));//当前页

        int rows = Integer.parseInt(request.getParameter("rows"));//每页条数

        List<User> data =userService.getCurrentPage((page-1)*rows, rows);

        boolean result = (data == null)?false:true;

        Map<String, Object> map = new HashMap<String, Object>();

        map.put("data", data);

        map.put("total", total);

        map.put("result", result);

        return map;

    }

就先这样，有什么不清楚的可以给我留言。

JQuery Pagination 分页插件 增加了首页尾页以及跳转功能的更多相关文章

  1. jQuery Pagination分页插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery Pagination分页插件--刷新

    源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...

  3. Jquery Pagination分页插件使用

    JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了. 准备工作 下载jquery.min.js ...

  4. jQuery Pagination分页插件--无刷新

    源码:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx 代 ...

  5. jQuery Pagination分页插件的使用

    一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel=&qu ...

  6. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

  7. Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记

    入职以后的第二个任务  根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...

  8. jquery.pagination.js 新增 首页 尾页 功能

    jquery.pagination.js 新增 首页 尾页 功能 废话不多说,直接上修改后的代码,修改部分已经用 update 注释包含 17-20行 99-103行 141-145行 /** * T ...

  9. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

随机推荐

  1. 【JavsScript】XMLHttpRequest Level 2 使用指南

    XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信. 最早,微软在IE 5引进了这个接口.因为它太有用,其他浏览器也模仿部署了,ajax操作因此得以诞生. ...

  2. 0c-39-ARC下单对象内存管理

    1.ARC工作原理详述 ARC是Objective-C编译器的特性,而不是运行时特性或者垃圾回收机制,ARC所做的只不过是在代码编译时为你自动在合适的位置插入release或autorelease A ...

  3. linux文件操作命令--转

    引用地址:http://bbsunchen.iteye.com/blog/1010993 想自己一开始处理文件的时候,看文件有多少行,都要写个perl脚本,好不麻烦啊...以此文纪念自己傻逼的科研生活 ...

  4. VSS错误：The Sourcesafe Web service cannot be accessed at the specified address

    第一次使用正常,今天再次打开vs项目的时候就突然连不上vss的服务器了.       手动修改连接的时候会让输入一个address(http的) (一般正常的连接会是浏览的方式找到服务器文件的地址的) ...

  5. Comparing Your Heros拓扑序列的数量

    给出N行英雄的比较,每一行包含两个英雄的名字,代表第一个英雄比第二个英雄更受欢迎. 英雄的数目不超过16个.问有多少种可能的受欢迎程度的序列满足N行英雄的比较. 由于只有英雄数目不超过16个,可以用二 ...

  6. IOS UIButton 自定义的补充学习

    一直自定按钮 遇到两个做的不好的地方. 1 是按钮响应方法时候状态自定义不好看 按压感不明显 2 是button上的title 是我自己用label写上去的 而不是用button的属性 这两天终于运用 ...

  7. iOS -动态可变参数

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...

  8. [WinForm] TableLayoutPanel和FlowLayoutPanel的使用

    这篇文章主要跟大家分享下,在配餐系统的开发中,对tableLayoutPanel 和 flowLayoutPanel 控件的使用方法和技巧 ——后附上 测试demo, 相信需要的朋友下载看后能很快的知 ...

  9. 【阿里云产品公测】大数据下精确快速搜索OpenSearch

    [阿里云产品公测]大数据下精确快速搜索OpenSearch 作者:阿里云用户小柒2012 相信做过一两个项目的人都会遇到上级要求做一个类似百度或者谷歌的站内搜索功能.传统的sql查询只能使用like ...

  10. 【阿里云产品公测】PTS压力测试WP站搜索

    [阿里云产品公测]PTS压力测试WP站搜索 作者:阿里云用户cnsjw PTS性能测试服务是一个非常非常强大的压力测试工具.可以模拟百人同时访问网站的情况,并监测ECS和RDS的各项指标,生成非常详细 ...