6.为使界面美观使用JQuery
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>客户</title>
<script type="text/javascript" src="${basePath }ui/common/script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="${basePath }ui/common/script/jquery.corners.min.js"></script>-
<link href="${basePath}ui/client/css/styles.css" rel="stylesheet" type="text/css">
<!-- *************************************************************************************************************************** -->
<link rel="stylesheet" type="text/css" href="${basePath }ui/common/jpage/css/jpage.css"/>
<script type="text/javascript">
list();
/*******************************删除一个对象时运行*************************************/
function ajaxDel(clientID)
{
if(confirm("确定要删除吗？")){
$.ajax({
type: "POST",
url: "${basePath}client.do?method=dodel&clientID="+clientID,
error: function(){
$("#info").val("服务器繁忙，请稍后重试...");
},
success: function(msg){
if(msg=="err")
{
$("#info").val("服务器繁忙，数据删除失败，请稍后重试...");
}
else{
play();
}
list();
}
});
}
}
/*************************删除多个对象时运行*******************************************/
function ajaxDelAll(clientID)
{
$.ajax({
type: "POST",
url: "${basePath}client.do?method=dodelmore&clientID="+clientID,
error: function(){
$("#info").val("服务器繁忙，请稍后重试...");
},
success: function(msg){
if(msg=="err")
{
$("#info").val("服务器繁忙，数据删除失败，请稍后重试...");
}
else
{
play();
list();
}
}
});
}
/***************************************************************************************/
function list() {
/*方法名称*/
var method;
/*列表容器*/
var content;
/*加载初始化事件*/
ajax();
/*绘制列表*/
function draw(json)
{
content = '<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0px;">';
content += '<tr align="center" class="default_pgToolbar">';
/*绘制表头内容*/
content += '<td width="40"><input type="checkbox" id="allchk"></input></td>';
content += '<td width="100">客户名称</td>';
content += '<td width="100">电话</td>';
content += '<td width="100">负责人</td>';
content += '<td width="100">操作</td>';
content += '</tr>';
/*绘制数据*/
for(var i=0; i<json.list.length; i++)
{
content += '<tr align="center" style="border-bottom: 1px solid #88B4FF;">';
content += '<td><input type="checkbox" id="' + json.list[i].clientID + '" name="chk"/></td>';
content += '<td><a href="${basePath}client.do?method=todetail&clientID=' + json.list[i].clientID + '">' + json.list[i].name + '</a></td>';
content += '<td>' + json.list[i].phone + '</td>';
content += '<td>' + json.list[i].user.name+ '</td>';
content += '<td><a href="${basePath}client.do?method=toupdate&clientID=' + json.list[i].clientID + '">编辑</a> | ';
content += '<a href="javascript:ajaxDel('+json.list[i].clientID+')">删除</a></td></tr>';
content += '</tr>';
}
content += '</table>';
/*绘制分页工具条*/
content += '<table width="100%" border="0" cellpadding="0" cellspacing="0" class="default_pgToolbar" id="toolbarBody">';
content += '<tr><td align="center">';
content += '<table border="0" cellpadding="0" cellspacing="0" class="default_pgPanel">';
content += '<tr><td valign="middle"><a id="delall">批量删除 </a><select class="default_pgPerPage" title="每页显示条数" id="pageSize">';
$.each([5,10,20,30,40],function(i,n){
var flag = false;
if(json.pageSize == n) flag = true;
if(flag) {
content += '<option value="' + n + '" selected="selected">' + n + '</option>';
} else {
content +='<option value="' + n + '">' + n + '</option>';
}
});
content += '</select> </td>';
content += '<td valign="middle"><div class="default_separator"></div></td>';
content += '<td valign="middle"><div class="default_pgBtn default_pgFirst" title="首页" id="first"></div></td>';
content += '<td valign="middle"><div class="default_pgBtn default_pgPrev" title="上一页" id="prev"></div></td>';
content += '<td valign="middle" width="10" align="left"><div class="default_separator"></div></td>';
content += '<td valign="middle"> 第 <input name="currentPage" type="text" id="currentPage" value="' + json.currentPage + '" size="4" title="页码"> 页 / 共 <span class="_pgTotalPage" id="totalpages">' + json.totalPages + '</span> 页 </td>';
content += '<td valign="middle" width="10" align="right"><div class="default_separator"></div></td>';
content += '<td valign="middle"><div class="default_pgBtn default_pgNext" title="下一页" id="next"></div></td>';
content += '<td valign="middle"><div class="default_pgBtn default_pgLast" title="尾页" id="last"></div></td>';
content += '<td valign="middle"><div class="default_separator"></div></td>';
content += '<td valign="middle"><div class="default_pgBtn default_pgRefresh" title="刷新" id="refresh"></div></td>';
content += '<td valign="middle" width="10" align="left"><div class="default_separator"></div></td>';
content += '<td valign="middle" class="default_pgSearchInfo" id="info"> 检索到 ' + json.totalRows + ' 条记录，显示第 <span class="default_pgStartRecord">' + (json.startRow + 1) + '</span> 条 - 第 <span class="default_pgEndRecord">' + (json.startRow + json.pageSize) + '</span> 条记录 </td></tr></table>';
content += '</td></tr>';
content += '</table>';
}
/*ajax获取json对象*/
function ajax()
{
$.ajax({
type: "POST",
dataType: "json",
url: "${basePath}client.do?method=dolist&pageMethod=" + method + "&pageSize=" + $('#pageSize').val() + "¤tPage=" + $('#currentPage').val(),
error: function(){
$("#info").val("服务器繁忙，数据信息获取失败。请稍后重试...");
},
success: function(json){
$("#boxDiv").empty();
draw(json);
$("#boxDiv").append(content);
init();
}
});
}
/*初始化事件*/
function init() {
/*添加按钮按下状态样式*/
function pressHandler(){
$(this).addClass("default_pgPress");
}
/*移除按钮按下状态样式*/
function unpressHandler(){
$(this).removeClass("default_pgPress");
}
/*首页按钮鼠标点击事件*/
$("#first").mousedown(pressHandler);
$("#first").mouseup(unpressHandler);
$("#first").click(function(){
method = "first";
});
/*上一页按钮鼠标点击事件*/
$("#prev").mousedown(pressHandler);
$("#prev").mouseup(unpressHandler);
$("#prev").click(function(){
method = "previous";
});
/*下一页按钮鼠标点击事件*/
$("#next").mousedown(pressHandler);
$("#next").mouseup(unpressHandler);
$("#next").click(function(){
method = "next";
});
/*尾页按钮鼠标点击事件*/
$("#last").mousedown(pressHandler);
$("#last").mouseup(unpressHandler);
$("#last").click(function(){
method = "last";
});
/*刷新按钮鼠标点击事件*/
$("#refresh").mousedown(pressHandler);
$("#refresh").mouseup(unpressHandler);
$("#refresh").click(function(){
method = "any";
});
/*每页显示条数下拉框的项改变事件*/
$("#pageSize").change(function(){
method = "any";
});
/*************************************************************************************************************************/
/*页码文本框的失去焦点事件*/
$("#currentPage").blur(function(){
if($(this).val().length == 0)
{
$(this).val(1);
}
if($(this).val().length > 5)
{
$(this).val($("#totalpages").html());
}
method = "any";
});
/*当键盘按下时执行*/
$("#currentPage").keydown(function(event){
if((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8)
{
event.keyCode = 0;
return false;
}
});
/*************************************************************************************************************************/
/*绑定ajax事件*/
$("#first").bind("click",ajax);
$("#prev").bind("click",ajax);
$("#next").bind("click",ajax);
$("#last").bind("click",ajax);
$("#refresh").bind("click",ajax);
$("#currentPage").bind("blur",ajax);
$("#pageSize").bind("change",ajax);
$("#allchk").change(function(){
$(":checkbox").attr("checked",$(this).attr("checked"));
});
/*************************************点击批量删除时运行************************************************/
$("#delall").click(function(){
if(confirm("确定要删除吗？")){
//声明一个变量用来存储需要删除的所有ID
var idsstring="";
delalls = $("input:checked");
for(i=0;i<delalls.length;i++)
{
if(idsstring=="" )
{
idsstring = $(delalls[i]).attr("id");
}
else
{
idsstring += "," + $(delalls[i]).attr("id");
}
}
ajaxDelAll(idsstring);
}
});
/*******************************************************************************************************/
}
}
</script>
</head>
<body>
<div id="boxDiv" style="margin-top: 30px; width: 90%; "></div>
<%@ include file="../common/delete.jsp" %>
</body>
</html>
7.界面样式CSS和delete.jsp：
Jpage样式：
@CHARSET "utf-8";
.default_container {
position: relative;
}
.default_pgContainer {
min-height:100px;
_height:100px;
}
.default_pgToolbar {
border-collapse: separate;
height:30px;
valign:middle;
font-size:12px;
border:1px solid #DADADA;
background: url(../images/bg.gif);
margin:10px 0 -1px 0;
}
.default_pgToolbar td {
font-size:12px;
}
.default_pgPanel {
float: left;
border-collapse: separate;
padding:0 10px 0 10px;
}
.default_pgBtn {
width: 20px;
height: 20px;
display: block;
cursor: pointer;
margin:1px;
}
.default_pgPress {
margin:2px 0 0 2px;
}
.default_pgPrev {
background: url(../images/prev.gif) no-repeat center;
}
.default_pgPrevDisabled {
background: url(../images/prev_disabled.gif) no-repeat center;
cursor:auto;
}
.default_pgNext {
background: url(../images/next.gif) no-repeat center;
}
.default_pgNextDisabled{
background: url(../images/next_disabled.gif) no-repeat center;
cursor:auto;
}
.default_pgFirst {
background: url(../images/first.gif) no-repeat center;
}
.default_pgFirstDisabled {
background: url(../images/first_disabled.gif) no-repeat center;
cursor:auto;
}
.default_pgLast {
background: url(../images/last.gif) no-repeat center;
}
.default_pgLastDisabled {
background: url(../images/last_disabled.gif) no-repeat center;
cursor:auto;
}
.default_pgRefresh {
background: url(../images/nowait.gif) no-repeat center;
}
.default_pgLoad {
background: url(../images/loading.gif) no-repeat center;
}
.default_pgCurrentPage {
width:30px;
height:16px;
line-height:16px;
text-align:center;
border:1px solid #CCCCCC;
background:url(../images/text_bg.gif) repeat-x;
}
.default_pgSearchInfo {
padding-left:20px;
}
.default_mask {
width: 100%;
height: 100%;
background: url(../images/loading.gif) no-repeat center;
background-color: #FFFFFF;
position: absolute;
z-index: 999;
top:0;
left:0;
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:.70;
}
.default_separator {
width:2px;
height:20px;
background: url(../images/separator.gif) no-repeat center;
}
----------------------
delete.jsp:
<%@ page language="java" pageEncoding="utf-8"%>
<script type="text/javascript">
var bdiv;
var centerdiv;
var flag = false;
function play(){
centerdivwidth = $("#showmsg").width();
if(flag){
centerdivwidth += 100;
}
flag = true;
centerdivheight = $("#showmsg").height();
centerdivleft = ($("body").width()-centerdivwidth)/2 + "px";
centerdivtop= (window.screen.height-centerdivheight)/2-215 + "px";
bdiv = $("<div>").css({
"opacity":"0.8",
"width":"100%",
"height":"100%",
"background":"white",
"position":"absolute",
"top":"0px",
"left":"0px",
"z-index":"10",
"display":"none"
}).appendTo($("body"));
centerdiv = $("<div>").css({
"opacity":"0.9",
"width":"220px",
"height":"19px",
"position":"absolute",
"top":centerdivtop,
"left":centerdivleft,
"z-index":"11",
"display":"none"
}).appendTo($("body"));
$("#showmsg").appendTo($(centerdiv));
initPlay();
}
function initPlay(){
$(showmsg).show();
divin();
setTimeout(divout,1000);
}
function divin(){
$(bdiv).fadeIn("1000");
$(centerdiv).fadeIn("1000");
}
function divout(){
$(bdiv).fadeOut("1000");
$(centerdiv).fadeOut("1000");
}
</script>
<div id="showmsg" style="width:100px; height:30px; color: red;display: none;">删除成功！！！</div>
8.界面效果图：(内附相片中)界面上的图片自己可选择.
http://blog.163.com/dangzhengtao@yeah/editPhoto.do?albumId=-1&photoId=fks_087070080083081068082094086075072081086075084086094068080#
相关推荐
为了解决这个问题，分页技术应运而生。jPage 是一个流行的 JavaScript 分页插件，它支持异步分页，能够在用户滚动页面时动态加载数据，从而提高网页性能和用户体验。 ### 1. jPage 分页原理 jPage 的核心思想是...
**jQuery jPage 分页插件详解** 在网页开发中，数据量庞大的页面往往需要实现分页功能，以提高用户体验和加载速度。`jPage` 是一个基于 jQuery 的轻量级分页插件，专为解决这个问题而设计。版本 `v1.0.8` 提供了...
《jPage：jQuery AJAX表格动态分页实现详解》 在网页开发中，数据展示往往涉及到大量的数据处理，尤其是在用户交互时，如何优雅地处理大量数据的分页展示，成为了提升用户体验的关键。jPage是一款基于jQuery的插件...
JPage<MyEntity> page = new JPage<>(pageNum, pageSize); // 使用MyBatis的SqlSession查询数据 List<MyEntity> dataList = sqlSession.selectList("selectByPage", page); // 将数据绑定到JPage page.setData...
jQuery.jpage.js是一款基于jQuery的轻量级分页插件，用于实现网页内容的分页显示，提升用户体验，尤其在处理大量数据时效果显著。它提供了动态加载、切换动画等多种功能，使得用户在浏览长列表时能流畅地进行翻页...
1、本版分页只针对Sql Server数据库，采用top n分页方式，节约资源。 2、支持GridView、DataGrid、DataList等数据控件。 3、本分页已应用于数据量百万级的项目中。 4、使用简单，并包含多种样式布局 一、使用方法：...
<title>jQuery分页组件示例</title> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="jPage.min.js"></script> <style> /* 自定义分页样式 */ </style> </head> <body> <!-- ...
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link> <link ID="skin" rel="stylesheet" type="text/css" href="<%=basePath %>css/config.css" /> <script ...
**jQuery分页技术详解** 在Web开发中，尤其是在大数据量展示的场景下，分页是一种不可或缺的功能，它能够有效地组织和管理数据，提高用户体验。jQuery，一个轻量级的JavaScript库，提供了简单易用的API，使得实现...
在网页开发中，数据量庞大的情况下，为了提高用户体验和页面加载速度，通常会采用分页技术来展示数据。jQuery是一个非常流行的JavaScript库，它提供了一系列的分页插件，可以帮助开发者轻松实现页面分页功能。本篇...
`jsp分页标签JPage`是一个在Java Web开发中常见的自定义标签库，用于实现页面数据的分页展示。在这个项目中，作者提供了两种不同的分页样式：一种是基础的“上一页”和“下一页”的切换，另一种则是模仿百度搜索结果...
本文将深入探讨“jQuery中jhpage分页的改进版”，这是一个专为网页实现分页功能的插件，它在原有的基础上进行了优化，特别是增加了数据位置的显示功能，从而提供更友好的用户体验。 首先，我们来理解什么是分页。在...
JPage组件是一个在IT行业中广泛使用的前端开发框架，主要用于构建高效、可维护的网页应用。这个框架通过提供一系列预封装的UI组件和便捷的数据绑定机制，帮助开发者快速地搭建交互丰富的用户界面。JPage组件下载通常...
为了解决这个问题，我们可以采用JS数据分页技术，它允许用户按需加载数据，提高用户体验并减轻服务器压力。 **一、JS分页原理** JS数据分页的基本思想是：前端根据用户的操作（如点击“下一页”按钮）动态请求...
通过这个"java分页资料总结"，开发者可以深入了解和掌握Java环境下的分页技术，无论是数据库层面还是应用层面上，都能找到适用的解决方案。理解并熟练运用这些知识，将有助于构建更高效、用户体验更好的数据驱动应用...
但是他们插件的附属功能很多又不需要，而且没必要就为了这么一个功能区引用这个库，为速度考虑吧，当然你服务器好也行，但是... jpage.js 代码如下:/* 排序工具 by Funny ZAk <silenceacegmail> 2009-8-23 “调用方式
然而，Eclipse的启动需要较长的时间，同时为了使用Scrapbook编辑器，又需要新建一个项目来存放.jpage文件，每个打开的.jpage文件又会启动一个独立的Java虚拟机，为了得到上述的优点，需要较多的额外工作，同时也会...