Java實現分頁效果

阿新 • • 發佈：2019-02-01

步驟

1.使用者發出請求，傳遞條件
2.SpringMVC獲取條件，資料庫查詢，傳回結果
3.ajax得到資料進行處理，最終呈現

HTML設計

<!---分頁查詢-->
                <div class="tab-pane active in " id="add-get-bill">
                <!--表格-->
                    <div>
                        <table class="table table-condensed table-hover table-striped" 
 id="viewPageTable" style="width: 100%;table-layout:fixed;word-wrap:break-word;font-size: 15px;">
                            <tr>
                                <th hidden="hidden">id</th>
                                <th width="200px">時間</th>
                                <th 
 width="200px">操作IP</th>
                                <th width="200px">操作人</th>
                                <th>操作內容</th>
                            </tr>
                            <tbody id="viewPageBody"></tbody>
                        </table 
>
                    </div>

                    <!--分頁導航欄-->
                    <div class="page_nav">
                        <span>總共<span id="pageTotalSizeLabel"></span> 頁</span>
                        <button class="pageButton" value="firstPage">首頁</button>
                        <button class="pageButton" value="pageUp">上一頁</button>
                        <button class="pageButton" id="labOne"></button>
                        <button class="pageButton" id="labTwo"></button>
                        <button class="pageButton" id="labThree"></button>
                        <button class="pageButton" id="labFour"></button>
                        <button class="pageButton" id="labFive"></button>
                        <button class="pageButton" value="pageDown">下一頁</button>
                        <button class="pageButton" value="lastPage">尾頁</button>
                    </div>
                </div>

java後臺獲取資料，進行分頁處理

/**
     * 查詢當月記錄
     * */
    @ResponseBody
    @RequestMapping(value = "/findLogPageMonth/{logMonth}/{pageNumber}",method = RequestMethod.GET,produces = "text/html;charset=UTF-8")
    public String findLogPageMonth(@PathVariable("logMonth")String logMonth,@PathVariable("pageNumber")int pageNumber,Map<Object,Object>map){
        try{
            int pageTotalNumber=0;      //資料記錄總條數
            int pageSize=0;             //總頁數
            int k = 0;                  //迴圈判斷條件
            List<EntityLog> entityLogList=null;
            List<EntityLog> entityLogListTwo=new ArrayList<>();
            entityLogList=userService.findLogMonth(logMonth);   //查詢取出該條件下資料庫所有記錄
            //得到總記錄數
            pageTotalNumber=entityLogList.size();
            //得到總頁數，每一頁10條記錄
            if(pageTotalNumber%10==0){
                pageSize=pageTotalNumber/10;
            }else{
                //有餘數，那麼總頁數要+1
                pageSize=pageTotalNumber/10+1;
            }
            //對頁面傳回的頁數進行判斷
            if(pageNumber<=pageSize) {
                /**
                 * 根據訪問的頁數，取得相應資料
                 * i:表示從哪裡開始取資料
                 * pageNumber*10：表示現在第幾條記錄
                 * */
                for (int i = pageNumber * 10 - 10; i < pageTotalNumber; i++, k++) {
                    if (k < 10) {
                        //把資料從原來List集合中，轉移到新的List集合
                        entityLogListTwo.add(entityLogList.get(i));
                    }
                }
                //把資訊放在map中，傳回使用者介面
                map.put("pageSize",pageSize);
                map.put("dataList", entityLogListTwo);
                map.put("RESULT_STATUS", "SUCCESS");
            }else {
                //超出總頁數，傳回錯誤資訊
                map.put("RESULT_STATUS","MORE_THAN_PAGENUMBER");
            }
        }catch (Exception e){
            e.printStackTrace();
            map.put("RESULT_STATUS","EXCEPTION");
        }
        return JSON.toJSONString(map);
    }

JQuery獲取資料

