Bootstrap表格分页

最近在学习Bootstrap的分页,有一种方法用“Bootstrap-Paginator”的东西来做。

先预览一下:

为了能够局部刷新页面,我创建了一个PartialView

页面的HTML部分如下:

 1 < div class ="tableContainer">
 2     < input id ="currentPage" type ="hidden" value =" @ViewData[ "currentPage"] "/>
 3     < input id ="totalPages" type ="hidden" value =" @ViewData["totalPages" ] " />
 4     < table class ="table table-hover table-striped">
 5         < thead>
 6             < tr>
 7                 < th class ="col-md-4 text-center"> 乘车码 </th >
 8                 < th class ="col-md-4 text-center"> 订单号 </th >
 9                 < th class ="col-md-4 text-center"> 订单日期 </th >
10             </ tr>
11         </ thead>
12         < tbody>
13             @foreach ( var item in Model)
14             {
15                 < tr>
16                     < td> @item.BusNo </ td>
17                     < td> @item.OrderId </ td>
18                     < td> @item.OrderDate </ td>
19                 </ tr>
20             }
21         </ tbody>
22     </ table>
23     < ul id ="example"></ ul>
24 </ div >

页面的JavaScript部分如下:(此处需要引用插件bootstrap-paginator,具体的使用方法也在官网能看到,这里就不再详述)

 1 @ Scripts.Render( "~/bundles/bootstrap-paginator" )
 2 < script type ="text/javascript">
 3     $( ‘#example‘ ).bootstrapPaginator({
 4         currentPage: $( ‘#currentPage‘ ).val(),   //当前页
 5         totalPages: $( ‘#totalPages‘ ).val(),     //总页数
 6         bootstrapMajorVersion: 3,               //兼容Bootstrap3.x版本
 7         tooltipTitles: function (type, page) {
 8             switch (type) {
 9                 case "first" :
10                     return "第一页" ;
11                 case "prev" :
12                     return "上一页" ;
13                 case "next" :
14                     return "下一页" ;
15                 case "last" :
16                     return "最后一页" ;
17                 case "page" :
18                     return page;
19             }
20             return "" ;
21         },
22         onPageClicked: function (event, originalEvent, type, page) {
23             $.get( ‘/Home/GetPaginationData‘ , { currentPage: page, pageSize:10 }, function (view) {
24                 $( ‘#tableTest‘ ).html(view);
25             });
26         }
27     });
28 </ script >

上面的“#tableTest”是一个div,是< div class ="tableContainer">的父节点,在父页面中占位,就是说当页面数据返回将刷新整个PartialView,后台是一个GET,如下:

 1 public ActionResult GetPaginationData( int currentPage = 1, int pageSize = 10)
 2         {
 3             using (var context = new TestEntities ())
 4             {
 5                 int count;
 6                 var q = (from a in context.Tickets
 7                          join b in context.Order on a.OrderId equals b.Id
 8                          select new TableItem
 9                          {
10                              BusNo = a.BusNumber,
11                              OrderId = b.Id,
12                              OrderDate = b.OrderDateTime,
13                          }).Pagination(currentPage, pageSize, out count);
14                 var data = q.ToList();
15                 ViewData[ "totalPages" ] = count / pageSize + 1; //计算分页后总的页面数
16                 ViewData[ "currentPage" ] = currentPage;  //当前页码
17                 return PartialView("~/Views/Home/OrderList.cshtml" ,data);
18             }
19         }

其中的Pagination扩展函数用于数据库分页,请参考我的另外一篇博文 “Entity Framework 分页处理

时间: 2024-10-09 12:51:48

Bootstrap表格分页的相关文章

实现表格分页

由于工作需要,经常在开发中需要实现表格分页这种特效,目的的为提升用户体验,减少大数据渲染数量. 分页的分两种,一种是要和服务器交互,另一种是一次性拿到所有数据,在本地做分页处理.本次主要谈论第二种. 分页原理很简单,无非就是数组切片. 最关键是这两句: var startRow = (currentPage - 1) * pageSize;  //currentPage 为当前页,pageSize为每页显示的数据量var endRow = currentPage * pageSize -1: 比

基于Vue.js的表格分页组件

BootPage组件简介 其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能,我便在这里分享一下,大家自觉填坑咯. 如需高大上的组件,可以移步Vue官方组件库:https://github.com/vuejs/awesome-vue#libraries--plugins BootPage是一款支

Vue.js的表格分页组件

转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋可以移步我的上一篇文章<浅谈Vue.js>了解一下. BootPage组件简介 其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件

Bootstrap表格

一.Bootstrap表格简介: 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格. ?  .table:基础表格 ?  .table-striped:斑马线表格 ?  .table-bordered:带边框的表格 ?  .table-hover:鼠标悬停高亮的表格 ?  .table-condensed:紧凑型表格 ?  .table-responsive:响应式表格 在使用Bootstrap的表格过程中,只需要添加对

JS表格分页组件:fupage的设计思路和具体用法(未来考虑开源,争取在2015年)

一.背景         之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现.    回到武汉工作后,我自己利用业余实践完善自己的官网,从前端到后端,都是自己一个人亲自搞定.    第1个分页的需求是,文章下方的评论,异步加载.第2个需求是,表格管理,比如后台管理系统,经常需要列出user.log等表的记录.   二.实例 <table class="table tab

如何用angularjs制作一个完整的表格之二__表格分页功能

接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""

jQuery动态生成Bootstrap表格

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

Bootstrap 表格 笔记

Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody> 表格主体中的表格行的容器元素(<tr>). <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>). <td> 默认

使用KnockoutJs+Bootstrap实现分页

[后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页 一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端.在做的过程中,遇到一个问题——如何使用KnockoutJs来完成分页的功能.在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用KnockoutJs+Bootstrap来实现数据的分页显示. 二.使用KnockoutJs实现分页 这里采用了两种方式来实现分页,第一种是