zoukankan      html  css  js  c++  java
  • ajax 基础2

    连接数据库实现分页功能

      1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
      2 
      3 <!DOCTYPE html>
      4 
      5 <html xmlns="http://www.w3.org/1999/xhtml">
      6 <head runat="server">
      7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      8     <title></title>
      9     <style type="text/css">
     10         #table {
     11              100%;
     12             background-color: blue;
     13             text-align: center;
     14             font-weight: bold;
     15         }
     16     </style>
     17     <script src="jquery-1.7.2.min.js"></script>
     18 </head>
     19 <body>
     20     <form id="form1" runat="server">
     21         <div>
     22             <table id="table">
     23                 <thead style="color: white;">
     24                     <tr>
     25                         <td>用户名</td>
     26                         <td>密码</td>
     27                         <td>昵称</td>
     28                         <td>性别</td>
     29                         <td>生日</td>
     30                         <td>年龄</td>
     31                         <td>民族</td>
     32                         <td>班级</td>
     33                     </tr>
     34                 </thead>
     35                 <tbody style="background-color: white" id="tbody">
     36                     <asp:Repeater ID="Repeater1" runat="server">
     37                         <ItemTemplate>
     38                             <tr>
     39                                 <td><%#Eval("username") %></td>
     40                                 <td><%#Eval("password") %></td>
     41                                 <td><%#Eval("nick") %></td>
     42                                 <td><%#Eval("sexstar") %></td>
     43                                 <td><%#Eval("birthday") %></td>
     44                                 <td><%#Eval("age") %></td>
     45                                 <td><%#Eval("nationname") %></td>
     46                                 <td><%#Eval("classname") %></td>
     47                             </tr>
     48                         </ItemTemplate>
     49                     </asp:Repeater>
     50                 </tbody>
     51             </table>
     52             <input type="button" value="上一页" id="btn1" disabled="disabled" />
     53             <input type="button" value="下一页" id="btn2" />
     54             当前第<span id="span">1</span> 55         </div>
     56     </form>
     57 </body>
     58 </html>
     59 <script type="text/javascript">
     60     var pagecount = 3;
     61     var pagenumber = 1;
     62     document.getElementById("btn1").onclick = function () {
     63         document.getElementById("btn2").disabled = "";
     64         pagenumber--;
     65         Change(pagecount, pagenumber);
     66         if (pagenumber <= 1) {
     67             document.getElementById("btn1").disabled = "disabled";
     68         }
     69         else {
     70             document.getElementById("btn1").disabled = "";
     71         }
     72 
     73 
     74     };
     75     document.getElementById("btn2").onclick = function () {
     76 
     77         $.ajax({
     78             url: "ajax/Hand2.ashx",
     79             data: {},
     80             type: "post",
     81             dataType: "json",
     82             success: function (data1) {
     83 
     84                 document.getElementById("btn1").disabled = "";
     85                 pagenumber++;
     86                 Change(pagecount, pagenumber);
     87                 if (pagenumber >= parseInt(data1.aaa)) {
     88                     document.getElementById("btn2").disabled = "disabled";
     89                 }
     90                 else {
     91                     document.getElementById("btn2").disabled = "";
     92                 }
     93             }
     94         })
     95 
     96 
     97     };
     98     function Change(count, number) {
     99         $.ajax({
    100             url: "ajax/Hand.ashx",
    101             data: { "count": count, "number": number },
    102             type: "post",
    103             dataType: "json",
    104             success: function (data) {
    105                 document.getElementById("tbody").innerHTML = "";
    106                 for (i in data) {
    107                     var end = "<tr>";
    108                     end += "<td>" + data[i].username + "</td>";
    109                     end += "<td>" + data[i].password + "</td>";
    110                     end += "<td>" + data[i].nickname + "</td>";
    111                     end += "<td>" + data[i].sex + "</td>";
    112                     end += "<td>" + data[i].birthday + "</td>";
    113                     end += "<td>" + data[i].age + "</td>";
    114                     end += "<td>" + data[i].nation + "</td>";
    115                     end += "<td>" + data[i].class + "</td>";
    116                     end += "</tr>";
    117 
    118                     document.getElementById("tbody").innerHTML += end;
    119                 }
    120                 document.getElementById("span").innerHTML = number;
    121             }
    122         });
    123     }
    124 
    125 
    126 </script>
     1 public partial class Default2 : System.Web.UI.Page
     2 {
     3     protected void Page_Load(object sender, EventArgs e)
     4     {
     5         if (!IsPostBack)
     6         {
     7             Repeater1.DataSource = new UsersData().select(3,1);
     8             Repeater1.DataBind();
     9         }
    10     }
    11 }
    用Repeater绑定初始数据
     1 <%@ WebHandler Language="C#" Class="Hand" %>
     2 
     3 using System;
     4 using System.Web;
     5 using System.Collections.Generic;
     6 
     7 public class Hand : IHttpHandler {
     8     
     9     public void ProcessRequest (HttpContext context) {
    10         int c = Convert.ToInt32(context.Request["count"]);
    11         int n = Convert.ToInt32(context.Request["number"]);
    12 
    13         string json = "[";
    14 
    15         List<WindowsFormsApplication1.App_Code.Users> ulist = new WindowsFormsApplication1.App_Code.UsersData().select(c,n);
    16         int count = 0;
    17         foreach (WindowsFormsApplication1.App_Code.Users u in ulist)
    18         {
    19             if (count > 0)
    20             {
    21                 json += ",";
    22             }
    23             json += "{"username":"" + u.Username+ "","password":"" + u.Password+ "","nickname":"" + u.Nick + "","sex":"" + (u.Sex ? "" : "") + "","birthday":"" + u.Birthday.ToString("yyyy年MM月dd日") + "","nation":"" + u.NationName + "","class":"" + u.ClassName + "","age":"" + u.age + ""}";
    24             count++;
    25         }
    26 
    27         json += "]";
    28         context.Response.Write(json);
    29         context.Response.End();
    30 
    31     }
    32  
    33     public bool IsReusable {
    34         get {
    35             return false;
    36         }
    37     }
    38 
    39 }
    Hand.ashx
     1 <%@ WebHandler Language="C#" Class="Hand2" %>
     2 
     3 using System;
     4 using System.Web;
     5 
     6 public class Hand2 : IHttpHandler {
     7     
     8     public void ProcessRequest (HttpContext context) {
     9         string json1;
    10         System.Collections.Generic.List<WindowsFormsApplication1.App_Code.Users> Ulist = new WindowsFormsApplication1.App_Code.UsersData().Select();
    11         int a = Ulist.Count;
    12         string maxpage = (Math.Ceiling(a / 3.0)).ToString();
    13         json1 = "{"aaa":"" + maxpage + ""}";
    14         context.Response.Write(json1);
    15         context.Response.End();
    16     }
    17  
    18     public bool IsReusable {
    19         get {
    20             return false;
    21         }
    22     }
    23 
    24 }
    Hand2.ashx

  • 相关阅读:
    Docker Swarm(十)Portainer 集群可视化管理
    Docker Swarm(九)资源限制
    Docker Swarm(八)滚动更新、回滚服务
    Docker Swarm(七)Scale 扩(缩)容服务
    Docker Swarm(六)Label 节点标签与服务约束
    Docker Swarm(五)Config 配置管理
    select样式调整
    在VS2008和VS2010中禁用Visual Assist X
    解决IE与FF 中 input focus 光标移动在最后的方案
    Office Web APP预览如何去掉顶部版权标志“Microsoft Office Web Apps”
  • 原文地址:https://www.cnblogs.com/maxin991025-/p/6287581.html
Copyright © 2011-2022 走看看