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

分类：Web前端作者：编程之家用户
复制代码 代码如下:

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

当前1/2页 12下一页阅读全文

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

使用input+datalist简单实现实时匹配的可编辑下拉列表-并解决选定后浏览器默认只显示value的可读性问题
问题背景 最近小伙伴提了一个希望提高后台下拉列表可操作性的需求，原因是下拉列表选项过多，每次下拉选择比较费时费力且容易出错，硬着头皮啃了啃前端知识，网上搜寻了一些下拉列表实现的资料，这里总结一下。 P
前端js生成任意随机数
// n位随机数生成 function randomNum(n) { let sString = &quot;&quot;; let strings = &quot;abcdefghijklmnopq
Web前端：HTML最强总结 附详细代码
HTML是HyperText Markup Language的简称，中文名称:超文本标记语言，它是一种用于创建网页的 标准标记语言
Web前端：CSS最强总结 附详细代码
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
Web前端：JavaScript最强总结 附详细代码 带常用案例！
JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
糟糕的设计会为我们的工作带来什么启发？
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 一名开发者或设计师通常可以在一秒内指出优秀的设计，但对于糟糕的设计只需最多半
想实现多人协作的“在线Excel”？真没那么简单
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 Excel是我们办公中常用的工具 ，它几乎能为我们处理大部分数据，友好的交互
怎样使我们的用户不再抵触填写Form表单？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/8-tips-for-an-awesome-sign
不要再造轮子了：聊一聊 JavaScript 的 URL 对象是什么？
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 如果我们自己编写从URL中分析和提取元素的代码，那么有可能会比较痛苦
Deno会在短期内取代Node吗？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/what-is-deno-and-will-it-r
您知道SASS吗？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/4-reasons-to-use-sass-in-y
还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/vuejs-3-0-0-beta-features-
SessionStorage、LocalStorage详解
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/sessionstorage-and-localst
详细了解JS Map，它和传统对象有什么区别？
一直以来，JavaScript使用数组和对象来定义和存放结构化数据， 在这篇文章中，我们将一起深挖另一种对象Map的一切，我们将会去了解它是什么、如何遍历、都包括什么属性和方法以及优缺点是什么。
合理使用CSS框架，加速UI设计进程
由于CSS的出现，现在的网站风格已经与它们很早之前的样子有了很大的不同。CSS的出现为原本平平无奇的网页注入了活力。这也是网站的用户体验得到进一步进化的原因。这可能就是当今几乎所有的网站或多或少都在使
开发一个渐进式Web应用程序PWA前都需要了解什么？
自苹果推出了iPhone应用商店以来，App成为了我们生活中不可或缺的一部分，而对于实体业务也是如此，现在各行业都在推出自己的App，但有没有人想过这样一种场景，如果自己的潜在客户还没有安装你的App
前端开发：这10个Chrome扩展你不得不知
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/10-top-chrome-extensions-f
你的按钮到底在帮助用户还是在误导用户？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/do-your-buttons-lead-or-mi
三步带你开发一个短链接生成平台
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 前段时间在开发【葡萄城社区】公众号时有一个功能是需要用网页授权认证地址生成二
给萌新HTML5 入门指南
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 HTML5的发展改变了互联网技术趋势，前端热度依旧不减，所以对于应用开发人员
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot