分页3

http://www.cnblogs.com/ChrisLee2011/p/4288194.html

页面的HTML部分如下:

< div class ="tableContainer">
< input id ="currentPage" type ="hidden" value =" @ViewData[ "currentPage"] "/>
< input id ="totalPages" type ="hidden" value =" @ViewData["totalPages" ] " />
< table class ="table table-hover table-striped">
< thead>
< tr>
< th class ="col-md-4 text-center"> 乘车码 </th >
< th class ="col-md-4 text-center"> 订单号 </th >
< th class ="col-md-4 text-center"> 订单日期 </th >
</ tr>
</ thead>
< tbody>
@foreach ( var item in Model)
{
< tr>
< td> @item.BusNo </ td>
< td> @item.OrderId </ td>
< td> @item.OrderDate </ td>
</ tr>
}
</ tbody>
</ table>
< ul id ="example"></ ul>
</ div >

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

@ Scripts.Render( "~/bundles/bootstrap-paginator" )
< script type ="text/javascript">
$( ‘#example‘ ).bootstrapPaginator({
currentPage: $( ‘#currentPage‘ ).val(), //当前页
totalPages: $( ‘#totalPages‘ ).val(), //总页数
bootstrapMajorVersion: 3, //兼容Bootstrap3.x版本
tooltipTitles: function (type, page) {
switch (type) {
case "first" :
return "第一页" ;
case "prev" :
return "上一页" ;
case "next" :
return "下一页" ;
case "last" :
return "最后一页" ;
case "page" :
return page;
}
return "" ;
},
onPageClicked: function (event, originalEvent, type, page) {
$.get( ‘/Home/GetPaginationData‘ , { currentPage: page, pageSize:10 }, function (view) {
$( ‘#tableTest‘ ).html(view);
});
}
});
</ script >

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

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

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

时间: 2024-10-11 09:30:35

分页3的相关文章

python__Django 分页

自定义分页的类: #!/usr/bin/env python # -*- coding: utf-8 -*- # Created by Mona on 2017/9/20 from django.utils.safestring import mark_safe class Paginator: ''' 页码的格式依赖于bootstrap: 使用案例: from django.shortcuts import render,redirect,HttpResponse from app01.mod

ajax+分页

<!DOCTYPE html><html><head lang="zh-cn"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta http-equiv="X-UA-Compat

使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用.Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询.分页.排序.复选框.设置显示列.Card view视图.主从表显示.合并列.国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行.移动列位置等一些特殊的功能,插件可

优化LIMIT分页

在系统中需要分页的操作通常会使用limit加上偏移量的方法实现,同时加上合适的order by 子句.如果有对应的索引,通常效率会不错,否则MySQL需要做大量的文件排序操作. 一个非常令人头疼问题就是当偏移量非常大的时候,例如可能是limit 10000,20这样的查询,这是mysql需要查询10020条然后只返回最后20条,前面的10000条记录都将被舍弃,这样的代价很高.如果所有的页面被访问的频率相同,那么这样的查询平均需要访问半个表的数据.要优化这样的查询,要么实在页面中限制分页的数量,

Ajax实现无刷新分页

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解. 本文讲解 Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.PHP)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现原理

关于分页SQL的小总结

findPage 和findPageTotal条件分页中的条件 较为复杂点的关联查询 有取别名的 <select id="findPage" resultMap="MinOrderInfo" parameterType="map"> SELECT o.*,w.name buyName,w.MOBILE buyMobile,aa.name sellName,aa.MOBILE sellMobile,rs.CAR_BRAND_NAME c

webform:分页组合查询

一个简单的分页组合查询页面 /// <summary> /// 查询方法 /// </summary> /// <param name="tsql">SQL语句</param> /// <param name="hh">哈希表</param> /// <returns></returns> public List<Goods> Select(string un

TODO:数据库优化之分页

本文的例子是以MongoDB数据库为准,其它数据库各位也可以举一反三进行优化. 在MongoDB中分页使用 a.skip(n)跳过前n个匹配的文档: b.limit(m)返回m个结果,要是匹配的结果不到m个,则返回匹配数据量的结果,m是指定上限数量,而不是下限数量: c.sort({"name": 1,"address":-1}),1表示升序,-1表示降序. 使用skip跳过少量的文档还可以.但是数据量非常多的话,skip就会变得非常慢,每个数据库都会有这种情况,所

WebForm 分页与组合查询

1.封装实体类 2.写查询方法 //SubjectData类 public List<Subject> Select(string name) { List<Subject> list = new List<Subject>(); cmd.CommandText = "select *from Subject where SubjectName like @a "; cmd.Parameters.Clear(); cmd.Parameters.Add

easymall项目的商品删除,前台商品分页,商品详情,购物车模块

简单的挑选一下昨天所学的重点知识模块,以备后续的复习 一.购物车模块1.1购物车两种实现的区别:!!!!!!!! 用session保存  缺点:浏览器关闭,session失效时保存在session中购物信息将会消失  后续优化,将购买的信息除了保存在session中以外,还要将购物的信息保存在cookie中,这样  就解决了浏览器关闭购买商品信息丢失的问题(但是解决不了跟换电脑信息丢失的问题)  优点:不用操作数据库,可以减少数据库访问压力 数据库中:  缺点:只用登录的用户才能添加购物车