<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.js"></script>
<link href="../css/jquery-ui.css" rel="stylesheet">
<script type="text/css">
body{
font-family: "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
select {
200px;
}
</script>
<script>
$(document).ready(function (){
$( "#selectmenu" ).selectmenu();
$( "#pageselect" ).selectmenu();
$('#selectmenu').on('selectmenuchange', function() {
$("#dataList tbody tr").hide();
var val= "#dataList tbody tr[userid='" + $(this).val() +"']:lt("+ $("#pageselect").val()+")";
$(val).show();
countPage();
});
$("#pageselect").on("selectmenuchange", function() {
$("#dataList tbody tr").hide();
var val= "#dataList tbody tr[userid='" + $("#selectmenu").val() +"']:lt("+ $(this).val()+")";
$(val).show();
countPage();
});
});
function gotoPage(obj){
var pageCnt = $("#pageselect").val();
var from = ($(obj).text() - 1) * pageCnt -1;
var to = $(obj).text() * pageCnt;
$("#dataList tbody tr").hide();
var val= "#dataList tbody tr[userid='" + $("#selectmenu").val() +"']:lt("+ to+")";
if(from > 0){
val += ":gt("+ from +")";
}
$(val).show();
}
function countPage(){
var pageCnt = $("#pageselect").val();
var val= "#dataList tbody tr[userid='" + $("#selectmenu").val() +"']";
var len = $(val).length;
var pages = parseInt(len / pageCnt);
if(len > pages * pageCnt){
pages += 1;
}
$("#pageList").empty();
if(pages > 1){
$("#pageList").append("pages: ");
for(var i=1; i<= pages; i++){
var tmp = "<a href='javascript:void(0);' onclick='gotoPage(this);'>" + i + "</a> ";
$("#pageList").append(tmp);
}
}
}
</script>
</head>
<body>
<div id="container-main">
<h2 class="demoHeaders">Selectmenu</h2>
<div style="padding-bottom:10px;">
<select id="selectmenu">
<option value="den">田</option>
<option value="yu">ウ</option>
<option value="zhou">zhou</option>
</select>
</div>
<div style="padding-bottom:10px;">
<select id="pageselect">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
</select>
</div>
<div id="pageList">
</div>
<div>
<table id="dataList" border="1px" width="300px" >
<thead>
<tr><th>No.</th><th>userName</th><th>FileName</th></tr>
</thead>
<tbody>
<tr id="fileid1" userid="den">
<td>1</td>
<td>den1</td>
<td>file1</td>
</tr>
<tr id="fileid2" userid="yu">
<td>2</td>
<td>yu1</td>
<td>file2</td>
</tr>
<tr id="fileid3" userid="den">
<td>3</td>
<td>den2</td>
<td>file3</td>
</tr>
<tr id="fileid4" userid="yu">
<td>4</td>
<td>yu2</td>
<td>file4</td>
</tr>
<tr id="fileid5" userid="den">
<td>5</td>
<td>den3</td>
<td>file5</td>
</tr>
<tr id="fileid6" userid="yu">
<td>6</td>
<td>yu3</td>
<td>file6</td>
</tr>
<tr id="fileid7" userid="den">
<td>7</td>
<td>den4</td>
<td>file7</td>
</tr>
<tr id="fileid8" userid="zhou">
<td>8</td>
<td>zhou1</td>
<td>file8</td>
</tr>
<tr id="fileid9" userid="den">
<td>9</td>
<td>den5</td>
<td>file9</td>
</tr>
<tr id="fileid10" userid="den">
<td>10</td>
<td>den6</td>
<td>file10</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>