freemarker+bootstrap+pagehelper分页

1、引入依赖

<!--分页-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.12</version>
        </dependency>

 2、 aplication.properties配置

#pagehelper
pagehelper.helper-dialect=mysql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true

 3、controller层

// 列表分页
    @GetMapping("/findPage")
    public String findPage(Commodity commodity,
                                       @RequestParam(defaultValue = "1") Integer pageNum,
                                       @RequestParam(defaultValue = "10") Integer pageSize,
                                        ModelMap modelMap){
        PageInfo<Commodity> page = commodityService.findPage(commodity, pageNum, pageSize);
        modelMap.put("page",page);
        return "/commodity/commodity_list";
    }

4、service实现

 @Override
    public PageInfo<Commodity> findPage(Commodity commodity, Integer pageNum, Integer pageSize) {
        PageHelper.startPage(pageNum,pageSize);
        List<Commodity> list = commodityDao.getCommoditys(commodity);
        return PageInfo.of(list);
    }

 5、mapper

package org.mall.dao;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.mall.domain.Commodity;

import java.util.List;
@Mapper
public interface CommodityDao {
    //获取全部商品
    List<Commodity> findAll();

    //新增商品
    void insertCommodity(Commodity commodity);

    //修改商品
    void updateCommodity(Commodity commodity);

    //根据id获取商品
    Commodity findById(Integer id);

    //根据id删除商品
    void deleteById(Integer id);

    // 批量删除
    void deleteByIds(List<String> list);

    // 带条件查询分页
    List<Commodity> getCommoditys(Commodity commodity);

    // 条件搜索
    List<Commodity> getCommodityBySearch(@Param("search") String search);
}

6、mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="org.mall.dao.CommodityDao">
    <!--<resultMap id="BaseResultMap" type="org.mall.domain.Commodity">
        <result column="id" property="id" />
        <result column="name" property="name" />
        <result column="standard" property="standard" />
        <result column="temperature" property="temperature" />
        <result column="price" property="price" />
        <result column="description" property="description" />
    </resultMap>-->

    <sql id="Base_Column_List">
		id, name, standard, temperature, price, description,images
	</sql>

    <!--获取全部商品-->
    <select id="findAll" resultType="commodity">
        select
        <include refid="Base_Column_List" />
        from t_commodity
    </select>

    <!--新增商品-->
    <insert id="insertCommodity" parameterType="commodity">
        insert into t_commodity (name, standard, temperature, price, description,images)
        values (#{name}, #{standard}, #{temperature}, #{price}, #{description},#{images})
    </insert>

    <!--修改商品-->
    <update id="updateCommodity" parameterType="commodity">
		update t_commodity set
		name = #{name},
		standard = #{standard},
		temperature = #{temperature},
		price = #{price},
		description = #{description},
		images=#{images}
		where id = #{id}
	</update>

    <!--根据id获取商品-->
    <select id="findById" resultType="commodity" parameterType="int">
        select
        <include refid="Base_Column_List" />
        from t_commodity where id = #{id}
    </select>

    <!--根据id伤处商品-->
    <delete id="deleteById" parameterType="int">
		delete from t_commodity where id = #{id}
	</delete>

    <delete id="deleteByIds" parameterType="java.util.List">
        delete from t_commodity where 1>2
        or id in
        <foreach collection="list" item="item" open="(" separator="," close=")">
            #{item}
        </foreach>
    </delete>

    <select id="getCommoditys" resultType="commodity">
        select <include refid="Base_Column_List"/>
        from t_commodity
        <where>
            <if test="name != '' and name != null">
                <bind name="name" value="'%' + name + '%'"/>
                 and name like #{name}
            </if>
        </where>
    </select>
    <select id="getCommodityBySearch" resultType="commodity">
        select <include refid="Base_Column_List"/>
        from t_commodity
        <where>
            <if test="search!= null and search != ''">
                <bind name="search" value="'%'+search+'%'"/>
                and name like #{search}
            </if>
        </where>
    </select>
</mapper>

7、bootstrap+freemarker+pagehelper分页使用时遇到的问题:

如果有100或者更多页呢?一定会影响界面的美观,界面就显示分页就得了,哈哈

以下是我修改前的分页代码,就是上图显示的分页代码:

 <td colspan="7">
                        <ul class="pagination">
                            <li>
                               <a class="page-link" href="/commodity/findPage?pageNum=${1}&pageSize=${page.pageSize}">首页</a>
                            </li>
                            <#if (page.pageNum) lte 1>
                                <li class="disabled "><a class="page-link" href="#">上一页</a></li>
                            <#else>
                                <li>
                                    <a class="page-link" href="/commodity/findPage?pageNum=${(page.pageNum) -
                                    1}&pageSize=${page.pageSize}">上一页</a>
                                </li>
                            </#if>

                            <#list 1..page.pages as index>
                                <#if (page.pageNum) == index>
                                    <li class="page-item active "><a class="page-link" href="#">${index}</a>
                                    </li>
                                <#else>
                                    <#if index lte 10>
                                        <li>
                                             <a class="page-link" href="/commodity/findPage?pageNum=${index}&pageSize=${page.pageSize}">
                                                ${index}</a>
                                        </li>
                                    <#else>
                                    </#if>
                                </#if>
                            </#list>
                            <#if page.pageNum gte page.pages>
                                <li class="disabled "><a class="page-link" href="#">下一页</a></li>
                            <#else>
                                <li>
                                    <a class="page-link" href="/commodity/findPage?pageNum=${page.pageNum + 1}&pageSize=${page.pageSize}">下一页</a>
                                </li>
                            </#if>
                            <li>
                                <a class="page-link" href="/commodity/findPage?pageNum=${(page.pages)}&pageSize=${page.pageSize}">末页</a>
                            </li>

                        </ul>
                    </td>