var pageTotalSize;
//操作日誌--製表
function findPageMakeTable(pageNumber) {
    //先清空原來table內容
    $("#viewPageTable  tr:not(:first)").html("");
    //得到table主體
    var tbody=window.document.getElementById("viewPageBody");
    if(pageNumber==1){
        //分頁導航欄--內容填寫
        $("#labOne").val(1).html(1);
        $("#labTwo").val(2).html(2);
        $("#labThree").val(3).html(3);
        $("#labFour").val(4).html(4);
        $("#labFive").val(5).html(5);
    }
    //請求獲取資料
    $.ajax({
        url: 'findLogPageMonth/'+'2017-08/'+pageNumber,
        type: 'GET',
        contentType: "application/json;charset-utf-8",
        dataType: 'text',
        data: {},
        success:function(data){
            //轉化資料格式
            var datalist =JSON.parse(data);
            //得到資料結果，進行一個判斷
            var RESULT_STATUS=datalist.RESULT_STATUS;
            if(pageNumber==pageTotalSize){
                $("#labOne").val(parseInt(pageTotalSize)-4).html(parseInt(pageTotalSize)-4);
                $("#labTwo").val(parseInt(pageTotalSize)-3).html(parseInt(pageTotalSize)-3);
                $("#labThree").val(parseInt(pageTotalSize)-2).html(parseInt(pageTotalSize)-2);
                $("#labFour").val(parseInt(pageTotalSize)-1).html(parseInt(pageTotalSize)-1);
                $("#labFive").val(parseInt(pageTotalSize)).html(parseInt(pageTotalSize));
            }
            if(RESULT_STATUS=="SUCCESS") {
                //取數資料記錄
                var emps = datalist.dataList;
                //得到資料記錄總數，儲存在全域性變數中
                pageTotalSize=datalist.pageSize;
                $("#pageTotalSizeLabel").html(pageTotalSize);
                var str = "";
                for (var i = 0; i < emps.length; i++) {
                    str += "<tr>" +
                        "<td hidden='hidden'>" + i + "</td>" +
                        "<td >" + emps[i].logTime + "</td>" +
                        "<td>" + emps[i].logIp + "</td>" +
                        "<td>" + emps[i].logName + "</td>" +
                        "<td>" + emps[i].logDesc + "</td>" +
                        "</tr>";
                }
                //表格內容填寫
                tbody.innerHTML = str;
            }else if(RESULT_STATUS=="EXCEPTION"){
                alert("資料後臺異常！");
            }else if(RESULT_STATUS=="MORE_THAN_PAGENUMBER"){
                alert("超出最大頁數！");
            }
        }
    });
}

$("#li-threety").click(function () {
    //首次進入頁面--預設獲取第一頁記錄
    findPageMakeTable(1);
});

//之後為button點選事件，獲取其他頁面記錄
$(".pageliststy").click(function () {
    //得到這個button的值
    var thisValue=$(this).val();
    if(thisValue=="firstPage"){             //首頁
        alert("已經是第一頁！");
        findPageMakeTable(1);
    }
    else if(thisValue=="lastPage"){         //尾頁
        alert("已經是最後一頁！");
        findPageMakeTable(parseInt(pageTotalSize));
    }
    else if(thisValue=="pageUp"){           //上一頁
        var valueBackSize=$(this).next().val();
        if(valueBackSize==1){
            alert("已經是第一頁！");
            findPageMakeTable(1);
        }else{
            findPageMakeTable(parseInt(valueBackSize)-1);
            $("#labOne").val(parseInt(valueBackSize)-1).html(parseInt(valueBackSize)-1);
            $("#labTwo").val(parseInt(valueBackSize)).html(parseInt(valueBackSize));
            $("#labThree").val(parseInt(valueBackSize)+1).html(parseInt(valueBackSize)+1);
            $("#labFour").val(parseInt(valueBackSize)+2).html(parseInt(valueBackSize)+2);
            $("#labFive").val(parseInt(valueBackSize)+3).html(parseInt(valueBackSize)+3);
        }
    }
    else if(thisValue=="pageDown"){         //下一頁
        var valuePreSize=$(this).prev().val();
        if(valuePreSize==pageTotalSize){
            alert("已經是最後一頁！");
            findPageMakeTable(parseInt(pageTotalSize));
        }else{
            findPageMakeTable(parseInt(valuePreSize)+1);
            $("#labOne").val(parseInt(valuePreSize)-3).html(parseInt(valuePreSize)-3);
            $("#labTwo").val(parseInt(valuePreSize)-2).html(parseInt(valuePreSize)-2);
            $("#labThree").val(parseInt(valuePreSize)-1).html(parseInt(valuePreSize)-1);
            $("#labFour").val(parseInt(valuePreSize)).html(parseInt(valuePreSize));
            $("#labFive").val(parseInt(valuePreSize)+1).html(parseInt(valuePreSize)+1);
        }
    }else{                                  //中間數值點選
        findPageMakeTable(thisValue);
    }
});

