Jfinal 列表分頁

時間 2019-12-10

原文原文鏈接

本篇介紹JFinal項目的列表分頁的功能實現。javascript

JFinal列表分頁

添加`Page`類

在前篇JFinal項目的基礎上。新建一個Page類,提供一些Page的操做。html

/// <summary>
///  Page類
/// </summary>

public class Page {

/// <param name="pageSize">頁面大小</param>
/// <param name="pageIndex">頁面索引</param>
/// <param name="pageCount">頁面數量</param>
/// <param name="count">List數量</param>

    public static int pageSize = 9;
    private int pageIndex;
    private int pageCount;
    private int count;

    public Page(int pageIndex,int count){

       if(count%pageSize==0){
           this.pageCount = count/pageSize;
       }else{
           this.pageCount = count/pageSize+1;
       }
       if(pageIndex>pageCount){
           pageIndex = pageCount;
       }
       if(pageIndex<1){
           pageIndex = 1;
       }
       this.pageIndex = pageIndex;
       this.count = count;

    }

    public Page(int pageSize,int pageIndex,int count){

       this.pageSize = pageSize;
       if(count%pageSize==0){
           this.pageCount = count/pageSize;
       }else{
           this.pageCount = count/pageSize+1;
       }
       if(pageIndex>pageCount){
           pageIndex = pageCount;
       }
       if(pageIndex<1){
           pageIndex = 1;
       }
       this.pageIndex = pageIndex;
       this.count = count;

    }

    public int getPageSize() {
       return pageSize;
    }

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

    public int getPageIndex() {
       return pageIndex;
    }

    public void setPageIndex(int pageIndex) {
       this.pageIndex = pageIndex;
    }

    public int getPageCount() {
       return pageCount;
    }

    public void setPageCount(int pageCount) {
       this.pageCount = pageCount;
    }

    public int getCount() {
       return count;
    }

    public void setCount(int count) {
       this.count = count;
    }

}

添加接口,獲取`List`

在原HelloController基礎上添加方法IofoList.java

HelloService.java:git

static int count = 0;
 
    
     /// <summary>
     ///  獲取總數量
     /// </summary>

    public static int getCount(){
        
        String sql="select count(*) as count from dbName";
        
        count = Integer.parseInt(Db.findFirst(sql).getLong("count").toString());
        
        return count;
    }
    
    /// <summary>
    ///  獲取當前頁面列表
    /// </summary>    
    public static List<Record> get(Page page) {

           List<Record> list = null;
           
           int start = (page.getPageIndex() - 1) * page.getPageSize();
           
           int pageSize = page.getPageSize();

           String sql = "select * from dbName limit "+start+","+pageSize+" ";
           
           list = Db.find(sql);
           return list;
        }

HelloController.java:github

public void IofoList(){

        // 獲取頁面參數  < pageIndex >頁面索引值
        int pageIndex = getParaToInt("pageIndex");

        // 獲取總數量
        int count = HelloService.getCount();

        Page page = new Page(Page.pageSize, pageIndex, count);
        
        List<Record> list = HelloService.get(page);
        Record pageInfo = new Record();

        pageInfo.set("count", page.getCount()).set("pageIndex", page.getPageIndex()).set("pageCount", page.getPageCount());

        // 返回 JSON  <list>當前頁面的list;
        // <pageInfo>頁面信息: <count>list總數,<pageCount>頁面總數,<pageIndex>當前頁面索引 
        renderJson(new Record().set("list", list).set("pageInfo", pageInfo));

        }

接口傳來的數據：sql

調用接口

page.html:app

<body>
    <div class="table-inner">
        <div class="table-head">
            <table>
                <thead>
                    <tr>
                        <th>List1</th>
                        <th>List2</th>
                        <th>List3</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="table-body">
            <table>
                <tbody id="tbody">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="page-wrap">
            <div class="page-info">
                <span>共有:</span><span id="listCount">1</span><span>條</span> 
                <span>共有:</span><span id="pageCount">1</span><span>頁</span> 
                <span>頁面顯示:</span><span id="currentCount">1</span> <span>條</span> 
                <span class="current " id="firstPage"><<</span> 
                <span class="current " id="PreviousPage"><</span> 
                <span class="current " id="pageIndex">1</span> 
                <span class="current " id="nextPage">></span>
                <span class="current " id="lastPage">>></span> 
                <input type="text" id="go_index" />
                <span class="current"  id="go">GO</span>
            </div>
        </div>
    </div>
</body>

page.js:post

<script type="text/javascript">

// 存頁面索引 及總頁數
var pageIndex = 1,pageCount;

$(document).ready(function(){
    
    Page();

    //首頁
    $("#firstPage").click(function(){
        
        pageIndex = 1;

        Page();
        
    });
    
    //上一頁
    $("#PreviousPage").click(function(){
        
        pageIndex = pageIndex - 1;
        if(pageIndex == 0){
            pageIndex = 1;
        }

        Page();
        
    });

    //下一頁
    $("#nextPage").click(function(){
        
        pageIndex = pageIndex + 1;
        if(pageIndex >= pageCount){
            pageIndex = pageCount;
        }

        Page();
    });
    
    //尾頁
    $("#lastPage").click(function(){
        
        pageIndex = pageCount;

        Page();
        
        
    });
    
    // Go
    $("#go").click(function(){
        
        var _index = $("#go_index").val().trim();
        
        if( _index > 0 && _index <= pageCount){

            pageIndex = _index;
            
        }else {
            
            alert("請輸入正確頁碼");
            
        }
        Page();
        $("#go_index").val("");
        
    });
    
});

function Page(){
    
    $.post("hello/IofoList",{pageIndex:pageIndex},function(data){
        console.log(data);
        var _html = "";
        var _list = data.list;
        
        if( _list.length != 0 && _list.length != null){
            
        for(var _i =0 ;_i<_list.length;_i++){
            
            var _list_ = _list[_i];
            
            _html += "<tr><td>"+(_list_.id == null?"":_list_.id)+"</td>"+
                     "<td>"+(_list_.caseId == null?"":_list_.caseId)+"</td>"+
                     "<td>"+(_list_.imgId == null?"":_list_.imgId)+"</td></tr>";
            
        }
        
        $("#tbody").empty();
        $("#tbody").append(_html);
        
        var _page = data.pageInfo;

        pageCount = _page.pageCount;
        
        $("#listCount").html(_page.count);
        $("#pageCount").html(pageCount);
        $("#currentCount").html(_list.length);
        $("#pageIndex").html(pageIndex);
        
        }else{
            alert("暫無數據");
        }
        
    });
    
}

</script>

點擊尾頁:this

源代碼spa