您好,欢迎访问一九零五行业门户网

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

<%@ page language="c#" codebehind="grouptext.aspx.cs" autoeventwireup="false" inherits="test1.grouptext" %> <!doctype html public "-//w3c//dtd html 4.0 transitional//en" > <html> <head> <title>grouptext</title> <meta name="generator" content="microsoft visual studio .net 7.1"> <meta name="code_language" content="c#"> <meta name="vs_defaultclientscript" content="javascript"> <meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5"> <link href="css/wmh.css" href="css/wmh.css" type="text/css" rel="stylesheet"> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/common.js" type="text/javascript"></script> <script src="js/getcommontable.js" type="text/javascript"></script> <script src="js/grouptext.js" type="text/javascript"></script> <script language="javascript"><!-- var ecid = '100001'; var jpstr = ""; var pagesize = 8; // --></script> </head> <body ms_positioning="gridlayout"> <form id="form1" method="post" runat="server"> <div class="listdiv" style="height:100%; padding-top: 2px"> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr class="dg_header"> <td style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; width: 10%; border-bottom: 1px solid; text-align: center" >活动名称</td> <td style="border-right: 1px solid; border-top: 1px solid; width: 10%; border-bottom: 1px solid; text-align: center">发送方</td> <td style="border-right: 1px solid; border-top: 1px solid; width: 10%; border-bottom: 1px solid; text-align: center">接收方</td> <td style="border-right: 1px solid; border-top: 1px solid; width: 12%; border-bottom: 1px solid; text-align: center">发送时间</td> <td style="border-right: 1px solid; border-top: 1px solid; width: 38%; border-bottom: 1px solid; text-align: center">发送内容</td> <td style="border-right: 1px solid; border-top: 1px solid; width: 10%; border-bottom: 1px solid; text-align: center">积分</td> <td style="border-right: 1px solid; border-top: 1px solid; width: 10%; border-bottom: 1px solid; text-align: center">状态</td> </tr> <tr> <td class="dg_line" style="border-bottom: 0px solid" style="border-bottom: 0px solid" valign="top" width="100%" colspan="7" height="100%"> <div id="divcontent" style="width: 100%; height: 100%" align="left"></div> </td> </tr> <tr> <td class="dg_line" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid" width="100%" colspan="10"> <table width="100%"> <tr> <td class="pgtext">共<span id="recordcount" style="color: red" style="color: red">0</span>条记录 目前第<span id="curpageindex" style="color: red" style="color: red">0</span> <font color="red">/</font><span id="pgcount" style="color: red" style="color: red">0</span>页 <input class="pagetext" id="gototxt" type="text" maxlength="10" name="gototxt" runat="server"> <input id="gotopg" type="button" class="gobtn"></td> <td align="right"><img id="btnfirst" style="cursor: hand" style="cursor: hand" alt="首页" src="images/first.gif"> <img id="btnpre" style="cursor: hand" style="cursor: hand" alt="上一页" src="images/btn_pre.gif" > <img id="btnnext" style="cursor: hand" style="cursor: hand" alt="下一页" src="images/btn_next.gif" > <img id="btnlast" style="cursor: hand" style="cursor: hand" alt="尾页" src="images/btn_last.gif" > </td> </tr> </table> </td> </tr> </table> </div> </form> </body> </html>
common.js
common.js: //时间格式化 function getdatebyformat(olddate){ var dy = olddate.getfullyear(); var dm = olddate.getmonth()+1; var dd = olddate.getdate(); if(dm<10){ dm = "0" + dm; } if(dd<10){ dd = "0" + dd; } var newdate = dy+'-'+dm+'-'+dd; return newdate; } //日期-时间格式化 function getdatetimebyformat(olddate){ var dy = olddate.getfullyear(); var dm = olddate.getmonth()+1; var dd = olddate.getdate(); var dh = olddate.gethours(); var dmi = olddate.getminutes(); var ds = olddate.getseconds(); if(dm<10) dm = "0" + dm; if(dd<10) dd = "0" + dd; if(dh<10) dh = "0" + dh; if(dmi<10) dmi = "0" + dmi; if(ds<10) ds = "0" + ds; var newdate = dy+'-'+dm+'-'+dd+' '+dh+':'+dmi+':'+ds; return newdate; } //只能输入数字 function txtnumber() { if ((event.keycode >57) || (event.keycode <48)) return false;else return true; } //只能输入数字和字母 function txtnumchar() { //65- 90 97-122 var kcode = event.keycode; if (kcode >= 48 && kcode <= 57) return true; else if(kcode >= 65 && kcode <= 90) return true; else if (kcode >= 97 && kcode <= 122) return true; else return false; }
getcommontable.js
getcommontable.js //获取table头 function gettableheadbywidth(widthsize,ids){ var tableone = "<table id='tab"+ids+"' border='0' cellspacing='0' cellpadding='0' "; var tabletwo = ">"; if (widthsize == "") return tableone + tabletwo; else return tableone+"width="+widthsize+tabletwo; } //获取第一个tr td 传一个宽度值 function gettrandtdfirstbycwidth(classname,widthsize){ var tdone = " <tr "; var tdtwo = "><td style="border-bottom: 1px solid;" style="border-bottom: 1px solid;" align='center' "; var tdthr = " > "; if (classname =="") tdone += tdtwo; else tdone+=" class ='"+classname+"' "+tdtwo; if (widthsize == "") tdone += tdthr; else tdone += " width="+widthsize+tdthr; return tdone; } //获取下一个td,传一个宽度值 function gettdnextbywidth(widthsize){ var tdone = " </td><td style=" border-bottom: 1px solid" style=" border-bottom: 1px solid" align='center' "; var tdtwo =">"; if (widthsize =="") return tdone+tdtwo; else return tdone+"width="+widthsize+tdtwo; } //获取最后一个td function gettdlastbywidth(widthsize){ var tdone = " </td><td style=" border-bottom: 1px solid" style=" border-bottom: 1px solid" align='center' "; var tdtwo =">"; if (widthsize =="") return tdone+tdtwo; else return tdone+"width="+widthsize+tdtwo; } //获取最后一个tr/td function gettrandtdlast(){ return " </td></tr>"; } //获取table尾 function gettablelast(){ return "</table>"; } //获取img function getimgbyparams(imgurl,altstr,eventname,eventparams,imgid){ var one = "<img border='0' style="cursor: hand" style="cursor: hand""; if (imgurl != "") one += "src='"+imgurl+"'"; if (altstr != "") one += "alt='"+altstr+"'"; if(imgid != "") one += "id='"+imgid+"'"; one += "onclick='"+eventname+"("+eventparams+");'> "; return one } //--------排序--------------------------- //通过字段的内容排序 sortbybtnidandcellname=function(btnid,cellname,celltype){ var way = getoptype(btnid);//0为正。1为倒 var ds = userdata.value; var sortarr= new array(); if ((ds!= null) && (typeof(ds) == "object")){ var len = ds.rows.length; if(celltype=='s' || celltype=='n'){ for(var j=0;j<len;j++){ sortarr[j] = ds.rows[j][cellname];//.substr(0,1);//通过字符 } }else if(celltype=='d'){ for(var i=0;i<len;i++){ sortarr[i] = getdatebyformat(ds.rows[i][cellname]);//通过日期 } } if(sortarr!=''){ var indexarr = new array(); indexarr = getsortarray(sortarr,celltype);//得到新的排序规则 if(indexarr != ''){ setsortaginbyway(indexarr,way); } } } } //获得排序 getoptype=function(btnid){//返回0正序,1为倒序 var imgname= $("#"+btnid).attr("src"); var wz = imgname.indexof('.gif'); var oldimg =imgname.substr(wz-9,9); if(oldimg=='sort_desc'){//当前是倒序或未排序,需要正序sort_ascc $("#"+btnid).attr("src","../images/sort_ascc.gif"); return 0; }else{ $("#"+btnid).attr("src","../images/sort_desc.gif"); return 1; } } //按js sort排序 获得新的排序规则 getsortarray=function (sortdatearr,celltype){// 参数为array var sortstr = ''; for(var k=0;k<sortdatearr.length;k++){ if(sortstr=='') sortstr=sortdatearr[k]; else sortstr+='^%^'+sortdatearr[k]; } var newsortdate =sortdatearr; var len = sortdatearr.length; if(celltype =='s' || celltype =='d') newsortdate.sort();//字符排序 else{ //数字排序 for(var i=0;i<len;i++){ var tmp =0; for(var j=i+1;j<len;j++){ if(newsortdate[i]>newsortdate[j]){ tmp = newsortdate[i]; newsortdate[i] = newsortdate[j]; newsortdate[j] =tmp; } } } } var tmpsortdate =sortstr.split('^%^') var resultarr = new array(); for(var i = 0;i<len;i++){ for(var j = 0;j<len;j++){ if(newsortdate[i]==tmpsortdate[j]){ resultarr[i] = j; tmpsortdate[j] ='||||||||'; break; } } } return resultarr; }; //--------------------end------------------------------- //删除重复的手机号码 splitrepeatmobile=function(mobile){ var mob=mobile; for(var i=0;i<mob.length;i++){ for(var j=i+1;j<mob.length;j++){ if(mob[i]==mob[j]){ mob.splice(j,1); } } } return mob; }
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); }
其它类似信息

推荐信息