JQuery 构建客户/服务分离的链接模型中Table分页代(2)


List<TB_WEB_NZ_INVESTMENT> list1 = new List<TB_WEB_NZ_INVESTMENT>();
for (int i = 0; i < list.Count; i++)
{
if (i > R1&&i<R2)
{
list1.Add(list[i]);
}
}
list.Clear();
list = list1;


3)尾页操作:
//尾页
//但返回的显示对象列表确只能是最后一页里面的记录
//这里需要剔除不是最后一页的元素对象
list.RemoveRange(0,(CurrentPage-1) * PageCount);
尾页的代码就简单一些。
从以上的服务端代码,我们看出虽然每次从数据库返回全部的代码到webservice端,但通过这个方法,就将其无用的记录全部过滤了,把剩下的元素传递到客服端,这样不管记录有多少条,每次返回页面的都只有一点点,提高了效率,避免了webservice传递大数据的问题,这样这个框架在传递大数据的方面基本不存在任何问题(排除一些及其特殊的东西),运用这个框架在效率方面不存在任何问题,甚至比普通的页面还要快。
客户端代码片段:
客户端就不再详细说明了,客户端需要传入
PageCount  每页显示的记录数
CurrentPage 当前页数
表格的html:
代码

复制代码 代码如下:


<table >
<thead>
<tr>
<td></td>
<td >投资人类型</td>
<td>投资人</td>
<td>出资方式</td>
<td>认缴出资额</td>
<td>实缴出资额</td>
<td>出资比例</td>
<td>余额缴付期限</td>
<td>资料是否完整</td>
<td>操作</td>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="9">
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">下一页</a>
<a href="#">尾页</a>
跳到<input type="text"/>页 |
总页数:<span></span>页
</td>
</tr>
</tfoot>
</table>


填充数据的js函数:
代码

复制代码 代码如下:


//引导数据填充表格(Table)
function Load_TableData(FlowID,CurrentPage)
{
$.ajax({
type: "POST",
url: IPServer +"JsonService.asmx/Load_ContributivePerson_Table",
data:"{FlowID:'"+FlowID+"',PageCount:"+PageCount+",CurrentPage:" + CurrentPage +"}" ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg){
msg = msg.replace(new RegExp('(^|[^\\\\])\\"\\\\/Date\\((-?[0-9]+)\\)\\\\/\\"', 'g'), "$1new Date($2)");
var data = eval("(" + msg + ")");
var strTR="";
var RowCount = 1;
jQuery.each(data, function(rec) {
strTR += "<TR >";
strTR += " <TD >" + this.INVID + "</TD>";
strTR += " <TD >" + this.INVTYPEName + "</TD>";
strTR += " <TD >" + this.INV + "</TD>";
strTR += " <TD >" + this.CONFORM + "</TD>";
strTR += " <TD >" + this.SUBCONAM + "</TD>";
strTR += " <TD >" + this.ACCONAM + "</TD>";
strTR += " <TD >" + this.CONPROP + "</TD>";
strTR += " <TD >" + this.BALDEPER_ShortString + "</TD>";
strTR += " <TD >" + this.IsDataCompleteness + "</TD>";
strTR += " <TD ><a href='#' >选择</a></TD>";
strTR += "</TR>";
RowCount++;
});//jQuery.each
$("#tbody_Data").empty();
$("#tbody_Data").append(strTR);
$("#CurrentPage").html(CurrentPage);
},
error:function(msg){
alert( "Error: " + msg );
}
});
}//function Load_TableData()


首页,上一页,下一页,尾页的操作:
说明:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdpzyy.html