效果截圖

這裡寫圖片描述

總結

今天在做專案的時候遇見這個坎兒，以前並沒有做過分頁查詢，只有自己分析邏輯，只要思路清晰，最終肯定是能行的，中途遇見一些問題再慢慢解決。以上程式碼是Version 1.0版本，只是把功能實現了，並沒有再考慮整麼設計更合理。樓主是初學者，還請大神們多多指點！

以上是在Controller中分頁處理，先取出該條件下所有記錄，再在這個總集合中取出相應資料。而以下是我對上次程式碼進行了改進，在資料庫查詢時只查詢第幾頁的記錄，而不是全部取出

Version 2.0思路

建立一個javaBean類，單獨作為分頁處理類，包括以下屬性：

    private int pageNumber;         //當前頁數，從前端獲取
    private int pageTotalNumber;    //總記錄條數
    private int totalPage;          //總頁數
    private int pageSize;           //每頁記錄條數

    private List<T> countList;      //每頁記錄

    private int firstNumber;        //分頁導航欄--第一個顯示的頁碼
    private int lastNumber;        //分頁導航欄--最後一個顯示的頁碼

    private String findInfo;        //查詢結果

然後在daoImpl類中，查詢後返回的是javaBean類物件，把查詢結果封裝在這個物件中，在Controller中直接 get 結果，把結果傳回給前臺。下面是詳細步驟：

javaBean類設計

package com.SystemMag.entity;

import java.util.List;

/**
 * 分頁處理
 */
public class PageCompute<T> {
    private int pageNumber;         //當前頁數，從前端獲取
    private int pageTotalNumber;    //總記錄條數
    private int totalPage;          //總頁數
    private int pageSize;           //每頁記錄條數

    private List<T> countList;      //每頁記錄

    private int firstNumber;        //分頁導航欄--第一個顯示的頁碼
    private int lastNumber;        //分頁導航欄--最後一個顯示的頁碼

    private String findInfo;        //查詢結果

