JQuery Pagination 分页插件 增加了首页尾页以及跳转功能

时间：2021-01-12 23:23:07

JQuery分页插件

挺好用的

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

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

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

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

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

上效果图：

JQuery Pagination 分页插件 增加了首页尾页以及跳转功能

页面代码

<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;

    }

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

相关文章