参考下面代码进行修改: 

			<#--分页-->
                        <div class="col-md-12 column">
                            <ul class="pagination pull-right">
                            <#if currentPage lte 1>
                                <li class="disabled"><a href="#">上一页</a></li>
                            <#else>
                                <li><a href="/sell/seller/order/list?page=${currentPage - 1}&size=${size}">上一页</a></li>
                            </#if>
                            <#-- 下面注释的这段适合于总页数比较少的分页-->
                            <#-- <#list 1..productInfoPage.getTotalPages() as index >
                                 <#if currentPage == index>
                                     <li class="disabled"><a href="#">${index}</a></li>
                                 <#else>
                                     <li><a href="/sell/seller/order/list?page=${index}&size=${size}">${index}</a></li>
                                 </#if>
                             </#list>-->
 
 
                            <#-- 以下为带省略号分页 -->
                            <#--第一页-->
                            <#if (productInfoPage.getTotalPages() > 0)>
                                <li <#if currentPage == 1>class="disabled"</#if>><a href="/sell/seller/order/list?page=1&size=${size}" >1</a></li>
                            </#if>
 
                            <#--如果不只有一页-->
                            <#if (productInfoPage.getTotalPages() > 1)>
                            <#--如果当前页往前查3页不是第2页-->
                                <#if ((currentPage - 3) > 2)>
                                    <li><span class="text">…</span></li>
                                </#if>
 
                            <#--当前页的前3页和后3页-->
                                <#list (currentPage - 3)..(currentPage + 3) as index>
                                <#--如果位于第一页和最后一页之间-->
                                    <#if (index > 1) && (index < productInfoPage.getTotalPages())>
                                        <li <#if currentPage == index>class="disabled"</#if>><a href="/sell/seller/order/list?page=${index}&size=${size}" >${index}</a></li>
                                    </#if>
                                </#list>
 
                            <#--如果当前页往后查3页不是倒数第2页-->
                                <#if (currentPage + 3) < (productInfoPage.getTotalPages() - 1)>
                                    <li><span class="text">…</span></li>
                                </#if>
 
                            <#--最后页-->
                                <li <#if currentPage == productInfoPage.getTotalPages()>class="disabled"</#if>><a href="/sell/seller/order/list?page=${productInfoPage.getTotalPages()}&size=${size}" >${productInfoPage.getTotalPages()}</a></li>
                            </#if>
 
 
 
                            <#if currentPage gte productInfoPage.getTotalPages()>
                                <li class="disabled"><a href="#">下一页</a></li>
                            <#else>
                                <li><a href="/sell/seller/order/list?page=${currentPage + 1}&size=${size}">下一页</a></li>
                            </#if>
                            </ul>
                        </div>

 修改后的分页代码如下:

<td colspan="7">
                        <ul class="pagination">
                            <li>
                               <a class="page-link" href="/commodity/findPage?pageNum=${1}&pageSize=${page.pageSize}">首页</a>
                            </li>
                            <#if (page.pageNum) lte 1>
                                <li class="disabled "><a class="page-link" href="#">上一页</a></li>
                            <#else>
                                <li>
                                    <a class="page-link" href="/commodity/findPage?pageNum=${(page.pageNum) -
                                    1}&pageSize=${page.pageSize}">上一页</a>
                                </li>
                            </#if>
                            <#if page.pages gt 1>
                                <#--如果当前页往前查3页不是第2页-->
                                <#if ((page.pageNum - 3) > 2)>
                                    <li><span class="text">…</span></li>
                                </#if>
                                <#--当前页的前3页和后3页-->
                                <#list (page.pageNum  - 3)..(page.pageNum  + 3) as index>
                                <#--如果位于第一页和最后一页之间-->
                                    <#if page.pageNum == index>
                                        <li class="page-item active "><a class="page-link" href="#">${index}</a>
                                        </li>
                                    <#elseif (index > 1) && (index < page.pages)>
                                        <li>
                                            <a class="page-link" href="/commodity/findPage?pageNum=${index}&pageSize=${page.pageSize}">${index}</a>
                                        </li>
                                    </#if>
                                </#list>

                                <#--如果当前页往后查3页不是倒数第2页-->
                                <#if (page.pageNum + 3) < (page.pages - 1)>
                                    <li><span class="text">…</span></li>
                                </#if>
                            </#if>
                            <#if page.pageNum gte page.pages>
                                <li class="disabled "><a class="page-link" href="#">下一页</a></li>
                            <#else>
                                <li>
                                    <a class="page-link" href="/commodity/findPage?pageNum=${page.pageNum + 1}&pageSize=${page.pageSize}">下一页</a>
                                </li>
                            </#if>
                            <li>
                                <a class="page-link" href="/commodity/findPage?pageNum=${(page.pages)}&pageSize=${page.pageSize}">末页</a>
                            </li>

                        </ul>
                    </td>

 实现效果:

8、完整的页面代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>商品信息</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <#include "../common/common.ftl" />

</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/commodity/findPage">后台管理系统</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">商品管理</a></li>
            </ul>
        </div>
        <form id="search_form" class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input id="search" name="search" type="text" class="form-control" placeholder="搜索商品">
            </div>
            <button type="button" class="btn btn-default" onclick="searchCommodity()">搜索</button>
        </form>
    </div>
</nav>

<div class="page-content">
    <section id="featured" class="content-section">
        <div class="section-content">
            <div>
                <button id="add" type="button" class="btn btn-info" onclick="add()" style="position: relative;float: left;margin-bottom: 10px;">
                    添加
            </div>
        </div>
            <table class="table table-striped">
                <tr>
                    <td><input type="checkbox" id="all">全选</td>
                    <td>商品名称</td>
                    <td>商品规格</td>
                    <td>商品图片</td>
                    <td>温度</td>
                    <td>价格</td>
                    <td>商品描述</td>
                    <td colspan="2">操作</td>
                </tr>
                <#list page.list as item>
                    <tr>
                        <td><input type="checkbox" name="sub" value="${item.id}"></td>
                        <td>${(item.name)!}</td>
                        <td>${(item.standard)!}</td>
                        <td>
                            <#list item.images?split(",") as image>
                                <span><img src="${image!}" class="img-rounded" style="width: 140px;height: 140px;"></span>
                            </#list>
                        </td>
                        <td>${(item.temperature)!}</td>
                        <td>${(item.price)!}元</td>
                        <td>${(item.description)!}</td>
                        <td><button type="button" class="btn btn-warning" onclick="edit(${(item.id)})">
                                修改
                            </button>
                        </td>
                        <td><button type="button" class="btn btn-danger" onclick="deleteById('/commodity/deleteById?id=${(item.id)!}')">
                                删除
                            </button>
                        </td>
                    </tr>
                </#list>
                <tr>
                    <td>
                        <button type="button" class="btn btn-danger" onclick="del();" style="position: relative;float: left;margin-top: 18px;">
                            批量删除
                        </button>
                    </td>
                    <td colspan="6">
                        <ul class="pagination">
                            <li>
                               <a class="page-link" href="/commodity/findPage?pageNum=${1}&pageSize=${page.pageSize}">首页</a>
                            </li>
                            <#if (page.pageNum) lte 1>
                                <li class="disabled "><a class="page-link" href="#">上一页</a></li>
                            <#else>
                                <li>
                                    <a class="page-link" href="/commodity/findPage?pageNum=${(page.pageNum) -
                                    1}&pageSize=${page.pageSize}">上一页</a>
                                </li>
                            </#if>
                            <#if page.pages gt 1>
                                <#--如果当前页往前查3页不是第2页-->
                                <#if ((page.pageNum - 3) > 2)>
                                    <li><span class="text">…</span></li>
                                </#if>
                                <#--当前页的前3页和后3页-->
                                <#list (page.pageNum  - 3)..(page.pageNum  + 3) as index>
                                <#--如果位于第一页和最后一页之间-->
                                    <#if page.pageNum == index>
                                        <li class="page-item active "><a class="page-link" href="#">${index}</a>
                                        </li>
                                    <#elseif (index > 1) && (index < page.pages)>
                                        <li>
                                            <a class="page-link" href="/commodity/findPage?pageNum=${index}&pageSize=${page.pageSize}">${index}</a>
                                        </li>
                                    </#if>
                                </#list>

                                <#--如果当前页往后查3页不是倒数第2页-->
                                <#if (page.pageNum + 3) < (page.pages - 1)>
                                    <li><span class="text">…</span></li>
                                </#if>
                            </#if>
                            <#if page.pageNum gte page.pages>
                                <li class="disabled "><a class="page-link" href="#">下一页</a></li>
                            <#else>
                                <li>
                                    <a class="page-link" href="/commodity/findPage?pageNum=${page.pageNum + 1}&pageSize=${page.pageSize}">下一页</a>
                                </li>
                            </#if>
                            <li>
                                <a class="page-link" href="/commodity/findPage?pageNum=${(page.pages)}&pageSize=${page.pageSize}">末页</a>
                            </li>

                        </ul>
                    </td>
                   <td>
                        <button type="button" class="btn btn-orange" onclick="exportFile();" style="position: relative;float: left;margin-top: 18px;">
                            导出
                        </button>
                       <form class="form-horizontal" id="fileForm" method="post" enctype="multipart/form-data">
                               <input type="file" name="file" style=" position: relative;float: left;margin-top: 18px; margin-left: 10px;margin-right: -102px;"/>
                               <button type="button" class="btn btn-orange" onclick="importFile();" style="position: relative;float: left;margin-top: 18px;">
                                   导入
                               </button>
                       </form>
                    </td>
                </tr>
            </table>
        </div>
    </section>
