当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现

Javascript
仿搜狐女人频道FLASH图片切换效果
JS CSS文章查看系统
走出JavaScript初学困境—js初学
javascript 弹性菜单,垂直的那种
javascript FormatNumber函数实现方法
动态创建的表格单元格中的事件实现代码
js继承 Base类的源码解析
javascript 一段代码引发的思考
很全的显示阴历(农历)日期的js代码
用于判断用户注册时,密码强度的JS代码
JavaScript Prototype对象
javascript 表单的友好用户体现
javascript 方法覆写实例代码
Javascript 生成指定范围数值随机数
javascript 自动转到命名锚记
捕获关闭窗口的脚本
在网页里看flash的trace数据的js类
JavaScript delete操作符应用实例
js利用Array.splice实现Array的insert/remove
JavaScript 私有成员分析

Javascript 中的 JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 476 ::
收藏到网摘: n/a

JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现 加上你的CSS完全可以与EXT媲美哦
复制代码 代码如下:
复制代码 代码如下:

GroupText.js
var totalCount;//总页
var userdata;//数据对象
$(document).ready(function(){

if(ecid !=""){
firstSearch(ecid);
}
$("#ddlCsList").change(function(){
ecid = $.trim($("#ddlCsList").val());
firstSearch(ecid);
});
$("#btnfirst").click(function(){
firstSearch(ecid);
});
$("#btnnext").click(function(){
nextSearch(ecid);
});
$("#btnpre").click(function(){
preSearch(ecid);
});
$("#btnlast").click(function(){
lastSearch(ecid);
});
$("#gotopg").click(function(){
gotoSearch(ecid);
});

});
//绑定数据
function binddata(udata)
{
jpstr ="";//这样的目的是清空,很有用的一步
var ds = udata.value;
if ((ds!= null) && (typeof(ds) == "object"))
{
//alert( ds.Rows[0].ItemName )
var c = ds.Rows.length;
var newarr = getdataarr(udata);
for(var k = 0; k<newarr.length;k++){

var tmp = newarr[k];
jpstr +="<tr><td style=" BORDER-BOTTOM: 1px solid" style=" BORDER-BOTTOM: 1px solid"><IMG id ='"+ds.Rows[tmp].srId+"' onclick=showOrHide("+ds.Rows[tmp].srId+") style="CURSOR: hand" style="CURSOR: hand" src="Images/uuu.gif" src="Images/uuu.gif"><B>"+ds.Rows[tmp].ItemName+"</b></td></tr><tr><td>"
var jpstrA="";
for(var i=tmp; i<c; i++)
{
if(ds.Rows[tmp].ItemName == ds.Rows[i].ItemName ){
jpstrA += getTrAndTdFirstByCWidth("dg_item","10%") +
""+ds.Rows[i].ItemName + getTdNextByWidth("10%") +
""+ds.Rows[i].SendMod + getTdNextByWidth("10%") +
""+ds.Rows[i].RecvMod + getTdNextByWidth("12%") +
""+getDateByFormat(ds.Rows[i].SendDate) + getTdNextByWidth("38%") +
""+ds.Rows[i].SendMsg + getTdNextByWidth("10%") +
""+ds.Rows[i].JfValue + getTdLastByWidth("10%") +
""+getTextByStatus(ds.Rows[i].SendStatus) +
"" + getTrAndTdLast();
}
}
jpstr +=getTableHeadByWidth("100%",ds.Rows[tmp].srId) + jpstrA + getTableLast();
jpstr += "</td></tr>";
}
jpstr ="<table width=100%>"+jpstr+"</table>";

document.getElementById("divcontent").innerHTML = jpstr;
//alert(jpstr);
}
else
{
document.getElementById("divcontent").innerHTML = "";
}
}
showOrHide=function(ids){
$("#tab"+ids).toggle();
var imgName= $("#"+ids).attr("src");
var wz = imgName.indexOf('.gif');
var oldImg =imgName.substr(wz-3,3);
if(oldImg=='uuu')//选择
$("#"+ids).attr("src","Images/eee.gif");
else{
$("#"+ids).attr("src","Images/uuu.gif");
}
}
function getdataarr(udata){
var ds = udata.value;
var resultArr= new Array();
var dsstr='';
for(var i=0; i<ds.Rows.length; i++){
resultArr[i] = $.trim(ds.Rows[i].ItemName);
if(dsstr=='')
dsstr =$.trim(ds.Rows[i].ItemName);
else
dsstr+='^%^'+$.trim(ds.Rows[i].ItemName)
}
splitStr(resultArr)
var newArr = new Array();
var temparr=dsstr.split('^%^')
for(var k=0;k<resultArr.length;k++){
for(var m=0;m<temparr.length;m++){
if(resultArr[k]==temparr[m]){
newArr[k]=m;
break;
}
}
}
return newArr;
}
splitStr= function(oldarr){
var nArr=oldarr;
var isok=false;
for(var l=0;l<nArr.length;l++){
for(var j=l+1;j<nArr.length;j++){
if(nArr[l]==nArr[j]){
nArr.splice(j,1);
isok=true;
}
}
}
if(isok)
splitStr(nArr);
}
function getTextByStatus(status){
if(status==0){
return "<font color='blue'>启用</font>";
}else{
return "<font color='red'><B>禁用</B></font>";
}
}
function getImgByStatus(status){
if(status==0){
return "../Images/gz2.gif";
}else{
return "../Images/gz1.gif";
}
}
function getTxtByStatus(status){
if(status==0){
return "我要禁用";
}else{
return "我要启用";
}
}
//第一页
function firstSearch(ecid)
{
if (ecid != ""){
totalCount = Interactive.GetCmdSMSlogCount("1=1").value;
userdata = Interactive.PageingOpenCmdSMSLog(1,pageSize);//Interactive.getInteractiveSMSByEcid(ecid,pageSize,1,totalCount);
binddata(userdata);
$("#recordcount").html(totalCount.toString());//curpageindex
$("#curpageindex").html(totalCount==0?'0':1);
if (totalCount % pageSize ==0)
{
$("#pgcount").html((totalCount / pageSize).toString());
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}
}
}
//下一页
function nextSearch(ecid){
if (ecid != ""){
var curpg =$("#curpageindex").html();//得到当前页
var pgCount = $("#pgcount").html();//得到总的页数
if (curpg < pgCount){
totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
userdata = Interactive.PageingOpenCmdSMSLog(parseInt(curpg)+1,pageSize);
binddata(userdata);
$("#recordcount").html(totalCount);//curpageindex
$("#curpageindex").html(parseInt(curpg)+1);
if (totalCount % pageSize ==0)
{
$("#pgcount").html(totalCount / pageSize);
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}
}else{
alert("当前已经是尾页了!");
}
}
}
//上一页
function preSearch(ecid){
if (ecid != ""){
var curpg =$("#curpageindex").html();//得到当前页
var pgCount = $("#pgcount").html();//得到总的页数
if (curpg > 1 ){
totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
userdata = Interactive.PageingOpenCmdSMSLog(parseInt(curpg)-1,pageSize);
binddata(userdata);
$("#recordcount").html(totalCount);//curpageindex
$("#curpageindex").html(parseInt(curpg)-1);
if (totalCount % pageSize ==0)
{
$("#pgcount").html(totalCount / pageSize);
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}
}else{
alert("当前已经是首页了!");
}
}
}
//尾页
function lastSearch(ecid){
if (ecid != ""){
var curpg =$("#curpageindex").html();//得到当前页
var pgCount = $("#pgcount").html();//得到总的页数
if (curpg < pgCount ){
totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
userdata = Interactive.PageingOpenCmdSMSLog(pgCount,pageSize);
binddata(userdata);
$("#recordcount").html(totalCount);//curpageindex
$("#curpageindex").html(pgCount);
if (totalCount % pageSize ==0)
{
$("#pgcount").html(totalCount / pageSize);
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}
}
}
}
//跳转指定页
function gotoSearch(ecid){
if (ecid != ""){
var curpg =$("#curpageindex").html();//得到当前页
var pgCount = $("#pgcount").html();//得到总的页数
var pggoto =$("#gototxt").val();
var reg = /[^\d]/g;
if (($.trim(pggoto) != "") && !(reg.test(pggoto))){
if ((parseInt(curpg) != parseInt(pggoto)) && (pggoto <= pgCount)){
totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
userdata = Interactive.PageingOpenCmdSMSLog(pggoto,pageSize);
binddata(userdata);
$("#recordcount").html(totalCount);//curpageindex
$("#curpageindex").html(pggoto);
if (totalCount % pageSize ==0)
{
$("#pgcount").html(totalCount / pageSize);
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}
}
}else{
alert("请输入正确的数字!");
}
}
}
//刷新
function Refresh(ecid){
if (ecid != ""){
var curpg =$("#curpageindex").html();//得到当前页
totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
userdata = Interactive.PageingOpenCmdSMSLog(curpg);
binddata(userdata);
$("#recordcount").html(totalCount);//curpageindex
$("#curpageindex").html(curpg);
if (totalCount % pageSize ==0)
{
$("#pgcount").html(totalCount / pageSize);
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}

}
}

