在前端界面编辑过程中，我们经常遇到需要进行分页处理的情况，很多博客都介绍了表格进行前后端分页处理的方法，本博客主要介绍非表格处理时(例如template)，使用Pagination处理前后端分页方法。
不管前端分页还是后端分页，bootstrap自带的Pagination组件能够简化处理的方法，通过自带的回调函数，可以快速获取当前页对应的页码，避免自己对“前一页”、“后一页”、以及页码点击事件进行处理。下面通过示例看一下。
在页面中，我们首先插入来自bootstrap的分页组件
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
在js页面中，我们对pagination事件进行处理其主要的逻辑代码为：
$(".pagination").pagination(totalData, { //totalData代表数据总数，比如查询数据库得到200条数据，同常定义为全局变量,
//由后台查询得到的个数决定。
callback:function(data){ //回调函数中的data表示，当前点击的页面，但是有一点需要注意，data的值永远比当前点击数小1
//比如，当前点击的2，则data返回的值为1，点击1时，返回值为0，
//需要我们后台对其中的逻辑关系进行处理
paginationClick(data); //回调函数的处理事件，点击“页码”时，触发事件的处理方法，包括前端处理方法或者后端处理方法
},
num_edge_entries: 1, //两侧显示的首尾分页的条目数
num_display_entries: 4, //连续分页主体部分显示的分页条目数
items_per_page:10 //每页显示数据的数量
});
对于前段分页还是后端分页，主要是看返回数据量的大小，如果数据量比较大的话，尽量采用后台分页，数据量比较小的话，采用前段分页，但对于pagination分页处理，基本上到此结束了，对于pagination里面的具体参数，大家可以搜索“pagination 分页”查看更详细的参数。对于前后端分页处理逻辑位于上面代码中的paginationClick(data)部分。
在后端分页时，我们将每页显示的条目数量，起始页的位置，查询条件传到后台，通过搜索，查询得到总的数据个数（需要赋值给‘totalData’，决定前端页面显示页码的个数），查询得到的数据内容（用于前端界面显示），注意与前端分页不同的是，这里的查询内容只返回查询页面的数据，个数为‘items_per_page’。
在前端分页处理时，与后端分页不同的是，我们只将查询条件传输到后台，通过搜索，查询全部符合条件的全部数据，一次性返回给前端（可以定义全局变量用于存储数据），在js中，我们对计算所有数据的数量，赋值给‘totalData’，pagination组件会自动计算出显示页码的数量，然后通过paginationClick（data）方法，计算每页要显示的数据，并渲染到前端界面。
对于前后台分页，pagination处理的方法及参数设置基本上相同，由于不同的项目，对数据的处理方式不同，这篇博客中，前后端分页的具体逻辑没有给出demo，只给出了一个自己理解的一个思路（个人理解），希望对大家有所帮助。