</div>
<script>
    // 搜索
    function searchCommodity() {
        var name = $("#search").val();
        window.location.href="/commodity/search?search="+name;
    }
    // 导出商品信息
    function exportFile(){
        window.location.href="/exportFile";
    }

    function importFile(){
        var formData = new FormData($("#fileForm")[0]);
        $.ajax({
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/importExcel",//url
            data: formData,
            contentType: false, //必须
            processData: false,
            success: function (data) {
                if (data.success) {
                    layer.msg("提交成功!",
                        {icon:6,time:1000},
                        function(){
                            window.location.href="/commodity/findPage";
                        })
                }
            },
            error: function () {
                //my.alert("提交失败!");
            }
        });
    }


    function deleteById(url) {
        $.confirm({
            title: '删除商品',
            content: '你确认要把该商品删除吗?',
            type: 'red',
            icon: 'glyphicon glyphicon-question-sign',
            buttons: {
                ok: {
                    text: '确认',
                    btnClass: 'btn-red',
                    action: function() {
                        location.href = url; //指向下载资源(此处为目标文件的输出数据流)
                    }
                },
                cancel: {
                    text: '取消'
                }
            }
        });
    }

    // 跳转到添加界面
    function add() {
        window.location.href="/commodity/addCommodity";
    }

    function edit(id){
        window.location.href="/commodity/editCommodity?id="+id;
    }
    // 全选与全不选
    $("#all").on('click',function() {
        $("input[name='sub']").prop("checked", this.checked);
    });
    $("input[name='sub']").on('click',function() {
        var $subs = $("input[name='sub']");
        $("#all").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);
    });
    // 获取选中的商品id
    function getIds() {
        var ids = "";
        var checkClass = $("input[name='sub']:checked");
        checkClass.each(function() {
            ids+=$(this).val();
            ids+=",";
        });
        ids = ids.substr(0, ids.lastIndexOf(","));
        return ids;
    }
    // 批删
    function del() {
        var ids = getIds();
        if(ids.length != 0){
            $.confirm({
                title: '删除操作!',
                content: '你确定要删除选中的所有商品吗?',
                type: 'red',
                typeAnimated: true,
                icon: 'glyphicon glyphicon-question-sign',
                buttons: {
                    tryAgain: {
                        text: '删除',
                        btnClass: 'btn-red',
                        action: function(){
                            $.ajax({
                                url : "/commodity/delCommoditys", // 数据发送方式
                                type : "post", // 接受数据格式           
                                dataType : "json", // 要传递的数据
                                data : {"ids" : ids},
                                success : function(data) {
                                    if (data.success) {
                                        layer.msg("删除成功!",
                                            {icon:6,time:1000},
                                            function(){
                                                parent.location.reload()
                                            })
                                    }else{
                                        $.alert("删除失败!");
                                    }
                                }
                            });
                        }
                    },
                    closebtn: {
                        text: '取消',
                        close: function () {
                            text:'取消'
                        }
                    }

                }
            });
        }else {
            $.confirm({
                title: '提示!',
                content: '请选择您要删除的商品!',
                type: 'red',
                typeAnimated: true,
                icon: 'glyphicon glyphicon-question-sign',
                buttons: {
                    tryAgain: {
                        text: '确定',
                        btnClass: 'btn-red',
                        action: function(){
                        }
                    }
                }
            });
        }


    }

</script>
</body>
</html>

完整的项目代码git地址:https://github.com/Huanghengfeng/PersonProject.git

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值