复制代码 代码如下:

GroupText.aspx.cs:
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
Ajax.Utility.RegisterTypeForAjax(typeof(DataAccess.Interactive));
}

复制代码 代码如下:

Interactive.cs:
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public DataTable PageingOpenCmdSMSLog(int pgindex,int pageSize)
{
int pageIndex=pgindex;
DataTable dt = new DataTable ();
JSONHelper json = new JSONHelper();
int count = GetCmdSMSlogCount("1=1");
dt = GetDataByPager2000("SendAndRecvData S left join InteractiveSMS I on (S.ItemId=I.Id AND S.ECID=I.ECID)","srId","1=1",pageSize,pageIndex,"srId",1,
"S.srId,I.ItemName,S.SendMod,S.RecvMod,S.SendDate,S.SendMsg,S.JfValue,S.SendStatus",count);
return dt;
}
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public int GetCmdSMSlogCount(string where)
{
try
{
int count = ReturnSQL("select count(*) from SendAndRecvData S left join InteractCommand I on(S.ItemId=I.Id AND S.ECID=I.ECID) where "+where);
return count;
}
catch (Exception)
{
throw;
}
}
/// <summary>
/// 分页获取数据列表 适用于SQL2000
/// </summary>
/// <param name="tablename">表名</param>
/// <param name="key">主键</param>
/// <param name="where">查询条件</param>
/// <param name="pagesize">每页记录数</param>
/// <param name="pageindex">页索引</param>
/// <param name="orderfield">排序字段</param>
/// <param name="ordertype">排序方式 1=ASC 0=DESC</param>
/// <param name="fieldlist">查找的字段</param>
/// <param name="recordcount">总记录数</param>
/// <returns></returns>
public static DataTable GetDataByPager2000(string tablename, string key, string where, int pagesize, int pageindex, string orderfield, int ordertype, string fieldlist, int recordcount)
{
string cmd = "ProcCustomPage";
SqlParameter[] para = new SqlParameter[9];
para[0] = new SqlParameter("@Table_Name", tablename);
para[1] = new SqlParameter("@Sign_Record", key);
para[2] = new SqlParameter("@Filter_Condition", where);
para[3] = new SqlParameter("@Page_Size", pagesize);
para[4] = new SqlParameter("@Page_Index", pageindex);
para[5] = new SqlParameter("@TaxisField", orderfield);
para[6] = new SqlParameter("@Taxis_Sign", ordertype);
para[7] = new SqlParameter("@Find_RecordList", fieldlist);
para[8] = new SqlParameter("@Record_Count", recordcount);
return ExecuteDataSet(CommandType.StoredProcedure, cmd, para).Tables[0];
}
public static DataSet ExecuteDataSet(CommandType cmdType, string cmdText, params SqlParameter[] para)
{
try
{
using (SqlConnection con = new SqlConnection(CONN_STRING))
{
SqlDataAdapter adapter = new SqlDataAdapter();
using (SqlCommand cmd = new SqlCommand())
{
DataSet ds = new DataSet();
PrepareCommand(con, cmd, cmdType, cmdText, para);
adapter.SelectCommand = cmd;
adapter.Fill(ds);
return ds;
}
}
}
catch(Exception ex)
{
string d=ex.ToString();
return null;
}
}
/// <summary>
/// 建立SqlCommand
/// </summary>
/// <param name="con">SqlConnection 对象</param>
/// <param name="cmd">要建立的Command</param>
/// <param name="cmdType">CommandType</param>
/// <param name="cmdText">执行的SQL语句</param>
/// <param name="cmdParms">参数</param>
private static void PrepareCommand(SqlConnection con, SqlCommand cmd, CommandType cmdType, string cmdText, SqlParameter[] cmdParms)
{
if (con.State != ConnectionState.Open)
con.Open();
cmd.Connection = con;
cmd.CommandType = cmdType;
cmd.CommandText = cmdText;
if (cmdParms != null)
foreach (SqlParameter para in cmdParms)
cmd.Parameters.Add(para);
}