JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页
<%@ 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:
//时间格式化
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
//获取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下一页阅读全文
相关推荐
-
Ajax读取数据之分页显示篇实现代码
我觉得还是有必要把我的ajax分页呈现给大家．我先讲一下这个ajax分页的实现核心,然后我们再看实例效果．所谓的ajax分页与传统的数据分页,在服务端的代码基本上是一样的．我们主要做的是使用ajax在不刷新的情况下,将请求的页码,和每页要显示的条数发送给服务端的处理网页．大家点击这个网址就可以看到要请求的数据:"ajax_page.asp?action=read&pagecount=3 & current_page=1" 在这段URL里,pagecount代表每页要显示
-
AJAX分页效果简单实现
最近写一个给用户组添加角色的功能,要求一边是未添加的角色,一边是已添加的角色,还有搜索功能, 点击添加后,ajax保存操作. 考虑功能为待查询功能分页 , 下方分页条, 一共有 2*2 ,4个ajax- JS代码如下: $(document).ready(function() { App.init(); currentRole(); // 当前角色 currentRolePage();//当前角色分页 noAddRole(); //未添加角色 noAddRolePage();//未添加角色分页
-
使用PHP+JQuery+Ajax分页的实现
为了锻炼下JQuery,决定自己动手写写分页 最终的效果如图: 点击某个字母后,下方显示以该字母为首字母的所有词语: 分页显示,每页显示15个词语,每组页码有20个,1-20/20-40--- 首先是在PHP文件中的分页Pager的相关代码 复制代码 代码如下: public function searchWordsByInitial() { //从AJAX发出的URL中获得参数:用户点击的字母和点击的页码 $initial = htmlenti
-
php+ajax实现无刷新分页的方法
本文实例讲述了php+ajax实现无刷新分页的方法.分享给大家供大家参考.具体实现方法如下: 这是一款基于原生态的php +js +ajax 的分页程序实例,我们详细的从数据库创建到js,php,html页面的创建来告诉你如何实现ajax分页调用数据的方法. 具体步骤如下: 一.创建数据库 SQL语句如下: 复制代码 代码如下: CREATE TABLE `tb_user` ( `id` int(10) NOT NULL auto_increment, `username` varcha
-
php,ajax实现分页
自己总结了些屁经验 1.用ajax post数据到后台页面后,接着要重新连接数据库,别以为用之前的session连接过就可以了 2.为了处理返回乱码的问题,我添加了header("Content-Type:text/html;charset=GB2312");就可以正常显示了,后来在firefox下检验,却提示我下载这个网页,上网搜了不少资料,得到一个模糊的认识就是网页代码有语法错误,firefox为了安全起见不会直接显示而是提示下载,我重新检查了刚才那条语句,发现自己多写了个&quo
-
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex
-
JQuery+Ajax无刷新分页的实例代码
先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单 就四个字段 分别是News_id News_title News_time News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server"> <title>JQuery无刷新分页</title> <link hre
-
用jQuery中的ajax分页实现代码
功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请看源码: 1.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="Measur
-
基于Jquery+Ajax+Json的高效分页实现代码
如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题,欢迎随时联系我, 同时也欢迎高手多给点意见,我不建议在喷子中成长. 本人QQ:364175837 前言 相信很多朋友都用过,Jquery的分页插件,我之前就用的jquery.paper这个,如果有兴趣可以留下QQ,我发份简单的实例源码给您. 该代码是晚上匆忙中完成的,所以没怎么优化,但是主要作为实例来结合这些知识的一个综合运用.好了废话不多说,直接上代码. vs2010+sql2005expre
-
jQuery DataTables插件自定义Ajax分页实例解析
一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不