<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<style type="text/css">
ul, li {
margin: 0;
padding: 0;
}
.biaoti {
border: 1px solid red;
color: red;
margin-top: 10px;
height: 40px;
}
ul {
margin-top: 0.1px;
list-style: none;
height: 100%;
}
ul li {
text-align: center;
list-style-type: none;
margin-left: -1px;
float: left;
padding-left: 0px;
border: 1px solid #0094ff;
height: 100%;
16.5%;
}
#left {
border: 1px solid #0094ff;
80%;
float: left;
height: 40px;
}
#right {
margin-left: 80%;
border: 1px solid #000000;
20%;
height: 40px;
}
.direction {
height:50%;
border-bottom: 1px solid #ff00dc;
}
</style>
<script type="text/javascript">
$(function () {
alert(1);
$("#right .direction").eq(0).on("click", function () {
// alert("up");
if (pageIndex < pages) {
pageIndex++;
changeNum();
}
})
$("#right .direction").eq(1).on("click", function () {
//alert("down");
if (pageIndex > 1) {
pageIndex--;
changeNum();
}
})
});
function changeNum() {
var startRecord = (pageIndex - 1) * pageSize + 1;
var endRecord = pageIndex * pageSize;
var newHtml = "";
newHtml+="<ul>"
for (var i = startRecord; i <= endRecord; i++) {
if (i > rows) { break;}
newHtml+="<li ><div style="margin-top:5%">"+i+"</li>"
}
newHtml+="</ul>"
$("#left").html(newHtml);
}
var pageIndex = 1;
var pageSize = 6;
var rows = 31;
var pages = Math.floor((rows - 1) / pageSize) + 1;
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 100%;">
<div class="biaoti">
<div id="left">
<ul>
<li ><div style="margin-top:5%">01</div></li>
<li><div style="margin-top:5%">02</div></li>
<li><div style="margin-top:5%">03</div></li>
<li><div style="margin-top:5%">04</div></li>
<li><div style="margin-top:5%">05</div></li>
<li><div style="margin-top:5%">06</div></li>
</ul>
</div>
<div id="right">
<div class="direction" style="background:#0094ff">
<div style="text-align: center;">+</div>
</div>
<div class="direction" style="background:#808080">
<div style="text-align: center;">-</div>
</div>
<%-- <div class="direction">
<div style="text-align: center;">down1</div>
</div>--%>
</div>
</div>
<div class="biaoti">
<ul>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
</div>
</form>
</body>
</html>