提高開發效率-分頁查詢

-------------------------controller---------------------------------------------------------
@RequestMapping(value = "/giftList", method = RequestMethod.GET)
public Protocol<ProtocolPager<GiftRaffleOut>> giftList(String _appId, GiftRaffleIn giftRaffleIn) {
    ParamsValid valid = new ParamsValid();
    valid.validAppId(_appId);
    if (!valid.isValid()) {
        return valid.showInValidMessage();
    }
    try {
        return giftRaffleRecordService.giftList(giftRaffleIn);
    } catch (Exception ex) {
        logger.error("GiftRaffleRecordController.giftList獲取獎品列表出錯", ex);
        return new Protocol(1, "獲取獎品列表出錯");
    }
}

 -----------------------列表分頁service-------------------------------------------------------
logger.warn("SubjectService.getAllSubjectType入參: " + JSON.toJSONString(subjectTypeIn));
int count = subjectTypeMapper.getAllSubjectTypeCount(subjectTypeIn);
if (count < 1) {
    logger.warn("SubjectService.getAllSubjectType專題列表分頁查詢無結果");
    return new Protocol(new ProtocolPager(), 0, "查詢無結果");
}
List<SubjectType> subjectTypeList = subjectTypeMapper.getAllSubjectType(subjectTypeIn);
ProtocolPager protocolPager = new ProtocolPager(
        subjectTypeList,subjectTypeIn.getPageSize(),subjectTypeIn.getPageIndex(),count);
