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; 
}

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类

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

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