本文共 1664 字，大约阅读时间需要 5 分钟。

      在前端界面编辑过程中，我们经常遇到需要进行分页处理的情况，很多博客都介绍了表格进行前后端分页处理的方法，本博客主要介绍非表格处理时(例如template)，使用Pagination处理前后端分页方法。

    不管前端分页还是后端分页，bootstrap自带的Pagination组件能够简化处理的方法，通过自带的回调函数，可以快速获取当前页对应的页码，避免自己对“前一页”、“后一页”、以及页码点击事件进行处理。下面通过示例看一下。

在页面中，我们首先插入来自bootstrap的分页组件

 在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 //每页显示数据的数量               });

    在后端分页时，我们将每页显示的条目数量，起始页的位置，查询条件传到后台，通过搜索，查询得到总的数据个数（需要赋值给‘totalData’，决定前端页面显示页码的个数），查询得到的数据内容（用于前端界面显示），注意与前端分页不同的是，这里的查询内容只返回查询页面的数据，个数为‘items_per_page’。

    在前端分页处理时，与后端分页不同的是，我们只将查询条件传输到后台，通过搜索，查询全部符合条件的全部数据，一次性返回给前端（可以定义全局变量用于存储数据），在js中，我们对计算所有数据的数量，赋值给‘totalData’，pagination组件会自动计算出显示页码的数量，然后通过paginationClick（data）方法，计算每页要显示的数据，并渲染到前端界面。

    对于前后台分页，pagination处理的方法及参数设置基本上相同，由于不同的项目，对数据的处理方式不同，这篇博客中，前后端分页的具体逻辑没有给出demo，只给出了一个自己理解的一个思路（个人理解），希望对大家有所帮助。

转载地址：http://qfktn.baihongyu.com/