在上篇基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理，介绍了Bootstrap开发框架的一些基础性概括，包括总体界面效果，以及布局、菜单等内容，本篇继续这一主题，介绍页面内容常用到的数据分页处理，以及Bootstrap插件JSTree的使用。
在数据的界面显示当中，表格数据的展示以及分页是非常常见的处理操作，利用Bootstrap的样式布局，以及JQuery的Ajax数据处理，就能很好实现数据的动态展示和分页处理。
1、列表展示和分页处理1）数据的列表展示
在很多页面里面，我们一般都需要对数据库记录进行列表展示并进行分页。
左侧的树列表下面小节介绍，右边就是我们一般的数据查询显示区域，分为查询内容和数据列表两部分，查询内容，我们一般放在一个表单里面进行处理，用户触发查询的时候，我们对事件进行处理，并从MVC后台的控制器里面请求对应的数据返回给页面前端，对数据进行显示和分页处理即可。
如菜单页面的查询代码如下所示。
<form> <div> <div> <label>显示名称</label> <div> <input type="text"> </div> </div> </div> <div> <div> <label>功能ID</label> <div> <input type="text"> </div> </div> </div> <div> <div> <label>Web连接地址</label> <div> <input type="text"> </div> </div> </div> <div> <div> <label>Web菜单图标</label> <div> <input type="text"> </div> </div> </div> </form>
我们在页面的JS代码里面，处理页面初始化后，对数据进行查询的处理操作，如下脚本所示。
//页面初始化 $(function () { initJsTree(); //初始化树 BindEvent(); //绑定事件处理 Search(currentPage);//初始化第一页数据 InitDictItem(); //初始化字典信息 });
而数据的显示部分，HTML代码如下所示。主要就是显示了表头内容，表格的主体内容grid_body则有脚本动态构建并显示
<table cellpadding="0" cellspacing="0"> <thead> <tr> <th><input type="checkbox"></th> <th>显示名称</th> <th>排序</th> <th>功能ID</th> <th>菜单可见</th> <th>Web连接地址</th> <th>Web菜单图标</th> <th>系统编号</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> <div> <ul></ul> </div>
而数据的显示，是在页面准备完成后，通过Search脚本函数进行处理，处理的时候，先序列号表单的条件和分页的条件信息，传入MVC控制器，获取对应的列表数据，在界面上进行动态绑定即可完成整个处理过程了。具体代码截图如下所示。
而其中的代码
tr += getActionHtml(item.ID);
则是通过脚本生成一些操作按钮，界面如下所示。
2）数据分页处理
我们页面显示的数据一般不是固定的记录，因此分页也是很必要的处理，可以提高性能，也可以提高用户的友好体验，其中的数据分页是采用了Bootstrap的插件Bootstrap Paginator进行处理的。这个控件用的很多，是一个很强大的分页插件。
Bootstrap Paginator它的GitHub代码地址为：https://github.com/lyonlai/bootstrap-paginator
该控件使用的时候，引入Jquery和Bootstrap样式和类库后，通过下面的代码行即可添加使用。
<script src="https://www.jb51.net/js/bootstrap-paginator.min.js"></script>
该控件分页可以通过处理page-clicked和page-changed事件进行实现。
分页展示内容，我们通过在HTML代码里面添加一个DIV进行，声明一个ID为grid_paging的UL元素，代码如下所示。
<div> <ul></ul> </div>
然后具体的JS里面处理代码如下所示。
在MVC的后台，我们需要获取用户在前端页面传入的分页条件和表单数据条件，这样我们就可以根据这些参数，获取到对应的数据返回给客户端了。
由于这些处理都是很通用的，因此我们可以放到基类控制器进行处理，如果需要特殊化处理，再在子类控制器里面重写分页函数FindWithPager即可。