• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    无框架 Ajax分页(原创)第1/2页
    使用如上方法确实可以实现Ajax分页效果,但我总觉得不够简洁,研究了一下午,终于捣鼓出了点东西O_o
    首先创建前台页面MyAjaxPager.aspx
    复制代码 代码如下:

    %@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyAjaxPager.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.MyAjaxPager" %>
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    html xmlns="http://www.w3.org/1999/xhtml" >
    head runat="server">
    title>/title>
    style type="text/css">
    .a{}{ height:20px; line-height:20px; border-bottom:1px solid #d8dfea; clear:both;}
    .b{}{ float:left; width:30px;}
    .c{}{ float:left; width:500px;}
    /style>
    script type="text/javascript" src="http://www.cnblogs.com/JS/AjaxFunction.js">/script>
    script type="text/javascript">
    var xmlHttp;
    function getData(pIndex) {
    xmlHttp = GetXmlRequest();
    xmlHttp.onreadystatechange = ShowRepeaterData;
    xmlHttp.open("GET", "AjaxProcess.aspx?index=" + pIndex, true);
    xmlHttp.send(null);
    }
    function ShowRepeaterData() {
    if (xmlHttp.readyState == 4 xmlHttp.status == 200) {
    var gridData = xmlHttp.responseText;
    var grid = document.getElementById("grid");
    grid.innerHTML = gridData;
    }
    }
    /script>
    /head>
    body>
    form id="form1" runat="server">
    div>
    div id="page">
    p align="left">
    a href="javascript:getData(1);">1/a>
    a href="javascript:getData(2);">2/a>
    a href="javascript:getData(3);">3/a>
    a href="javascript:getData(4);">4/a>
    a href="javascript:getData(5);">5/a>
    a href="javascript:getData(50);">50/a>
    a href="javascript:getData(500);">500/a>
    a href="javascript:getData(5000);">5000/a>
    a href="javascript:getData(50000);">50000/a>
    a href="javascript:getData(99999);">99999/a>
    /p>
    div id="grid">
    asp:Repeater ID="rptGrid" runat="server">
    HeaderTemplate>
    table>
    tr>
    th style="border:solid 1px red;">编号/th>
    th style="border:solid 1px red;">姓名/th>
    /tr>
    /HeaderTemplate>
    ItemTemplate>
    tr>
    td style="border:solid 1px red;">%# Eval("Id") %>/td>
    td style="border:solid 1px red;">%# Eval("Name") %>/td>
    /tr>
    /ItemTemplate>
    FooterTemplate>
    /table>
    /FooterTemplate>
    /asp:Repeater>
    /div>
    /div>
    /div>
    /form>
    /body>
    /html>

    画面很简单,就是一排index地址,当点击链接后会以ajax的方式将数据绑定到下边的repeater



    主要功能是在处理Ajax请求的AjaxProcess.aspx页面实现的,我们来看看。

    12下一页阅读全文
    您可能感兴趣的文章:
    • Ajax 框架学习笔记
    • AJAX 图片展示框架56个 提升开发效率
    • AJAX 验证框架13个
    • PHP 开源AJAX框架14种
    • jquery 框架使用教程 AJAX篇
    • Jquery AJAX 框架的使用方法
    • 基于JQuery框架的AJAX实例代码
    • javascript之AJAX框架使用说明
    • asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
    • 简单的前端js+ajax 购物车框架(入门篇)
    • 简单介绍不用库(框架)自己写ajax
    上一篇:ajax 开发守则 10条说明
    下一篇:Ajax 返回字符串的过滤实现代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    无框架 Ajax分页(原创)第1/2页 无,框架,Ajax,分页,原创,