（血和淚的成果）使用PageHelper分頁外掛進行後臺分頁

小潘東發表於2017-12-14

前些天按照視訊裡講的做一個分頁功能，可是不知道什麼原因在頁面就是不顯示資料。昨天碰巧發現了一個分頁外掛，只需一些設定就可以完成分頁，非常方便。不過由於是新手，其中遇到了很多很多麻煩，不過幸好得到大神的幫助，最終完成了功能，非常感謝他十分耐心地幫我，給你一個麼麼噠(づ￣ 3￣)づ
沒想到做一個小小的分頁功能也有這麼多的不懂的地方，感覺要學的東西太多太多，加油努力學習吧~

首先給出專案Github地址：Mybatis通用分頁外掛
然後按步驟給出各部分程式碼（其他無關程式碼和配置檔案省略）

一、SqlMapConfig.xml

此處要匯入兩個jar包：pagehelper-5.0.0.jar和jsqlparser-0.9.5.jar

<!-- 配置分頁外掛 -->
<plugins>
    <plugin interceptor="com.github.pagehelper.PageHelper">
        <!-- 指定資料庫方言 -->
        <property name="dialect" value="mysql"/>
    </plugin>
</plugins>
複製程式碼

二、po

Country.java

public class Country {
    private Integer id;
    private String countryname;
    private String countrycode;

    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getCountryname() {
        return countryname;
    }
    public void setCountryname(String countryname) {
        this.countryname = countryname == null ? null : countryname.trim();
    }
    public String getCountrycode() {
        return countrycode;
    }
    public void setCountrycode(String countrycode) {
        this.countrycode = countrycode == null ? null : countrycode.trim();
    }
    @Override
    public String toString() {
        // return (this.getId()+" "+this.getCountryname()+" "+this.getCountrycode());
        return "Country [id=" + id +", countryname=" + countryname + ", countrycode=" + countrycode + "]";
    }
}
複製程式碼

EasyUIDataGridResult.java

public class EasyUIDataGridResult {
    // easyUI dataGrid 返回結果封裝
    Long total;    // 總的記錄數
    List<?> rows;  // 資料集

    public Long getTotal() {
        return total;
    }
    public void setTotal(Long total) {
        this.total = total;
    }
    public List<?> getRows() {
        return rows;
    }
    public void setRows(List<?> rows) {
        this.rows = rows;
    }
}
複製程式碼

三、service

CountryService.java

public interface CountryService {
    public EasyUIDataGridResult getCountryList(int page, int rows);
}
複製程式碼

CountryServiceImpl.java

@Service
public class CountryServiceImpl implements CountryService{
    @Autowired
    private CountryMapper countryMapper;

    public EasyUIDataGridResult getCountryList(int page, int rows) {

        //分頁處理
        PageHelper.startPage(page, rows);

        //查詢結果
        CountryExample example = new CountryExample();
        List<Country> list = countryMapper.selectByExample(example);

        //獲取分頁資訊
        PageInfo<Country> info = new PageInfo<>(list);
        EasyUIDataGridResult result = new EasyUIDataGridResult();
        long total = info.getTotal();

        //封裝分頁資訊
        List<Country> row = info.getList();
        result.setRows(row);
        result.setTotal(total);
        return result;
    }
}
複製程式碼

四、controller

CountryController.java

@Controller
public class CountryController {
    @Autowired
    private CountryService countryService;

    @RequestMapping("/country/list")
    @ResponseBody
    private EasyUIDataGridResult getItemList(Integer page, Integer rows){
        EasyUIDataGridResult countrylists = countryService.getCountryList(page,rows);
        return countrylists;
    }
}
複製程式碼

五、springmvc.xml

在原來的基礎上增加json convertors，以便將List集合轉換成json物件，可以使用fastjson或者jackson庫，二者擇其一就好 注意Jar的版本，我選擇的是jackson-core-2.8.7.jar jackson-databind-2.8.7.jar jackson-annotations-2.8.7.jar，三者缺一不可，而且不同的版本可能會導致一些異常

<mvc:annotation-driven>
    <mvc:message-converters>
        <bean class="org.springframework.http.converter.StringHttpMessageConverter"/>
        <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
    </mvc:message-converters>
</mvc:annotation-driven>
複製程式碼

六、jsp

countryList.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
    <head>
        <title>列表分頁展示</title>
        <!--必須引入jQuery和easyUI庫-->
        <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.4.1/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.4.1/themes/icon.css" />
        <link rel="stylesheet" type="text/css" href="../css/taotao.css" />
        <script type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="../js/common.js"></script>
    </head>

    <body>
        <table id="dg"></table>
    </body>
    
    <script>
        $(document).ready(function () {
            $('#dg').datagrid({
                url:'/country/list',
                pagination: true,
                columns:[[
                    {field:'id',title:'id',width:100},
                    {field:'countryname',title:'國家名稱',width:100,align:'center'},
                    {field:'countrycode',title:'國家程式碼',width:100,align:'center'}
                ]]
            });

        });
    </script>
</html>
複製程式碼

最後成果如下所示~

（血和淚的成果）使用PageHelper分頁外掛進行後臺分頁

相關文章