码迷，mamicode.com
首页 > Web开发 > 详细

Asp +Js 无刷新分页

时间：2017-01-12 07:58:34      阅读：237      评论：0      收藏：0      [点我收藏+]

标签：lower   清空   ast   html   rstp   count   ++   ext   add   

Default.aspx代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!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>
    <script src="Scripts/jquery-3.1.1.js" type="text/javascript"></script>
    <link href="Style_Table.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var pageSize = "10"; //每页行数 
        var currentPage = 1; //当前页 
        var totalPage = 1; //总页数 
        var params = ""; //参数
        $(document).ready(function () {//jquery代码随着document加载完毕而加载 
            //分页查询 
            queryForPages();

            //首页 
            $("#firstPage").click(function () {
                currentPage = "1";
                queryForPages();
            });
            //上一页 
            $("#previous").click(function () {
                if (currentPage > 1) {
                    currentPage--;
                }
                queryForPages();
            });
            //下一页 
            $("#next").click(function () {
                if (currentPage < totalPage) {
                    currentPage++;
                }
                queryForPages();
            });
            //尾页 
            $("#last").click(function () {
                currentPage = totalPage;
                queryForPages();
            });
            //GO
            $("#Button1").click(function () {
                currentPage = $("#Text2").val();
                if (currentPage <= totalPage) {
                    queryForPages();
                } else {
                }
            });
        });
        function queryForPages() {
            $.ajax({
                type: ‘post‘,
                dataType: ‘json‘,
                url: ‘PagerHandler.ashx‘,
                data: ‘currentPage=‘ + currentPage + ‘&pageSize=‘ + pageSize,
                success: function callbackFun(data) {

                    //清空数据 
                    clearDate();
                    fillTable(data);
                }

            });
        }
        //填充数据 
        function fillTable(info) {
            if (info.length > 0) {

                if (info[info.length - 1].Total % 10 == 0) {
                    totalPage = info[info.length - 1].Total / 10;
                } else {
                    totalPage = Math.ceil(info[info.length - 1].Total / 10);
                }

                $("#Text3").attr("value", ‘/‘ + totalPage);

                var tbody_content = ""; //不初始化字符串"",会默认"undefined" 
                for (var i = 0; i < info.length; i++) {

                    tbody_content +=
                        "<tr>" +
                        "<td data-title=‘序号‘ >" + info[i].Id + "</td>" +
                        "<td data-title=‘名称‘>" + info[i].Name + "</td>" +
                        "<td data-title=‘年龄‘>" + info[i].Age + "</td>" +
                        "<td data-title=‘性别‘>" + info[i].Sex + "</td>" +
                        "<td data-title=‘地址‘>" + info[i].Adress + "</td>" +
                        "</tr>";
                    $("#t_body").html(tbody_content);
                }
            }
            else {
                $("#t_head").html("");
                $("#t_body").html("<div style=‘height: 200px;width: 700px;padding-top: 100px;‘ align=‘center‘>" + info.msg + "</div>");
            }
        }
        //清空数据 
        function clearDate() {
            $("#t_body").html("");
        }
    </script>
    <style type="text/css">
        #Text2
        {
            width: 28px;
        }
    </style>
</head>
<body>
    <div align="center" style="width: 100%;">
        <table style="text-align: center; width: 50%;" class="bordered">
            <thead id="t_head">
                <tr>
                    <th>
                        序号
                    </th>
                    <th>
                        名称
                    </th>
                    <th>
                        年龄
                    </th>
                    <th>
                        性别
                    </th>
                    <th>
                        地址
                    </th>
                </tr>
            </thead>
            <tbody id="t_body">
                <!-- ajax填充列表 -->
            </tbody>
        </table>
        <button id="firstPage">
            首页</button>
        <button id="previous">
            上一页</button>
        <button id="next">
            下一页</button>
        <button id="last">
            尾页</button>
        &nbsp;
        <input id="Text1" type="text" value="转到第几" readonly="readonly" style="border-style: none;
            width: 59px;" />
        <input id="Text2" type="text" />
        <input id="Text3" readonly="readonly" style="border-style: none; width: 38px;" type="text"
            value="/1" />
        <button id="Button1">
            GO</button>
    </div>
    <form id="form1" runat="server">
    </form>
</body>
</html>

 

Common.cs代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.ComponentModel;
using System.Data.SqlClient;
using System.Data;

namespace WebApplication1
{
    public class Common
    {
        /// <summary>
        /// 连接字符串
        /// </summary>
        public static string DefaultConnectionString
        {
            get
            {
                return "Data Source=192.168.100.100;uid=sa;pwd=123321;Initial Catalog= Test";
            }
        }