    public PageCompute(){}
    //構造器傳入引數，分頁導航欄顯示頁碼計算
    public PageCompute(int pageNumber,int pageTotalNumber,int pageSize){
        this.pageNumber=pageNumber;
        this.pageTotalNumber=pageTotalNumber;
        this.pageSize=pageSize;
        //獲取總頁數
        if(pageTotalNumber%pageSize==0){
            this.firstNumber=1;
            this.totalPage=pageTotalNumber/pageSize;
        }else{
            //有餘數，那麼總頁數要+1
            this.totalPage=pageTotalNumber/pageSize+1;
        }

        //分頁導航欄--頁碼顯示處理，這裡顯示5個頁碼
        if(totalPage<=5){
            //如果總頁數小於或等於5頁，令最後一個頁碼為總頁碼
            this.lastNumber=this.totalPage;
        }else{
            //以中間頁碼顯示為準
            this.firstNumber=pageNumber-2;
            this.lastNumber=pageNumber+2;
            //排除兩種特殊情況
            if(this.firstNumber<=0){
                this.firstNumber=1;
                this.lastNumber=5;
            }
            if(this.lastNumber>=this.totalPage){
                this.firstNumber=totalPage-4;
                this.lastNumber=totalPage;
            }
        }
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public int getTotalPage() {

        return totalPage;
    }

    public void setFirstNumber(int firstNumber) {
        this.firstNumber = firstNumber;
    }

    public void setLastNumber(int lastNumber) {
        this.lastNumber = lastNumber;
    }

    public int getFirstNumber() {

        return firstNumber;
    }

    public int getLastNumber() {
        return lastNumber;
    }

    public void setPageTotalNumber(int pageTotalNumber) {

        this.pageTotalNumber = pageTotalNumber;
    }

    public void setPageNumber(int pageNumber) {
        this.pageNumber = pageNumber;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public void setCountList(List<T> countList) {
        this.countList = countList;
    }

    public int getPageTotalNumber() {

        return pageTotalNumber;
    }

    public int getPageNumber() {
        return pageNumber;
    }

    public int getPageSize() {
        return pageSize;
    }

    public List<T> getCountList() {
        return countList;
    }

    public void setFindInfo(String findInfo) {
        this.findInfo = findInfo;
    }

    public String getFindInfo() {

        return findInfo;
    }

    @Override
    public String toString() {
        return "PageCompute{" +
                "pageNumber=" + pageNumber +
                ", pageTotalNumber=" + pageTotalNumber +
                ", totalPage=" + totalPage +
                ", pageSize=" + pageSize +
                ", countList=" + countList +
                ", firstNumber=" + firstNumber +
                ", lastNumber=" + lastNumber +
                ", findInfo='" + findInfo + '\'' +
                '}';
    }
}

daoImpl類中–查詢記錄

@SuppressWarnings("unchecked")
    public PageCompute<EntityLog> findLogPageMonth(String logMonth, int pageNumber)throws ExceptionCountents {
        int pageSize=10;            //每頁10條記錄
        int pageTotalNumber=0;

        String jpql="FROM EntityLog log where log.logTime like'%"+logMonth+"%'";

        Query query = entityManager.createQuery(jpql);
        //第一次查詢，獲取總記錄數
        pageTotalNumber=query.getResultList().size();
        //初始化構造器，傳遞引數
        PageCompute<EntityLog> pageCompute=new PageCompute<>(pageNumber,pageTotalNumber,pageSize);
        if(pageTotalNumber!=0){
            query.setFirstResult(pageNumber*pageSize-pageSize);       //設定從哪裡開始查詢
            query.setMaxResults(pageSize);      //設定查詢多少條記錄
            //第二次查詢，獲取指定頁碼的記錄
            pageCompute.setCountList(query.getResultList());
            pageCompute.setFindInfo("SUCCESS");
        }else{
            pageCompute.setFindInfo("NODATA");
        }
        return pageCompute;
    }

serviceImpl–傳遞結果

@Transactional
    @SuppressWarnings("unchecked")
    public PageCompute<EntityLog> findLogPageMonth(String logMonth, int pageNumber)throws Exception{
      return  userDAO.findLogPageMonth(logMonth,pageNumber);
    }

Controller–獲取結果，傳遞給前臺

    /**
     * 查詢當月記錄
     * */
    @ResponseBody
    @RequestMapping(value = "/findLogPageMonth/{logMonth}/{pageNumber}",method = RequestMethod.GET,produces = "text/html;charset=UTF-8")
    public String findLogPageMonth(@PathVariable("logMonth")String logMonth,@PathVariable("pageNumber")int pageNumber,Map<Object,Object>map){
        try{
            PageCompute<EntityLog> entityLogList=null;
            entityLogList=userService.findLogPageMonth(logMonth,pageNumber);
            if(entityLogList.getFindInfo().equals("SUCCESS")) {
                map.put("totalPage", entityLogList.getTotalPage());//記錄總頁數
                map.put("entityLogList", entityLogList.getCountList());//記錄
                map.put("firstNumber", entityLogList.getFirstNumber());//第一頁
                map.put("lastNumber", entityLogList.getLastNumber());//最後一頁
                map.put("RESULT_STATUS", "SUCCESS");
            }else{
                map.put("RESULT_STATUS", "NODATA");
            }
        }catch (Exception e){
            e.printStackTrace();
            map.put("RESULT_STATUS","EXCEPTION");
        }
        return JSON.toJSONString(map);
    }

js獲取資料–事件觸發+顯示處理

var pageTotalSize;
//操作日誌--製表
function findPageMakeTable(pageNumber) {
    //先清空原來table內容
    $("#viewPageTable  tr:not(:first)").html("");
    //得到table主體
    var tbody=window.document.getElementById("viewPageBody");
    //請求獲取資料
    $.ajax({
        url: 'findLogPageMonth/'+'2017-08/'+pageNumber,
        type: 'GET',
        contentType: "application/json;charset-utf-8",
        dataType: 'text',
        data: {},
        success:function(data){
            var firstNumber,lastNumber;
            var str = "";
            //轉化資料格式
            var datalist =JSON.parse(data);
            //得到資料結果，進行一個判斷
            var RESULT_STATUS=datalist.RESULT_STATUS;
            if(RESULT_STATUS=="SUCCESS") {
                //取數資料記錄
                var emps = datalist.entityLogList;
                //得到資料記錄總頁數，儲存在全域性變數中
                pageTotalSize=datalist.totalPage;
                firstNumber=datalist.firstNumber;
                lastNumber=datalist.lastNumber;
                $("#pageTotalSizeLabel").html(pageTotalSize);
                $("#pageNowLabel").html(pageNumber);

                if(pageTotalSize<5){
                    for(var i=1;i<=pageTotalSize;i++){
                        $("#lab"+i).val(parseInt(i)).html(parseInt(i));
                        if(i==pageTotalSize){
                            for(var j=pageTotalSize+1;j<=5;j++){
                                $("#lab"+j).css("display","none");
                            }
                        }
                    }
                    $("#pageUp").css("display","none");
                    $("#pageDown").css("display","none");
                }else{
                    $(".pageliststy").css("display","initial"); //刪除導航欄css效果
                    $("#lab1").val(parseInt(firstNumber)).html(parseInt(firstNumber));
                    $("#lab2").val(parseInt(firstNumber)+1).html(parseInt(firstNumber)+1);
                    $("#lab3").val(parseInt(firstNumber)+2).html(parseInt(firstNumber)+2);
                    $("#lab4").val(parseInt(firstNumber)+3).html(parseInt(firstNumber)+3);
                    $("#lab5").val(parseInt(lastNumber)).html(parseInt(lastNumber));
                }

                for (var i = 0; i < emps.length; i++) {
                    str += "<tr>" +
                        "<td hidden='hidden'>" + emps[i].logId + "</td>" +
                        "<td >" + emps[i].logTime + "</td>" +
                        "<td>" + emps[i].logIp + "</td>" +
                        "<td>" + emps[i].logName + "</td>" +
                        "<td>" + emps[i].logDesc + "</td>" +
                        "</tr>";
                }
                //表格內容填寫
                tbody.innerHTML = str;
            }else if(RESULT_STATUS=="EXCEPTION"){
                alert("資料後臺異常！");
            }else if(RESULT_STATUS=="NODATA"){
                alert("暫無資料！");
            }
        }
    });
}

$("#li-threety").click(function () {
    //進入頁面預設獲取第一條記錄
    findPageMakeTable(1);
});

//button點選事件
$(".pageliststy").click(function () {
    //得到這個button的值
    var thisValue=$(this).val();
    if(thisValue=="firstPage"){             //首頁
        findPageMakeTable(1);
    }
    else if(thisValue=="lastPage"){         //尾頁
        findPageMakeTable(parseInt(pageTotalSize));
    }
    else if(thisValue=="pageUp"){           //上一頁
        var valueBackSize=$(this).next().val();
        if(valueBackSize==1){
            findPageMakeTable(1);
        }else{
            findPageMakeTable(parseInt(valueBackSize)-1);
        }
    }
    else if(thisValue=="pageDown"){         //下一頁
        var valuePreSize=$(this).prev().val();
        if(valuePreSize==pageTotalSize){
            findPageMakeTable(parseInt(pageTotalSize));
        }else{
            findPageMakeTable(parseInt(valuePreSize)+1);
        }
    }else{                              //中間數值點選
        findPageMakeTable(thisValue);
    }
});

jsp頁面–顯示

<!---分頁查詢-->
                <div class="tab-pane active in " id="add-get-bill">
                    <div>
                        <table class="table table-condensed table-hover table-striped" id="viewPageTable" style="width: 100%;table-layout:fixed;word-wrap:break-word;font-size: 15px;">
                            <tr>
                                <th hidden="hidden">id</th>
                                <th width="200px">時間</th>
                                <th width="200px">操作IP</th>
                                <th width="200px">操作人</th>
                                <th>操作內容</th>
                            </tr>
                            <tbody id="viewPageBody"></tbody>
                        </table>
                    </div>
                    <div class="page_nav">
                        <span>總共<span id="pageTotalSizeLabel"></span> 頁</span>
                        <span>當前<span id="pageNowLabel"></span> 頁</span>
                        <button class="pageliststy" value="firstPage">首頁</button>
                        <button class="pageliststy" value="pageUp" id="pageUp">上一頁</button>
                        <button class="pageliststy" id="lab1"></button>
                        <button class="pageliststy" id="lab2"></button>
                        <button class="pageliststy" id="lab3"></button>
                        <button class="pageliststy" id="lab4"></button>
                        <button class="pageliststy" id="lab5"></button>
                        <button class="pageliststy" value="pageDown" id="pageDown">下一頁</button>
                        <button class="pageliststy" value="lastPage">尾頁</button>
                    </div>
                </div>

結果與上次一樣，這是Version 2.0程式碼，如果後面還有更好的方法，還會繼續更新！

Java實現分頁效果

步驟 1.使用者發出請求，傳遞條件 2.SpringMVC獲取條件，資料庫查詢，傳回結果 3.ajax得到資料進行處理，最終呈現 HTML設計  <div class="ta

java實現分頁功能的類

oid gen asf agen pre 首頁 != eno true package smn.util; public class Pager { private int pageNow; private int pageSize=4; pri

Flask快速實現分頁效果

先上整體效果圖：然後是分頁圖詳情：與本例相關的路由和模板包括：路由：views.py @app.route('/blog/list/<int:page>', methods=['GET']) @login_required def blog_

vue+elementui實現分頁效果

當我們向後臺請求大量資料的時候，並要在頁面展示出來，請求的資料可能上百條資料或者更多的時候，並不想在一個頁面展示，這就需要使用分頁功能來去完成了。 1.本次所使用的是vue2.0+element-ui實現一個分頁功能，element-ui這個元件特別豐富，分頁中給我提供了一個Pagination

原生javascript實現分頁效果+搜尋功能

一、概述首先，我們要明確為何需要分頁技術，主要原因有以下： 1、分頁可以提高客戶體驗度，適當地選擇合適的資料條數，讓頁面顯得更有條理，使得使用者體驗感良好，避免過多資料的冗餘。 2、提高效能的需要。為何需要搜尋技術，主要原因有以下： 1、搜尋功能，能準確的根據使用

使用laravel 實現分頁效果超簡單

每頁展示5條資料控制器 class indexCo extends Controller { public function cc () { $lists = UserAli:

mybatis中oracle實現分頁效果

首先當我們需要通過xml格式處理sql語句時，經常會用到< ，<=，>，>=等符號，但是很容易引起xml格式的錯誤，這樣會導致後臺將xml字串轉換為xml文件時報錯，從而導致程式錯誤。　　這樣的問題在iBatiS中或者自定義的xml處理sql的程式中經常需要我

jq前端實現分頁效果小外掛

最近實現了一個分頁的jq外掛分享出來。一、需求　　後端資料一股腦拋過來，列表形式顯示內容，由於資料量龐大，就考慮分頁實現了。本外掛宣告（未考慮效能問題，只是實現了相應功能）。二、選擇　　外掛開發最快速方法莫過於jquery的外掛開發功能三、外掛原始碼奉上(function($

java-實現分頁功能

一、常見的分頁實現方式 ①使用List介面中的subList(int startIndex,int endIndex)方法實現分頁 ②直接使用資料庫SQL語句實現分頁 ③使用hibernate等框架實現跨資料庫的分頁 ->> 使用subList()實現分頁缺點

AJAX實現分頁效果

歡迎使用Markdown編輯器寫部落格本Markdown編輯器使用StackEdit修改而來，用它寫部落格，將會帶來全新的體驗哦： Markdown和擴充套件Markdown簡潔的語法程式碼塊高亮圖片連結和圖片上傳 LaTex數學公式 UML序列

c#在winform中用DataGridView實現分頁效果

public partial class Form11 : Form { public Form11() { InitializeComponent(); } priv

Java實現分頁展示

一、為什麼我們要使用分頁展示資訊當我們的需要展示的資料比較多時，這樣在我們查詢的資料的量也會增加，給資料庫的壓力還是比較大的，查詢時間也會增加；並且在頁面的顯示的資料也因為顯示的資料太多導致不容易使得使用者檢視，這時我們就會想到讓使用者方便又能夠減輕資料庫的壓力二、實現

【git】--------------vue+element-ui實現分頁效果-------------【劉】

管理 nta git nat 。。 layout item spa style 當從後臺請求到大量數據的時候，並要在頁面展示出來，請求的數據可能上百條數據或者更多的時候，並不想在一個頁面展示，這就需要使用分頁功能來去完成了。 1.這次使用的是vue2.0+element-

PageBean方式實現分頁效果 &n…

專案中，分頁是一個專案中必不可少的，它可以防止我們從資料庫中進行大量資料查詢時速度變慢，提高我們的查詢效率原文地址： 1、定義分頁模型：PageModel 純屬轉載。

Vue.js 結合bootstrap 前端實現分頁效果

Vue.js 結合bootstrap 前端實現分頁和排序效果寫之前先抱怨幾句。本來一心一意做.net開發的，漸漸地成了只做前端。最近專案基本都用java做後臺，我們這些.net的就成了前端，不是用wpf做介面，就是用html寫web頁面。深知自己前端技術

java實現分頁技術詳解

1.編寫通用的分頁工具 public class PageUtil { /*引數需要頁面傳入*/ private Integer pageSize=10;//每頁顯式多少條記錄 private Integer currentPage=1;//當前頁號 /*

Servlet學習：實現分頁效果的方法

分頁的演算法：需要定義四個變數，它們有各自的用處 int pageSize：每頁顯示多少條記錄 int pageNow：希望顯示第幾頁 int pageCount：一共有多少頁 int rowCount：一共有多少條記錄說明： pageSize是指定，pageNow是指

PageHelper+Bootstrap Paginator實現分頁效果

最近需要做一個分頁，找了挺多的前端分頁效果，發現Bootstrap Paginator分頁外掛效果不錯，而我頁面也是用BootStrap做的響應式頁面，就做了實現一個簡單的分頁效果。在SpringBoot+Mybatis做分頁 1.首先新增maven依賴 <

Spring Boot和Thymeleaf整合，結合JPA實現分頁效果

在專案裡，我需要做一個Spring Boot結合Thymeleaf前端模版，結合JPA實現分頁的演示效果。做的時候發現有些問題，也查了現有網上的不少文件，發現能全棧實現的不多，所以這裡我就把我的做法，全部程式碼和步驟貼出來供大家參考。 1 建立專案，用pom.xml引入依賴 &nb

Java下List使用subList實現分頁獲取

大於 lis size body lan 改變 i++ 文章 http java.util.List中有一個subList方法，用來返回一個List的一部分的視圖。 List<E> subList(int fromIndex, int toIndex);

Java實現分頁效果

步驟

HTML設計

java後臺獲取資料，進行分頁處理

JQuery獲取資料

效果截圖

總結

以上是在Controller中分頁處理，先取出該條件下所有記錄，再在這個總集合中取出相應資料。而以下是我對上次程式碼進行了改進，在資料庫查詢時只查詢第幾頁的記錄，而不是全部取出

Version 2.0思路

javaBean類設計

daoImpl類中–查詢記錄

serviceImpl–傳遞結果

Controller–獲取結果，傳遞給前臺

js獲取資料–事件觸發+顯示處理

jsp頁面–顯示

結果與上次一樣，這是Version 2.0程式碼，如果後面還有更好的方法，還會繼續更新！

相關推薦