基于Metronic的Bootstrap开发框架经验总结（2）

在上篇《基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理》介绍了Bootstrap开发框架的一些基础性概括，包括总体界面效果，以及布局、菜单等内容，本篇继续这一主题，介绍页面内容常用到的数据分页处理，以及Bootstrap插件JSTree的使用。在数据的界面显示当中，表格数据的展示以及分页是非常常见的处理操作，利用Bootstrap的样式布局，以及JQuery的Ajax数据处理，就能很好实现数据的动态展示和分页处理。

1、列表展示和分页处理

1）数据的列表展示

在很多页面里面，我们一般都需要对数据库记录进行列表展示并进行分页。

左侧的树列表下面小节介绍，右边就是我们一般的数据查询显示区域，分为查询内容和数据列表两部分，查询内容，我们一般放在一个表单里面进行处理，用户触发查询的时候，我们对事件进行处理，并从MVC后台的控制器里面请求对应的数据返回给页面前端，对数据进行显示和分页处理即可。

如菜单页面的查询代码如下所示。

          <form class="form-horizontal" id="ffSearch">            <div class="col-md-3 col-sm-3 col-xs-6">              <div class="form-group">                <label class="control-label col-md-4">显示名称</label>                <div class="col-md-8">                  <input name="WHC_Name" type="text" class="form-control">                </div>              </div>            </div>            <div class="col-md-3 col-sm-3 col-xs-6">              <div class="form-group">                <label class="control-label col-md-4">功能ID</label>                <div class="col-md-8">                  <input name="WHC_FunctionId" type="text" class="form-control">                </div>              </div>            </div>            <div class="col-md-3 col-sm-3 col-xs-6">              <div class="form-group">                <label class="control-label col-md-4">Web连接地址</label>                <div class="col-md-8">                  <input name="WHC_Url" type="text" class="form-control">                </div>              </div>            </div>            <div class="col-md-3 col-sm-3 col-xs-6">              <div class="form-group">                <label class="control-label col-md-4">Web菜单图标</label>                <div class="col-md-8">                  <input name="WHC_WebIcon" type="text" class="form-control">                </div>              </div>            </div>          </form>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：基于Metronic的Bootstrap开发框架经验总结（2）

关键词：