jQuery实现分页问题！！！！急~~
0
悬赏园豆：10
[已关闭问题]
关闭于 2009-11-18 15:13
我在用vs2003里通过用户控件封装了一个数据源展示控件，用了DataGrid,在实现分页的功能上不想用其自带的分页（感觉很不好），想到了用jQuery去实现，从网上找到了一个方法，就是但是不能正常分页，页码之类能正常显示的，不知道它跟数据源是怎么联系的，有这方面的高手没，请指点一下吧！！！
Code
JS部分就是这一段，引用了一个jquery.pager.js，页面部分
就这么一个层显示出分页按钮，现在按钮能正常点，数据源要怎么给？
所有回答(3)
0
通過jquery AJAX後台來生成HTML
可以參考下這個
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"});
});
}
});
这一段代码的传出去的是什么东西，success后接收的代码做的什么功能操作？这里边我要变动的是哪些部分
從後台獲取新的HTML，然後把這個HTML通過JQUERY $("DataGrid1").append(data)生成到這裡DataGrid1裡面
@woody.wu:呃···· 有没有一个DEMO参考一下，毕竟以前没有这样子做过，对于你的这种做法我现在还没有具体了解思想原理，看着有点懵
@死神的背影:可以看看這
http://space.cnblogs.com/question/10451/
裡面的回復。都是後台生成HTML，前台通過AJAX獲取的，然後再將HTML加到DATAGRID1的。
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>
0
通过dataset 分页 也不错
