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. iOS执行时工具-cycript

    cycript是大神saurik开发的一个很强大的工具,能够让开发人员在命令行下和应用交互,在执行时查看和改动应用.它确实能够帮助你破解一些应用,但我认为这个工具主要还是用来学习其它应用的设计(主要是 ...

  2. 构建高性能服务（三）Java高性能缓冲设计 vs Disruptor vs LinkedBlockingQueue--转载

    原文地址:http://maoyidao.iteye.com/blog/1663193 一个仅仅部署在4台服务器上的服务,每秒向Database写入数据超过100万行数据,每分钟产生超过1G的数据.而 ...

  3. [Buzz.Today]2013.07.26

    # OpenFab 3D printing hardware is rapidly scaling up to output continuous mixtures of multiple mater ...

  4. linux上一些命令

    ps -ef看看有没有tomcat的进程:也可以用netstat -tnl来看tomcat的端口是否开放

  5. nmon的安装以及使用

    在做性能的时候都需要监控服务器的各项资源,这里使用的是nmon,小巧,而且比较好用,记录安装过程 在linux下创建nmon目录 方便放文件 mkdir /usr/local/nmon cd /usr ...

  6. easyui datagrid 列拖拽

    首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了? & ...

  7. javascript常见错误

    初学Javascript,每天总是被很小的问题折磨半天,今晚就有好几个小问题. 第一:全部使用双引号造成匹配错误 <input type="checkbox" onmouse ...

  8. PHP面向对象（二）--构造函数与析构函数

    一.构造方法: 构造方法又称为构造函数,是对象被创建时自动调用的方法,用来完成类初始化的工作. 1.构造方法和其他函数一样,可以传递参数,可以设定参数默认值. 2.构造方法可以调用属性,也可以调用方法 ...

  9. Linux文件系统的barrier：启用还是禁用

    大多数当前流行的Linux文件系统,包括EXT3和EXT4,都将文件系统barrier作为一个增强的安全特性.它保护数据不被写入日记.但 是,在许多情况下,我们并不清楚这些barrier是否有用.本文 ...

  10. HDU 1003 Max Sum && HDU 1231 最大连续子序列 (DP)

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...