首页新闻找找看学习计划

jQuery实现分页问题!!!!急~~

0
悬赏园豆:10 [已关闭问题] 关闭于 2009-11-18 15:13

我在用vs2003里通过用户控件封装了一个数据源展示控件,用了DataGrid,在实现分页的功能上不想用其自带的分页(感觉很不好),想到了用jQuery去实现,从网上找到了一个方法,就是但是不能正常分页,页码之类能正常显示的,不知道它跟数据源是怎么联系的,有这方面的高手没,请指点一下吧!!!

 

Code

 

JS部分就是这一段,引用了一个jquery.pager.js,页面部分

Code

 

就这么一个层显示出分页按钮,现在按钮能正常点,数据源要怎么给?

死神的背影的主页 死神的背影 | 小虾三级 | 园豆:658
提问于:2009-11-17 11:45
< >
分享
所有回答(3)
0

通過jquery AJAX後台來生成HTML

可以參考下這個

[简单分页]C#+JQUERY+ORACLE分页效果

 

Code
function GetHTML(PageNo,pDay,pGroupName,pWorkerId,pUserName,pWeekIndex)
{
$(
"#doingdivpage").remove();
$(
"#childDoing").remove();
$.ajax({
type:
"POST",
url:
"Handler/BackHandler.ashx",
data:
"cmd=DetailPager&pno="+PageNo+"&day="+pDay+"&gname="+pGroupName+"&wid="+pWorkerId+"&uname="+pUserName+"&windex="+pWeekIndex,
beforeSend:
function()
{
var width=$("#GridView1").width();
var height=$("#GridView1").height();
var top=$("#GridView1").offset().top;
var left=$("#GridView1").offset().left;
var htmldoing="<div style='background:#f1f1f1;z-index:2000;width:"+width+"px;height:"+height+"px;position: absolute; left: "+left+"px; top: "+top+"px;opacity:0.5;filter:alpha(opacity=50);cursor:wait' id='doingdivpage'></div>";
var childDoing="<div style='position: absolute;z-index:2001;width:140px;height:30px;background:#CAD9EC;;vertical-align: middle;text-align: center;border:2px solid #99bbe8;cursor:wait' id=childDoing><div style='background:white;height:100%;width:100%;color:red;font-weight:normal;text-align:center;' id='showmess'><img src=images/loading.gif>loading..</div></div>";
$(document.body).append(htmldoing);
$(document.body).append(childDoing);
var dleft=left+width/2;
var dtop=top+height/2;
$("#childDoing").css({left:dleft+"px",top:dtop+"px"});
},
error:
function(da)
{
var k=da.responseText.indexOf("<title>");
var m=da.responseText.indexOf("</title>");
var eMessage=da.responseText.substr(k+7,m-k-7);
$(
"#showmess").html(eMessage);
},
success:
function(data)
{
$(
"#GridView1").find("tr:not(:first)").remove();
$(
"#doingdivpage").remove();
$(
"#childDoing").remove();
if(data!="")
{
$(
"#GridView1").append(data);
}
$(
"div[disabled]").each(function(){
$(
this).removeAttr("disabled");
$(
this).css({"background-position":"0px -14px"});
});
}
});
woody.wu | 园豆:3621 (老鸟四级) | 2009-11-17 11:52
这一段代码的传出去的是什么东西,success后接收的代码做的什么功能操作?这里边我要变动的是哪些部分
支持(0) 反对(0) 死神的背影 | 园豆:658 (小虾三级) | 2009-11-17 13:37
從後台獲取新的HTML,然後把這個HTML通過JQUERY $("DataGrid1").append(data)生成到這裡DataGrid1裡面
支持(0) 反对(0) woody.wu | 园豆:3621 (老鸟四级) | 2009-11-17 13:53
@woody.wu:呃···· 有没有一个DEMO参考一下,毕竟以前没有这样子做过,对于你的这种做法我现在还没有具体了解思想原理,看着有点懵
支持(0) 反对(0) 死神的背影 | 园豆:658 (小虾三级) | 2009-11-18 09:26
@死神的背影:可以看看這 http://space.cnblogs.com/question/10451/ 裡面的回復。都是後台生成HTML,前台通過AJAX獲取的,然後再將HTML加到DATAGRID1的。
支持(0) 反对(0) woody.wu | 园豆:3621 (老鸟四级) | 2009-11-18 09:45
0

配套的 DEMO地址 (挂几天,就把DEMO撤下来,放上面总是个危险,呵呵。)

下面是实现的JS部分, jquery-pagination.js代码中封装了一个jQuery.cookie插件。

服务器端代码我就不贴了,我的DEMO基于.net1.1的,找不到封装良好的JSON库,自己按照基本需求简单的封装了拼接一维的JSON字符串方法,在服务器端通数据读取器SqlDataReader转换为拼接好的类似于[ {field1:'value', field2:'value'……}, {field1:'value', field2:'value'……}, ……]形式的字符串。

解析后的JSON字符串,根据需求,生成表格中tbody部分,然后直接$("#tableID").append(htmlString) 上去就OK了,自己看看DEMO吧,应该是你想要的效果,甚至应该超出你的预期。

还有一点要提醒的:parseInt($.cookie('PageCount'), 10),这里是在服务器端COUNT出总记录的条数后,写入相应的cookie中。这个方法的契机也需要自己去写,比如说,你每次根据不同的条件查询结果集,理论上COUNT(*)出来的总数肯定是变化的,如果你仅仅是翻页的话,那么结果集总数是不变的,只是每次读取的内容变化而已,那么这里你就要在服务器端自己想办法,怎么来判别,何时该access SQL来更新结果集的总行数,而何时无需访问。

分页是基于MSSQL2000,效率不高,而且采取拼接SQL语句,存在被注入的风险。前端基本机构已经给出了,你可以自己随意定制服务器端的东东,采用SQL2005来分页。

<div id="divload">
<img src="images/spinner3-greenie.gif"><span>Loading……</span></div>
<div>
<table id="QueryDataTable" cellspacing="1" summary="百克网新闻列表">
<caption>
新闻列表
</caption>
<thead>
<tr>
<th width="5%">
操 作
</th>
<th width="6%">
新闻编号
</th>
<th width="23%">
新闻标题
</th>
<th width="20%">
新闻摘要
</th>
<th width="8%">
新闻分类
</th>
<th width="8%">
审核状态
</th>
<th width="7%">
作 者
</th>
<th width="7%">
录入时间
</th>
<th width="16%">
发布地址
</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="Pagination" class="black"></div>

 


 

            <script type="text/javascript" language="javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript" src="javascript/jquery-pagination.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var url,
html,
className,
contentType
= "json",
pageIndex
= 0,
parentCode;

$(
"#ddlParentNewsType").change(function() {
parentCode
= this.value;

$.post(
// 发送请求的URL地址.
"ProcessingPage.aspx",
// 要发送给服务器的数据,以 Key/value 的键值对形式表示。
{ RequestPage: "ReportAdminSystem",
SourceID:
"ddlParentNewsType",
ContentType: escape(contentType),
ClassCode: escape(parentCode) },
// 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
function (json) {
var count = json.length;
html
= [];
html.push(
"<option selected='selected' value='0'>-请选择新闻的子类-</option>");
for ( var index = 0; index < count; ++index ) {
html.push(
"<option value='");
html.push(json[index].ClsCode);
html.push(
"'>");
html.push(json[index].ClsName);
html.push(
"</option>");
}

$(
"#ddlChildNewsType").empty();
$(
"#ddlChildNewsType").append(html.join(''));
},
// 响应客户端请求后返回文件类型(JSON,XML,等等)
contentType);
});

$(
"#btnQuery").click(function() {
InitData(pageIndex, contentType);
});

InitData
= function(curIndex, type) {
$.ajax({
type:
"POST", // 用POST方式传输
dataType: "json", // 数据格式:JSON
url: "ProcessingPage.aspx", // 目标地址
data: { RequestPage: "ReportAdminSystem",
SourceID:
"getDataSource",
ContentType: escape(type),
PageIndex: escape(curIndex
+ 1),
Title: escape($(
"#txtTitleName")[0].value),
Keyword: escape($(
"#txtKeyWord")[0].value),
InputMan: escape($(
"#txtInputMan")[0].value),
IT_ID: escape($(
"#txtTitleID")[0].value),
ParentClass: escape($(
"#ddlParentNewsType option:selected").get(0).value),
ChildClass: escape($(
"#ddlChildNewsType option:selected").get(0).value),
StartDate: escape($(
"#txtStartDate")[0].value),
EndDate: escape($(
"#txtEndDate")[0].value)
},
beforeSend:
function() {
$(
"#divload").show();
},
// 发送数据之前
complete: function() {
$(
"#divload").hide();
$(
"#Pagination").pagination(parseInt($.cookie('PageCount'), 10), {
callback: pageSelectCallback,
prev_text:
'< Previous',
next_text:
'Next >',
items_per_page:
10,
num_display_entries:
8,
current_page: curIndex,
num_edge_entries:
5
});
},
// 接收数据完毕
success: function(json) {
html
= [];
for ( var index = 0; index < json.length; ++index ) {
className
= index % 2 == 0 ? "even" : "odd";
html.push(
"<tr class='")
html.push(className)
html.push(
"'><td class='center'><input type='checkbox' name='ckbOperationGroup' value='");
html.push(json[index].IT_ID);
html.push(
"' />");
html.push(
"</td><td>");
html.push(json[index].IT_ID);
html.push(
"</td>");
html.push(
"<td class='left'>");
html.push(json[index].Title);
html.push(
"</td>");
html.push(
"<td title='");
html.push(json[index].Summary);
html.push(
"' class='left'><div>");
html.push(json[index].Summary);
html.push(
"</div></td>");
html.push(
"<td>");
html.push(json[index].NewsClassName);
html.push(
"</td>");
html.push(
"<td>");
html.push((json[index].IsCheck
== "1" ? "已审核" : "未审核") + "," + (json[index].IsMake > "0" ? "已发布" : "未发布") );
html.push(
"</td>");
html.push(
"<td>");
html.push(json[index].Editor);
html.push(
"</td>");
html.push(
"<td>");
html.push(json[index].Input_Date);
html.push(
"</td>");
html.push(
"<td>");
html.push(json[index].exhi_linkman);
html.push(
"</td></tr>");
}

$(
"#QueryDataTable tr:gt(0)").remove();
$(
"#QueryDataTable").append(html.join(''));
},
error:
function() {
window.alert(
"没有找到符合您查询条件的记录,数据加载失败!");
}
});
};

pageSelectCallback
= function (page_id, jq) {
InitData(page_id, contentType);
};

InitData(pageIndex, contentType);
});
</script>
                        
rainnoless | 园豆:613 (小虾三级) | 2009-11-17 15:03
0

通过dataset 分页 也不错

Mr雨 | 园豆:1199 (小虾三级) | 2009-11-17 17:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册