bootstrap中，使用Pagination处理前后端分页

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

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

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

  

    

      
        «
      
    
    
1
    
2
    
3
    
4
    
5
    

      
        »
      
    
  

 在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，只给出了一个自己理解的一个思路（个人理解），希望对大家有所帮助。