利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力

在Web显示的时候我们经常会遇到分页显示,而网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据,大大简化了带宽的压力。先说下思路,无非就是异步执行ajax 把新列表所需要的数据用json格式返回来,输出table,你可以输出ui li(输出效率高) 在页面上。

效果图:
 
Html代码:


代码如下:

设置它们的Class = "page" 以便于给它们增加Click事件操作分页
<div id="showPage" style="width: 650px; margin: 0 auto; display: none" class="pages">
<div style="float: left">
<a id="first" class="pages">首页</a>
<a id="prev" class="pages">上页</a>
<a id="next" class="pages">下页</a>
<a id="last" class="pages">尾页</a>
跳转到第<input type="text" id="txtGoPage" style="width: 45px; height: 15px; border: 1px solid" />

</div>
<div style="margin: 0; float: left">
<input type="button" class="pages btn btn-info" id="go" value="跳转" />
共<span id="SumCount"></span> 条数据,每页<span id="ItemCount"></span> 条,
当前<span id="Index"></span>/<span id="PageCount"></span>页
</div>
</div>
用下面的div输出返回的结果
<div id="divBadProductInfo"></div>

Css代码:


代码如下:

/*分页*/
.pages {
cursor: pointer;
text-align: center;
margin: 0 auto;
padding-right: 0px;
padding-bottom: 2px;
padding-top: 2px;
font-family: verdana, helvetica, arial, sans-serif;
}

.pages a {
border-right: 1px solid;
padding-right: 6px;
border-top: 1px solid;
padding-left: 6px;
padding-bottom: 0px;
overflow: hidden;
border-left: 1px solid;
line-height: 20px;
margin-right: 2px;
padding-top: 0px;
border-bottom: 1px solid;
height: 30px;
}

.pages a {
border-left-color: #e6e7e1;
border-bottom-color: #e6e7e1;
color: #09c;
border-top-color: #e6e7e1;
background-color: #fff;
border-right-color: #e6e7e1;
}

.pages a:hover {
text-decoration: none;
border-left-color: #09c;
border-bottom-color: #09c;
border-top-color: #09c;
border-right-color: #09c;
}

.pages a.next {
border-left-color: #09c;
border-bottom-color: #09c;
border-top-color: #09c;
border-right-color: #09c;
}

JS代码:

引入: <script src="assets/js/jquery-1.8.2.min.js"></script>//可以为其他版本


代码如下:

$(document).ready(function ()
{
//检索条件
var search = $("#txtFactroy").val() + "_" + $("#txtTimeSelect").val()
+ "_" + $("#txtPinfan").val() + "_" +
$('input[type="checkbox"][name="option1"]:checked').val();
$.ajax({
type: "post",<span style="color:#ff0000;">//回传格式
url: "ResponseHandler.ashx"//回传到一般处理程序中处理//回传参数表示请求的是第几页,encodeURIComponent 格式化中文以防乱码
data: "BadProductWhere=" + encodeURIComponent(search) + "&currPage=1",
datatype: "json",//把返回来的数据 json
async: false,//禁止使用浏览器缓存
success: function (returnData, textstatus, xmlhttprequest)
{
$("#showPage").css('display', 'block');//显示分页
$("#divBadProductInfo").html(returnData.split('_')[0]);//返回值分割显示
var page = returnData.split('_')[1].split(',');
$("#SumCount").text(page[0]);//共多少条数据
$("#ItemCount").text(page[1]);//每页多少条数据
$("#Index").text(page[2]);//当前页
$("#PageCount").text(page[3]);//共多少页 }
});
//清除转向页面
$("#txtGoPage").val("");

//分页操作动作
$(".pages").click(function () {
//总页数大于1的情况下上下首末页可用
if (parseFloat($("#PageCount").html()) > 1) {
//取得控件类型是ID还是class
var type = $(this).attr("id");
//取得当前是多少页
var thisindex = $("#Index").text();
var search = $("#txtFactroy").val() + "_" + $("#txtTimeSelect").val()
+ "_" + $("#txtPinfan").val() + "_" +
$('input[type="checkbox"][name="option1"]:checked').val();
switch (type) {
case 'first':
{
$("#txtGoPage").val("");
badpageindex = 1;
BadPageIndex(1, search);//Ajax 回传函数
return;
}
case 'prev':
{
$("#txtGoPage").val("");
badpageindex = parseInt(thisindex) - 1;
if (badpageindex < 1) return;
BadPageIndex(badpageindex, search);
return;
}
case 'next':
{
$("#txtGoPage").val("");
badpageindex = parseInt(thisindex) + 1;
if (badpageindex > parseInt($("#PageCount").html())) return;
else
BadPageIndex(badpageindex, search);
return;
}
case 'last':
{
var max = parseInt($("#PageCount").html());
$("#txtGoPage").val("");
badpageindex = max;
BadPageIndex(max, search);
return;
}
case 'go':
{
var _go = $("#txtGoPage").val();
badpageindex = _go;
BadPageIndex(_go, search);
return;
}
}
}
})
});

代码如下:

var badpageindex;
//index,页面索引例如1,2,3
//BadProductWhere 查询条件
function BadPageIndex(index, searchwhere) {
$.ajax({
type: "post",
url: "ResponseHandler.ashx",
data: "BadProductWhere=" + encodeURIComponent(searchwhere) + "&currPage=" + index,
datatype: "json",
async: false,
success: function (returnData, textstatus, xmlhttprequest) {
$("#divDisplay").css('display', 'none');
$("#showPage").css('display', 'block');
$("#divBadProductInfo").html(returnData.split('_')[0]);
var page = returnData.split('_')[1].split(',');
$("#SumCount").text(page[0]);
$("#ItemCount").text(page[1]);
$("#Index").text(page[2]);
$("#PageCount").text(page[3]);
},
error: function () {
alert("服务错误");
}
});

}

C# 代码:(ResponseHandler.ashx)


代码如下:

/// <summary>
/// 每页显示条数
/// </summary>
private int pageSize = 20;
StringBuilder sbBadProductInfo = new StringBuilder();
if (!string.IsNullOrEmpty(context.Request["BadProductWhere"]) &&
!string.IsNullOrEmpty(context.Request["currPage"]))
{
#region // B品标题信息
sbBadProductInfo.Append(@"<div class='row-fluid'>
<div class='span12 widget'><div class='widget-header'>
<span class='title'>
<i class='icol-blog'></i>B品箱单信息
</span>
</div>");
sbBadProductInfo.Append(@"<div class='widget-content summary-list'>
<div class='row-fluid' style='padding-top: 2px;'>
<div class='span12 section'>
<table class='table table-bordered table-striped'>
<thead>
<tr>
<th>箱单编号</th>
<th>装箱生成日期</th>
<th>工厂名称</th>
<th>装箱品番</th>
<th>装箱箱号</th>
<th>装箱件数</th>
<th>仓库确认</th>
<th>出库确认人</th>
<th>出库日期</th>
<th>查看明细</th>
</tr>
</thead><tbody>");
#endregion
List<bstate_view> lstGetBadProductData = (from p in lstGetBadProductData
where !string.IsNullOrEmpty(p.出库确认人) && p.出库日期 != null
select p).ToList<bstate_view>();
string pageInfo = lstGetBadProductData.Count() + "," + pageSize + "," + context.Request["currPage"] +
"," + (lstGetBadProductData.Count() % 20 == 0 ? (lstGetBadProductData.Count() / 20) :
(lstGetBadProductData.Count() / 20 + 1));
List<bstate_view> lstGetBadItemData = (lstGetBadProductData.Count > pageSize ?
lstGetBadProductData.Skip(int.Parse(context.Request["currPage"]) == 1 ? 0 :
pageSize * (int.Parse(context.Request["currPage"]) - 1)).Take(pageSize)
: lstGetBadProductData).ToList<bstate_view>();
#region ==>B品箱单信息
foreach (var item in lstGetBadItemData)
{
var cssName = rowCount % 2 == 0 ? "warning" : "error";
sbBadProductInfo.Append(@"<tr class='" + cssName + "'>");
sbBadProductInfo.Append(@"<td>" + item.箱单编号 + "</td>");
sbBadProductInfo.Append(@"<td>" + item.装箱生成日期 + "</td>");
sbBadProductInfo.Append(@"<td>" + item.工厂名称 + "</td>");
sbBadProductInfo.Append(@"<td>" + item.装箱品番 + "</td>");
sbBadProductInfo.Append(@"<td>" + item.装箱箱号 + "</td>");
sbBadProductInfo.Append(@"<td>" + item.装箱件数 + "</td>");
sbBadProductInfo.Append(@"<td>" + item.仓库确认 + "</td>");
sbBadProductInfo.Append(@"<td>" + item.出库确认人 + "</td>");
sbBadProductInfo.Append(@"<td>" + item.出库日期 + "</td>");
sbBadProductInfo.Append(@"<td><input type='button' class='btn btn-primary'
style='width: 80px; height: 30px;' value='查看明细'");
sbBadProductInfo.Append(@" onclick='OpenBadInfo(" + item.箱编号 + ");'/></td></tr>");
rowCount++;
}
sbBadProductInfo.Append(@"</tbody></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>");
#endregion

context.Response.Write(sbBadProductInfo.ToString() + "_" + pageInfo);
context.Response.End();

分页效果:


(0)

相关推荐

  • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

    原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex

  • jquery插件pagination实现无刷新ajax分页

    1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代码 /** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version

  • MVC+jQuery.Ajax异步实现增删改查和分页

    本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; usin

  • laypage前端分页插件实现ajax异步分页

    本文实例为大家分享了laypage前端分页插件,ajax异步分页,获取json数据实现无刷新分页,供大家参考,具体内容如下 function GetList(pageIndex) { var _this = "" var clone_this = ""; _this = $(".BindDataList");//数据列表容器, clone_this = _this.clone(true); var pageSize = 25;//每页展示的条数

  • jquery+css3打造一款ajax分页插件(自写)

    最近公司的项目将好多分页改成了ajax的前台分页 以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果 如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现 css3的动画本来就是帮我们取代js中这部分动画代码的 使js更纯粹地去实现逻辑 效果图如下: 调用代码如下: 包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便 <script type="text/javascript"> var

  • 分享精心挑选的12款优秀jQuery Ajax分页插件和教程

    Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能.我们一起来看看下面这些优秀的分页插件. 1.Client-side jQuery pagination plugin : jPages jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等. 浏览详情  在线演示 2. jPaginate: A Fancy jQuery Pagination Plugin jPa

  • jQuery ajax分页插件实例代码

    推荐阅读:jQuery插件开发精品教程让你的jQuery提升一个台阶 既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述.介绍也 比不上代码来得实在.) 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: , preText: "pre", nextText: "next", firstText: &quo

  • jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页

    ******生成js分页脚****** ****没剑(2008-03-05)**** 修改日期:2008-3-12 添加两个参数:displaynum,displaylastNum可以自由定制显示的页码数量 参数: pagesize:10 //每页显示的页码数 ,count:0 //数据条数 ,css:"mj_pagefoot" //分页脚css样式类 ,current:1 //当前页码 ,displaynum:7 //中间显示页码数 ,displaylastNum:5 //最后显示的

  • 使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    先给大家展示下运行效果图:  1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+to

  • PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用

    jPaginate是基于jQuery的动感滚动分页插件,它的表现形式是像分页的按钮一样,非常有意思的是这些按钮却可以滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的前后滚动. 调用jPaginate插件的方法很简单: $(elementID).paginate() 属性设置 可喜的是,jPaginate提供了很多属性配置,您可以轻易的定制想要的分页效果. 设置方法如: $(elementID).paginate({ count:80, start:1, ... }) count: 数字,总

随机推荐