JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組 超強(qiáng)的實(shí)現(xiàn)第1/2頁(yè)
更新時(shí)間：2009年08月26日 01:26:46 作者：
JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組 超強(qiáng)的實(shí)現(xiàn) 加上你的CSS完全可以與EXT媲美哦
復(fù)制代碼 代碼如下:
<%@ 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" >活動(dòng)名稱</td>
<td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 10%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center">發(fā)送方</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">發(fā)送時(shí)間</td>
<td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 38%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center">發(fā)送內(nèi)容</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">狀態(tài)</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>頁(yè)
<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="首頁(yè)" src="Images/first.gif">
<IMG id="btnpre" style="CURSOR: hand" style="CURSOR: hand" alt="上一頁(yè)" src="Images/btn_pre.gif" > <IMG id="btnnext" style="CURSOR: hand" style="CURSOR: hand" alt="下一頁(yè)" src="Images/btn_next.gif" >
<IMG id="btnlast" style="CURSOR: hand" style="CURSOR: hand" alt="尾頁(yè)" src="Images/btn_last.gif" >
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</HTML>
Common.js
復(fù)制代碼 代碼如下:
Common.js:
//時(shí)間格式化
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;
}
//日期-時(shí)間格式化
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;
}
//只能輸入數(shù)字
function txtnumber()
{
if ((event.keyCode >57) || (event.keyCode <48))
return false;else return true;
}
//只能輸入數(shù)字和字母
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
復(fù)制代碼 代碼如下:
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;
}
//獲取第一個(gè)tr td 傳一個(gè)寬度值
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;
}
//獲取下一個(gè)TD，傳一個(gè)寬度值
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;
}
//獲取最后一個(gè)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;
}
//獲取最后一個(gè)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
}
//--------排序---------------------------
//通過(guò)字段的內(nèi)容排序
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);//通過(guò)字符
}
}else if(celltype=='D'){
for(var i=0;i<len;i++){
sortarr[i] = getDateByFormat(ds.Rows[i][cellName]);//通過(guò)日期
}
}
if(sortarr!=''){
var indexarr = new Array();
indexarr = getSortArray(sortarr,celltype);//得到新的排序規(guī)則
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'){//當(dāng)前是倒序或未排序,需要正序sort_ascc
$("#"+btnid).attr("src","../Images/sort_ascc.gif");
return 0;
}else{
$("#"+btnid).attr("src","../Images/sort_desc.gif");
return 1;
}
}
//按JS Sort排序 獲得新的排序規(guī)則
getSortArray=function (sortdatearr,celltype){// 參數(shù)為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{ //數(shù)字排序
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-------------------------------
//刪除重復(fù)的手機(jī)號(hào)碼
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;
}
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)AJAX定時(shí)刷新局部頁(yè)面實(shí)例
- 基于Jquery 解決Ajax請(qǐng)求的頁(yè)面 瀏覽器后退前進(jìn)功能，頁(yè)面刷新功能實(shí)效問(wèn)題
- Ajax實(shí)現(xiàn)頁(yè)面自動(dòng)刷新實(shí)例解析
- django+js+ajax實(shí)現(xiàn)刷新頁(yè)面的方法
- Ajax回退刷新頁(yè)面問(wèn)題的解決辦法
- ajax頁(yè)面無(wú)刷新 IE下遭遇Ajax緩存導(dǎo)致數(shù)據(jù)不更新的問(wèn)題
- 使用ajax實(shí)現(xiàn)無(wú)刷新改變頁(yè)面內(nèi)容和地址欄URL
- Ajax+php數(shù)據(jù)交互并且局部刷新頁(yè)面的實(shí)現(xiàn)詳解
- 淺談Ajax技術(shù)實(shí)現(xiàn)頁(yè)面無(wú)刷新
- AJAX實(shí)現(xiàn)指定部分頁(yè)面刷新效果
相關(guān)文章
JS獲取屏幕高度的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇JS獲取屏幕高度的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
layui實(shí)現(xiàn)tab的添加拒絕重復(fù)的方法
今天小編就為大家分享一篇layui實(shí)現(xiàn)tab的添加拒絕重復(fù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
基于JavaScript實(shí)現(xiàn)驗(yàn)證碼功能
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)驗(yàn)證碼功能的相關(guān)資料2017-04-04
three.js利用射線Raycaster進(jìn)行碰撞檢測(cè)
這篇文章主要為大家詳細(xì)介紹了three.js利用射線Raycaster進(jìn)行碰撞檢測(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了原生js如何實(shí)現(xiàn)表單驗(yàn)證功能，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
JavaScript中判斷整字類型最簡(jiǎn)潔的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript中判斷整字類型最簡(jiǎn)潔的實(shí)現(xiàn)方法,本文給出多個(gè)判斷整數(shù)的方法,最后總結(jié)出一個(gè)最短、最簡(jiǎn)潔的實(shí)現(xiàn)方法,需要的朋友可以參考下2014-11-11
這篇文章主要介紹了JS 調(diào)用微信掃一掃功能,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-12
JS高級(jí)運(yùn)動(dòng)實(shí)例分析
這篇文章主要介紹了JS高級(jí)運(yùn)動(dòng),結(jié)合實(shí)例形式分析了javascript運(yùn)動(dòng)框架原理、實(shí)現(xiàn)與應(yīng)用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JavaScript獲取文本框內(nèi)選中文本的方法,實(shí)例分析了javascript通過(guò)onclick獲取文本框選中文本的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
深入探討JavaScript、JQuery屏蔽網(wǎng)頁(yè)鼠標(biāo)右鍵菜單及禁止選擇復(fù)制
這篇文章主要介紹了深入探討JavaScript、JQuery屏蔽網(wǎng)頁(yè)鼠標(biāo)右鍵菜單及禁止選擇復(fù)制,需要的朋友可以參考下2014-06-06