InfoList.aspx

最新推荐文章于 2024-09-02 17:34:07 发布
easybjy
最新推荐文章于 2024-09-02 17:34:07 发布
阅读量577
点赞数
分类专栏： Bee 文章标签： javascript function class border webform xhtml
Bee 专栏收录该内容
6 篇文章 0 订阅
订阅专栏
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="pgDiv.WebForm1" %>
 
<!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>
    <title>信息列表页</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="AjaxPager.js" type="text/javascript"></script>
    <style type="text/css">
        /*全局样式*/
        *{margin:0; padding:0;}
        body{font-size:12px; font-family:Arial,宋体,Times New Roman; overflow: hidden; text-align:center;}
        ul{list-style-type:none;}
        :focus{outline:0;}
        .clear{ clear:both; font-size:0; line-height:0;}
        a.img{border:none;}
        
        h1{font-size:14px;}
        #Citys{width:500px; border-right:1px solid #f60; border-top:1px solid #f60;}
        #Citys td, #Citys th{padding:3px; height:18px; border-left:1px solid #f60; border-bottom:1px solid #f60;}
        #Citys tr th{color:Red; background:#CCC;}
        #Citys tr.thead th{height:22px;color:#FFF; background:#F60;}
        #Citys tr.odd{background:#ccc;}
        #Citys tr.hover{background:#ccc;}
        
        
        
         
        .pageBtns{font-size:12px; color:#29597D; padding-top:8px; text-align:center;} 
        .pageBtns a{border:1px solid #9AAFE5; padding:2px 5px; background-color:#FFF; margin-right:5px; color:#776AC1; text-decoration:none;}
        .pageBtns a.current{border-color:#000080; background-color:#2E6AB1; font-weight:bold; color:#FFF;}
        .pageBtns a.disable{color:#B8D5E9; cursor:default; background-color:#ECF3FE;}
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var PageCity = new AjaxPager({
                current: 1,
                pageSize: 10,
                url: "Handler.ashx?temp=" + (+new Date),
                handler: formatData       //事件处理函数
            });
            PageCity.loadPage(1);  //页面加载完成后就加载第一页
        });
        function selectName(name, id) {
            //alert(name + "\n" + id);
            window.location = "UserDetail.aspx?id=" + id;
        };
        function formatData(data, page) {  //分别代表查找到的数据和当前的AjaxPager对象
 
            //TODO:应要做一下如果没有数据的判断
 
            var tb = $("#Citys");    //构建数据的显示
            var strHtml = '<tr class="thead"><th colspan="4">人员信息列表</th></tr><tr><th style="width:80px">编号</th><th>年龄</th><th>城市编号</th><th>名字</th></tr>';
            var str = data;
            $("#totalCount").html(str.records);
            $("#totalPage").html(str.total);
            $("#curPage").val(str.curPage);
            for (var i = 0; i < str.rows.length; i++) {
                //strHtml += "<tr οnclick='selectName("" + str.rows[i].Id + "","" + str.rows[i].Name + "")'><td>" + str.rows[i].Id + "</td><td>" + str.rows[i].Name + "</td><td>修改&删除还没有做</td>";
                strHtml += '<tr οnclick="selectName("' + str.rows[i].name + '","' + str.rows[i].ID + '")"><td>' + str.rows[i].ID + '</td><td>' + str.rows[i].age + '</td><td>' + str.rows[i].localAddress + '</td><td>' + str.rows[i].name + '</td></tr>';
            }
            //alert(strHtml);
            tb.html(strHtml);
            tb.find("tr:gt(1):odd").addClass("odd");   //给表格的奇数行添加背景颜色
            tb.find("tr:gt(1)").hover(function () {     //给表格的行添加鼠标滑过更改背景样式
                $(this).addClass("hover");
            }, function () {
                $(this).removeClass("hover");
            });
            var strNums = '';
            var pageIndex = parseInt(page.current), pageSize = parseInt(page.pageSize), totalPage = parseInt(str.total);
            var start, end;
            if (totalPage <= 10) {
                start = 1;
                end = totalPage;
            }
            else {
                if (pageIndex <= 10) {
                    start = 1;
                    end = 10;
                }
                else if (pageIndex > 10 && pageIndex > Math.floor(totalPage / 10) * 10) {
                    start = Math.floor(totalPage / 10) * 10 + 1;
                    end = totalPage;
                } else if (pageIndex > 10 && pageIndex <= Math.floor(totalPage / 10) * 10) {
                    start = Math.floor((pageIndex - 1) / 10) * 10 + 1;
                    end = start + 9;
                }
            }
            for (var i = start; i <= end; i++) {
                i == pageIndex ? strNums += '<a href="javascript:void(0)" class="current">' + i + '</a>' : strNums += '<a href="javascript:void(0)">' + i + '</a>';
            }
            var strPrev = pageIndex == 1 ? '<div><a href="javascript:void(0)" class="btnText firstPage disable">首页</a><a href="javascript:void(0)" class="btnText prev disable">上一页</a>' : '<div><a href="javascript:void(0)" class="btnText firstPage">首页</a><a href="javascript:void(0)" class="btnText prev">上一页</a>';
            var strNext = pageIndex == totalPage ? '<a href="javascript:void(0)" class="btnText next disable">下一页</a><a href="javascript:void(0)" class="btnText disable">尾页</a></div>' : '<a href="javascript:void(0)" class="btnText next">下一页</a><a href="javascript:void(0)" class="btnText lastPage">尾页</a></div>'
 
            //alert(strPrev);
            //alert(strNums);
            //alert(strNext);
 
            var $pageBtns = $(".pageBtns"); $pageBtns.html("");
 
            var $btnHtml = $(strPrev + strNums + strNext);
 
            $btnHtml.appendTo($pageBtns);
 
            $btnHtml.find("a:not(.btnText)").click(function () {          //给导航的 上一页，下一页，首页，尾页及数字链接添加点击事件
                $(this).addClass("current").siblings().removeClass("current");
                page.loadPage(parseInt($(this).html()));
            }).siblings(".prev").click(function () {  //上一页
                if (page.current <= 1) {   //如果是小于第一页，则上一页按钮点击将不执行任何操作
                    return false;
                }
                $(this).siblings(".current").removeClass("current").prev("a").addClass("current");
                page.loadPrevPage();
            }).siblings(".next").click(function () {   //下一页
                if (page.current >= totalPage) {   //如果是大于或等于最大页码，则下一页按钮也不执行任何操作 
                    return false;
                }
                $(this).siblings(".current").removeClass("current").next("a").addClass("current");
                page.loadNexPage();
            }).siblings(".firstPage").click(function () {    //首页
                page.loadPage(1);
            }).siblings(".lastPage").click(function () {   //尾页
                page.loadPage(totalPage);
            });
 
        };
    </script>
</head>
<body>
<table id="Citys" cellpadding="0" cellspacing="0" border="0" align="center">
    <!--
    <tr class="thead">
        <th colspan="4">中国主要城市一览</th>
    </tr>
    <tr>
        <th style="width:80px">编号</th><th>城市编号</th><th>城市名称</th><th>所属区域编号</th>
    </tr>
    <tr>
        <td>1</td><td>001201</td><td>南昌</td><td>001200</td>
    </tr>
    -->
</table>
<div class="pageBtns"></div>
</body>
</html>
easybjy
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
InfoList.aspx

信息列表页 /*全局样式*/ *{margin:0; padding:0;} body{font-size:12px; font-family:Arial,宋体,Times New Roman; overflow: hidden; text-align:center;} ul{list-style-typ
复制链接

扫一扫
专栏目录