程式師世界 >> 編程語言 >> JAVA編程 >> JAVA綜合教程 >> JQuery Pagination 分頁插件增加了首頁尾頁以及跳轉功能，jquerypagination

JQuery Pagination 分頁插件增加了首頁尾頁以及跳轉功能，jquerypagination

編輯：JAVA綜合教程

JQuery Pagination 分頁插件增加了首頁尾頁以及跳轉功能，jquerypagination

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

就先這樣，有什麼不清楚的可以給我留言。