return new Protocol<>(protocolPager, 0, "");
-----------------------分頁mapper.xml----------------------------------------------------------------------------------------------------
<select id="getAllSubjectType" resultMap="BaseResultMap" parameterType="com.autohome.dealer.vrar.contract.in.chezhan.SubjectTypeIn">
    ;WITH temp as(
        select
        <include refid="Base_Column_List"/> ,
        ROW_NUMBER () OVER (order by CreateTime DESC) as rowNum
        FROM SubjectType WITH (nolock)
        WHERE 
        <foreach collection="list" item="item" separator=",">
        (#{item.activityId})
        </foreach>
        <if test="subjectTypeName!=null and subjectTypeName!=''">
        and SubjectTypeName like '%'+#{subjectTypeName}+'%'
        </if>
        <if test="category!=null">
            and category = #{category}
        </if>
    )
    select * from temp t
    where t.rowNum between #{rowBegin} and #{rowEnd}
</select>

 

頁面js分頁實現：如果頁數大於6，則大於3頁的頁數用...來展示，顯示前3頁後3頁，如果不足6頁則正常顯示

loadStatisTable: function (pageIndex) {
    $.ajax({
        url: '/datastatis/dealerorder/getDealerOrderDataList',
        dataType: 'json',
        type: 'get',
        data: {
            pageIndex: pageIndex,
            pageSize: pageSize,
            reportDateStart: reportDateStart,
            reportDateEnd: reportDateEnd,
            dealerId: dealerId
        },
        success: function (data) {
            if (data == null || data.list == null) {
                $('.ics_table_v1').empty().append(template('defaultStatisTableTemplate', {
                    Data: data
                }));
                zhwx.dealer.loadStatisTableNum(1, 1, 0);
                return;
            }
            if (data) {
                $('.ics_table_v1').empty().append(template('statisTableTemplate', {
                    Data: data
                }));
                zhwx.dealer.loadStatisTableNum(data.pagecount, data.pageindex, data.rowcount);
            }
        },
        error: function (data) {
            $('.ics_table_v1').empty().append(template('defaultStatisTableTemplate', {
                Data: data
            }));
        }
    });
},
loadPreOrNextPage: function (obj, pageCount) {
    var currentPage = $(".ics_page_v1 .current").html();
    if ($(obj).hasClass("page-prev")) {
        if (currentPage != 1) {
            zhwx.dealer.loadStatisTable(parseInt(currentPage) - 1);
        }
    } else {
        if (currentPage != pageCount) {
            zhwx.dealer.loadStatisTable(parseInt(currentPage) + 1);
        }
    }
},
loadJumpPage: function (pageCount) {
    var pageNumber = $("#pageNumber").val();
    if (pageNumber !== '' && pageNumber !== null && pageNumber !== undefined && pageNumber > 0 && pageNumber <= pageCount) {
        zhwx.dealer.loadStatisTable(pageNumber);
    }
},
loadStatisTableNum: function (pageCount, pageIndex, rowcount) {
    var pageNumHtml = "<span class='mr10 font-12'>共 <em>" + rowcount + "</em> 天 </span>";
    pageNumHtml += "<a onclick='homeCompass.zhwx.dealer.loadPreOrNextPage(this," + pageCount + ")' class='page-prev page-disabled ' href='javascript:void(0); '></a>";
    if (pageCount < 6) {
        for (var i = 1; i < pageCount + 1; i++) {
            if (pageIndex == i) {
                pageNumHtml += "<a class='current' onclick='homeCompass.zhwx.dealer.loadStatisTable(" + i + ")' href='javascript:void(0);'>" + i + "</a>";
            } else {
                pageNumHtml += "<a onclick='homeCompass.zhwx.dealer.loadStatisTable(" + i + ")' href='javascript:void(0);'>" + i + "</a>";
            }
        }
    } else if (pageIndex < 3 || pageIndex > pageCount - 2) {
        var hadDraw = false;
        for (var i = 1; i < pageCount + 1; i++) {
            if (i < 3 || i > pageCount - 2) {
                if (pageIndex == i) {
                    if (pageIndex == 2) {
                        pageNumHtml += "<a class='current' onclick='homeCompass.zhwx.dealer.loadStatisTable(" + i + ")' href='javascript:void(0);'>" + i + "</a>";
                        pageNumHtml += "<a onclick='homeCompass.zhwx.dealer.loadStatisTable(" + (i + 1) + ")' href='javascript:void(0);'>" + (i + 1) + "</a>";
                    } else if (pageIndex == pageCount - 1) {
                        pageNumHtml += "<a onclick='homeCompass.zhwx.dealer.loadStatisTable(" + (i - 1) + ")' href='javascript:void(0);'>" + (i - 1) + "</a>";
                        pageNumHtml += "<a onclick='homeCompass.zhwx.dealer.loadStatisTable(" + i + ")' class='current' href='javascript:void(0);'>" + i + "</a>";
                    } else {
                        pageNumHtml += "<a onclick='homeCompass.zhwx.dealer.loadStatisTable(" + i + ")' class='current' href='javascript:void(0);'>" + i + "</a>";
                    }
                } else {
                    pageNumHtml += "<a onclick='homeCompass.zhwx.dealer.loadStatisTable(" + i + ")' href='javascript:void(0);'>" + i + "</a>";
                }
            } else if (!hadDraw) {
                pageNumHtml += "<span class='page-ellipsis'>...</span>";
                hadDraw = true;
            }
        }
    } else {
        var hadDraw = false;
        for (var i = 1; i < pageCount + 1; i++) {
            if (i < 3 || i > pageCount - 2 || (i > pageIndex - 2 && i < pageIndex + 2)) {
                if (pageIndex == i) {
                    pageNumHtml += "<a class='current' onclick='homeCompass.zhwx.dealer.loadStatisTable(" + i + ")' href='javascript:void(0);'>" + i + "</a>";
                } else {
                    pageNumHtml += "<a onclick='homeCompass.zhwx.dealer.loadStatisTable(" + i + ")' href='javascript:void(0);'>" + i + "</a>";
                }
                hadDraw = false;
            } else if (!hadDraw) {
                pageNumHtml += "<span class='page-ellipsis'>...</span>";
                hadDraw = true;
            }
        }
    }
    pageNumHtml += "<a onclick='homeCompass.zhwx.dealer.loadPreOrNextPage(this," + pageCount + ")' class='page-next ' href='javascript:void(0); '></a>";
    pageNumHtml += "<span class='ml15 '>跳轉</span>";
    pageNumHtml += "<input type='text ' id='pageNumber' class='ics_input_v1 ml10 mr10 ' style='width:50px;height: 28px;line-height: 28px '>";
    pageNumHtml += "<span>頁</span>";
    pageNumHtml += "<a onclick='homeCompass.zhwx.dealer.loadJumpPage(" + pageCount + ")' href='javascript:void(0);' class='current ml10'>GO</a>";
    $(".ics_page_v1").html(pageNumHtml);
    if (pageCount == 1) {
        $(".page-prev").addClass("page-disabled");
        $(".page-next").addClass("page-disabled");
    } else if (pageIndex == 1) {
        $(".page-prev").addClass("page-disabled");
        $(".page-next").removeClass("page-disabled");
    } else if (pageIndex == pageCount) {
        $(".page-next").addClass("page-disabled");
        $(".page-prev").removeClass("page-disabled");
    } else {
        $(".page-prev").removeClass("page-disabled");
        $(".page-next").removeClass("page-disabled");
    }
},

效果圖
 

!-- 表格 -->
        <div class="ics_box_v1 mb20 js-filter-box">
            <div class="box-hd">報表
                <a href="javascript:void(0);" οnclick="exportExcel()" class="ics_btn_v1 ics_btn_v1-blue noshadow font-12 fn-right ">導出</a>
            </div>
            <div class="box-bd">
                <table class="ics_table_v1 mb20">
                    <thead>
                    <tr>
                        <th>日期</th>
                        <th>顧問</th>
                    </tr>
                    </thead>
                </table>

                <!-- page -->
                <div class="ics_page_v1 txt-right">
                    <!-- start 總共頁碼（根據需求添加或刪除） -->
                <#--<span class="mr10 font-12">共 <em>40</em> 條 </span>-->
                    <!-- end 總共頁碼 -->
                    <!-- 前一頁 -->
                <#--<a class="page-prev page-disabled " href="# "></a>-->
                    <!-- 數字 -->
                <#--<a class="current " href="# ">1</a> <a href="# ">2</a>-->
                <#--<a href="# ">3</a> <a href="# ">4</a> <a href="# ">5</a>-->
                <#--<!-- 省略號 &ndash;&gt;-->
                <#--<span class="page-ellipsis ">...</span> <a href="# ">999</a>-->
                    <!-- 下一頁 -->
                <#--<a class="page-next " href="# "></a>-->

                    <!-- start 輸入頁面跳轉（根據需求添加或刪除） -->
                <#--<span class="ml15 ">跳轉</span>-->
                <#--<input type="text " class="ics_input_v1 ml10 mr10 " style="width:50px;height: 28px;line-height: 28px ">-->
                <#--<span>頁</span>-->
                <#--<a href="javascript:void(0);" class="current ml10">GO</a>-->
                    <!-- end 輸入頁面跳轉 -->
                </div>
            </div>
        </div>