发布于 2016-08-21 14:39:31 | 69 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


这篇文章主要为大家详细介绍了Bootstrap Paginator分页插件使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下

最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能。

首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator的js文件。其中网上搜到,貌似jquery必须要1.8版本以上,这个我没有亲自去测试看过。于是视图的文件引用便:


<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

然后,分页的功能当然是一个基于Ajax的局部刷新才能够吸引我们,当然这个便需要jquery的支持。之前自己搞的都是EasyUI的分页,这次也应该有点不同。


<script>
 $(function () {
 var carId = 1;
 $.ajax({
 url: "/OA/Setting/GetDate",
 datatype: 'json',
 type: "Post",
 data: "id=" + carId,
 success: function (data) {
 if (data != null) {
  $.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json
  $("#list").append('<table id="data_table" class="table table-striped">');
  $("#list").append('<thead>');
  $("#list").append('<tr>');
  $("#list").append('<th>Id</th>');
  $("#list").append('<th>部门名称</th>');
  $("#list").append('<th>备注</th>');
  $("#list").append('<th> </th>');
  $("#list").append('</tr>');
  $("#list").append('</thead>');
  $("#list").append('<tbody>');
  $("#list").append('<tr>');
  $("#list").append('<td>' + item.Id + '</td>');
  $("#list").append('<td>' + item.Name + '</td>');
  $("#list").append('<td>备注</td>');
  $("#list").append('<td>');
  $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
  $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');
  $("#list").append('</td>');
  $("#list").append('</tr>');
  $("#list").append('</tbody>');

  $("#list").append('<tr>');
  $("#list").append('<td>内容</td>');
  $("#list").append('<td>' + item.Message + '</td>');
  $("#list").append('</tr>');
  $("#list").append('</table>');
  });
  var pageCount = eval("(" + data + ")").pageCount; //取到pageCount的值(把返回数据转成object类型)
  var currentPage = eval("(" + data + ")").CurrentPage; //得到urrentPage
  var options = {
  bootstrapMajorVersion: 2, //版本
  currentPage: currentPage, //当前页数
  totalPages: pageCount, //总页数
  itemTexts: function (type, page, current) {
  switch (type) {
  case "first":
   return "首页";
  case "prev":
   return "上一页";
  case "next":
   return "下一页";
  case "last":
   return "末页";
  case "page":
   return page;
  }
  },//点击事件,用于通过Ajax来刷新整个list列表
  onPageClicked: function (event, originalEvent, type, page) {
  $.ajax({
  url: "/OA/Setting/GetDate?id=" + page,
  type: "Post",
  data: "page=" + page,
  success: function (data1) {
   if (data1 != null) {
   $.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json
   $("#list").append('<table id="data_table" class="table table-striped">');
   $("#list").append('<thead>');
   $("#list").append('<tr>');
   $("#list").append('<th>Id</th>');
   $("#list").append('<th>部门名称</th>');
   $("#list").append('<th>备注</th>');
   $("#list").append('<th> </th>');
   $("#list").append('</tr>');
   $("#list").append('</thead>');
   $("#list").append('<tbody>');
   $("#list").append('<tr>');
   $("#list").append('<td>' + item.Id + '</td>');
   $("#list").append('<td>' + item.Name + '</td>');
   $("#list").append('<td>备注</td>');
   $("#list").append('<td>');
   $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
   $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');
   $("#list").append('</td>');
   $("#list").append('</tr>');
   $("#list").append('</tbody>');

   $("#list").append('<tr>');
   $("#list").append('<td>内容</td>');
   $("#list").append('<td>' + item.Message + '</td>');
   $("#list").append('</tr>');
   $("#list").append('</table>');
   });
   }
  }
  });
  }
  };
  $('#example').bootstrapPaginator(options);
 }
 }
 });
 })
</script>

而在视图的主体部分便有两个div,一个用来呈现数据列表,一个用来放置选择页面的导航。


<div class="span9">
 <label>部门列表</label>
 <hr />
 <div id="list"></div>

 <div id="example"></div>
 </div>

而后台这个GetDate的方法就像下面这样:


public ActionResult GetDate(int id, int? page)
 {
 int pageIndex = page ?? 1;//当前页
 const int pageSize = 2;//这里用来设置每页要展示的数据数量,建议把这个写到web.config中来全局控制
 //获取需要展示的部门数据
 IEnumerable<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, x => x.Id!=null, x=>x.Id);
 //得到数据的条数
 int rowCount = list.Count();
 //通过计算,得到分页应该需要分几页,其中不满一页的数据按一页计算
 if(rowCount%pageSize!=0)
 {
 rowCount = rowCount / pageSize + 1;
 }
 else
 {
 rowCount = rowCount / pageSize;
 }

 //转成Json格式
 var strResult = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" + JsonConvert.SerializeObject(list) + "}";
 return Json(strResult, JsonRequestBehavior.AllowGet);
 }

这个方法还是有点缺陷的,可以写的更加完美,就好像上面那个pageSize这个可以通过读取配置文件web.config来全局修改,这样管理起来也方便,另外对于页面这种属性:页码,当前页,数据数量等等的信息,可以做一个类来存储,如果网站的项目比较大的话,这样更加方便我们去更改自己的代码。

最后显示的效果如下图:



相关阅读 :
Bootstrap Paginator分页插件使用方法详解
bootstrap-paginator 分页插件使用示例
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
BootStrap中Table分页插件使用详解
Bootstrap Table使用方法详解
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
JS组件Bootstrap Table使用方法详解
Bootstrap树形控件使用方法详解
JS组件Bootstrap Select2使用方法详解
Bootstrap表格使用方法详解
Bootstrap表单使用方法详解
bootstrap输入框组件使用方法详解
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务