        private static SqlParameter[] cmdPar;
        public static void setcmdPar(string strwhere, int pageindex)
        {
            cmdPar = new SqlParameter[]
            {
                new SqlParameter("@tblName", SqlDbType.VarChar),
                new SqlParameter("@strGetFields", SqlDbType.VarChar),
                new SqlParameter("@fldName", SqlDbType.VarChar),
                new SqlParameter("@PageSize", SqlDbType.Int),
                new SqlParameter("@PageIndex", SqlDbType.Int),
                new SqlParameter("@doCount", SqlDbType.Bit),
                new SqlParameter("@strWhere", SqlDbType.VarChar),
                new SqlParameter("@OrderType", SqlDbType.Bit)

            };
            cmdPar[0].Value = "[dbo].[T_Person_1] ";
            cmdPar[1].Value = "*,(select COUNT(*) from [dbo].[T_Person_1] where " + strwhere + ") as Total";
            cmdPar[2].Value = "Id";
            cmdPar[3].Value = 10;
            cmdPar[4].Value = pageindex;
            cmdPar[5].Value = 0;
            cmdPar[6].Value = strwhere;
            cmdPar[7].Value = 0;
        }

        public static BindingList<Person> GetlistpagePer(string sqlWhere, int pageindex)
        {
            setcmdPar(sqlWhere, pageindex);
            BindingList<Person> listper = new BindingList<Person>();
            using (SqlDataReader reader = SQLHelper.ExecuteReader(DefaultConnectionString, CommandType.StoredProcedure, "GetListByPage", cmdPar))
            {
                while (reader.Read())
                {
                    Person per = new Person();

                    per.Id = Convert.ToInt32(reader["Id"]);
                    per.Name = Convert.ToString(reader["Name"]);
                    per.Age = Convert.ToString(reader["Age"]);
                    per.Sex = Convert.ToString(reader["Sex"]);
                    per.Adress = Convert.ToString(reader["Adress"]);
                    per.Total = Convert.ToInt32(reader["Total"]);

                    listper.Add(per);
                }
                reader.Close();
            }
            return listper;
        }

    }
}

 

Person.cs 类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication1
{
    public class Person
    {
        private int id;
        private string name;
        private string age;
        private string sex;
        private string adress;
        private int total;

 
        /// <summary>
        /// 序号
        /// </summary>
        public int Id
        {
            get { return id; }
            set { id = value; }
        }

        /// <summary>
        /// 名称
        /// </summary>
        public string Name
        {
            get { return name; }
            set { name = value; }
        }

        /// <summary>
        /// 年龄
        /// </summary>
        public string Age
        {
            get { return age; }
            set { age = value; }
        }

        /// <summary>
        /// 性别
        /// </summary>
        public string Sex
        {
            get { return sex; }
            set { sex = value; }
        }

        /// <summary>
        /// 地址
        /// </summary>
        public string Adress
        {
            get { return adress; }
            set { adress = value; }
        }

        /// <summary>
        /// 根据条件查询的总数
        /// </summary>
        public int Total
        {
            get { return total; }
            set { total = value; }
        }
    }
}

 

PagerHandler.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.Web.Script.Serialization;

namespace WebApplication1
{
    /// <summary>
    /// PagerHandler 的摘要说明
    /// </summary>
    public class PagerHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            int pageIndex = Convert.ToInt32(context.Request["currentPage"]);
            int pagesize = Convert.ToInt32(context.Request["pageSize"]);
            if (pageIndex == 0)
            {
                pageIndex = 1;
            }

            string s = "1=1"; //条件

            BindingList<Person> perlist = new BindingList<Person>();

            perlist = Common.GetlistpagePer(s, pageIndex);
            string jsonStr = Newtonsoft.Json.JsonConvert.SerializeObject(perlist);//需要安装Json.Net
            context.Response.Write(jsonStr);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

CSS样式

 

table {
    border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;  
}

.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;         
}

.bordered tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}    
    
.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;    
}

.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}

.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}

.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}



/*----------------------*/

.zebra td, .zebra th {
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;    
}

.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
}

.zebra th {
    text-align: left;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
    border-bottom: 1px solid #ccc;
    background-color: #eee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
    background-image:    -moz-linear-gradient(top, #f5f5f5, #eee);
    background-image:     -ms-linear-gradient(top, #f5f5f5, #eee);
    background-image:      -o-linear-gradient(top, #f5f5f5, #eee); 
    background-image:         linear-gradient(top, #f5f5f5, #eee);
}

.zebra th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;  
}

.zebra th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.zebra th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.zebra tfoot td {
    border-bottom: 0;
    border-top: 1px solid #fff;
    background-color: #f1f1f1;  
}

.zebra tfoot td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.zebra tfoot td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

.zebra tfoot td:only-child{
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px
    border-radius: 0 0 6px 6px
}

 

数据库的访问类(http://www.cnblogs.com/haibing0107/p/6141242.html)以及分页的存储过程(http://www.cnblogs.com/haibing0107/p/5527205.html)都可以在这些地址上找得到。

 

Asp +Js 无刷新分页

标签：lower   清空   ast   html   rstp   count   ++   ext   add   

原文地址：http://www.cnblogs.com/haibing0107/p/6274305.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！