当前位置: 代码迷 >> Web前端 >> 零脚本配置分页
  详细解决方案

零脚本配置分页

热度:117   发布时间:2012-11-01 11:11:32.0
0脚本配置分页

功能主要有:

1.ajax分页,可设定每页显示数量,保存cookie,不足空行填充,隔行换色,独行点击高亮,突显行号,自定义跳转页。

2.查找,配置要查找的属性,可单属性查找,全属性查找,多个时间区间查找,查找结果显示效果与ajax请求一致

3.排序,全部属性列排序,数字字段排序,本地汉字排序,升降序切换

4.实现上述功能你无需任何JavaScript代码,只需按特定的格式写html代码即可。

?

html代码如下:

?

?

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<link rel="stylesheet" href="/test2/css/my.css" type="text/css" media="screen" />
</head>
<body>
<div class="Big">
<div class="toolBar">
	<div style="float:left;font-size:12px;">
		<select id="listColumn" name="listColumn" style="float:left;">
        	<option value="1">显示所有记录</option>
            <option value="num">编号</option>
            <option value="name">监测方法</option>
            <option value="fromTime">发布日期</option>
            <option value="valid">有效年限</option>
            <option value="issue">发布单位</option>
            <option value="" selected="selected">所有列中查找</option>
        </select>
        <input type="text" id="SearchStr" name="SearchStr">
        <input type="text" id="time1" name="time1" class="Wdate" onfocus="WdatePicker({skin:'whyGreen'})" style="display:none;">
        <input type="text" id="time2" name="time2" class="Wdate" onfocus="WdatePicker({skin:'whyGreen'})" style="display:none;">
        <a href="#" id="SIMsearch"><img src="/test2/images/search.png"/></a>
        <a href="#" id="SIMsearch1" style="display:none;"><img src="/test2/images/search.png"/></a>
	</div>
	<div style="float:right;font-size:12px;">
        <a href="#" id="addBut"><img src="/test2/images/add.png"/>新增</a>
        <span id="whosPage" style="display:none;">monitorMethod</span>
        <span id="openWidth" style="display:none;">450</span>
        <span id="openHeight" style="display:none;">300</span>
        <span id="hasTimeSearch" style="display:none;">fromTime</span>
	</div>
</div>
<div class="containDate">
	<table class="dateView" id="tt">
		<thead>
			<tr style="position:relative; top:expression(this.offsetParent.scrollTop);">
				<th width="3%"></th>
				<th width="11%" tName="num">编号</th>
				<th width="18%" tName="name">监测方法</th>
				<th width="15%" tName="fromTime">发布日期</th>
				<th width="10%" tName="valid">有效年限</th>
				<th width="23%" tName="issue">发布单位</th>
				<th width="20%">操作</th>
			</tr>
		</thead>
		<tbody id="tDate">
		</tbody>
	</table>
</div>
<%@include file="/page.jsp" %>
</div>
</body>
</html>

?

?

只适合不会做界面,而又需要快速开发的学生做毕业设计使用~

?

  相关解决方案