前台中用于显示数据的表和分页的模块是:
<table width="100%" class="maintable" cellpadding="0" cellspacing="1" border="0"
id="dataTb">
<tr align="center">
<td class="title" style="width: 15%; text-align: center;">
编辑
</td>
<td class="title" style="width: 10%; text-align: center;">
编号
</td>
<td class="title" style="width: 10%; text-align: center;">
日期
</td>
<td class="title" style="width: 15%; text-align: center;">
值班干部
</td>
<td class="title" style="width: 20%; text-align: center;">
飞行单位
</td>
<td class="title" style="width: 20%; text-align: center;">
鸟情状况
</td>
<td class="title" style="width: 20%; text-align: center;">
驱鸟效果
</td>
</tr>
</table>
<!--分页显示模块-->
<table width="100%" class="maintable" cellpadding="0" cellspacing="1" border="0"
id="pageTb">
</table>
其中的JS代码为:
/* ------------------------------------- 分页模块(编辑,删除) ------------------------------------- */
function pager(page, maxPage, total, per, countsIsVisible,key,colum,tableType,utilUrl,editUrl)//分页的辅助方法
{
//(请求的当前页,最大页数,总信息量,页的大小,详细分页信息是否可见,"关键字的<input/>ID",数据的列数,"字典表类型","后台处理类URL","添加或修改页面")
var first = "<font style='font-size:12px'>首页</font>";
var previous = "<font style='font-size:12px'>上一页</font>";
var next = "<font style='font-size:12px'>下一页</font>";
var last = "<font style='font-size:12px'>尾页</font>";
var s = "<div id='pagerDiv' class='pager-block' style='width:100%;text-align:right'><div class='pager-links' style='float:left; text-align:left; font-family:courier new,sans-serif'>";
//判断当前页是否是第一页,从而控制显示方式
if (page == 1)
{
s += (first + " " + previous + " <b>");
}
else
{
if (first != "") s += ("<a href='javascript:getPageList(1,/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + first + "</a> ");
s += ("<a href='javascript:getPageList("+(page-1)+",/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + previous + "</a> <b>");
}
//判断:当总页数多于6页时,省略中间页码,只显示第一页和最后一页
var j = (page-5 < 1) ? 1 : page-5;
var k = (page+5 > maxPage) ? maxPage : page+5;
//显示第一页
if (j > 1) s += " <a href='javascript:getPageList(1,/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>1</a> ... ";
//显示中间页码
for (var i=j; i<k+1; i++)
{
if (page == i)
{
s += ("<span class='t2'>" + i + "</span> ");
continue;
}
s += ("<a href='javascript:getPageList("+i+",/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + i + "</a> ");//{a:'caption'};
}
//显示最后一页
if (maxPage > k) s += " ... <a href='javascript:getPageList("+maxPage+",/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + maxPage + "</a> ";
//判断当前页是否是最后一页,从而控制显示方式
if (page == maxPage)
{
s += ("</b>" + next + " " + last);
}
else
{
s += ("</b><a href='javascript:getPageList("+(page+1)+",/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + next + "</a> ");
if (last != "") s += ("<a href='javascript:getPageList("+maxPage+",/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + last + "</a>");
}
//根据输入的页号,直接显示该页数据
s += " 转到 <input type='text'id='gotopage' name='gotopage' value='" + page + "' size='3' /> <input type='button' class='button' value='Go' style='height:19px;' οnclick='ongoto(/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")' />";
s += ("</div>");
//控制“总记录”“每页”“总页数”的显示
if (countsIsVisible)
{
s += ("<div class='pager-stat' style='float:lift;'>");
s += ("总记录:<span class='t2'>" + total + "</span> ");
s += ("每页:<span class='t2'>" + per + "</span> ");
s += ("总页数:<span class='t2'>" + maxPage + "</span></div>");
}
s += "</div>";
return s;
}
function ongoto(key,colum,tableType,utilUrl,editUrl)//直接跳转到设定好的某一页
{
var page = document.getElementById("gotopage").value;
getPageList(page,key,colum,tableType,utilUrl,editUrl);
}
function del(id,utilUrl,editUrl,key,colum,tableType)//删除一条数据(id,"后台处理类","编辑页面","关键字的<input/>ID",数据列数,"字典表类型")
{
if (confirm("你确认要删除编号为" + id + "的数据吗?"))
{
$.ajax({
url: utilUrl,
type: 'POST',
data:"id="+id+"&operationType="+3+"&tableType="+tableType,
dataType: 'json',
timeout: 1000,
error: function(data){alert(data.result);},
success: function(data)
{
alert( data.result);
}
});
getPageList(document.getElementById("gotopage").value,key,colum,tableType,utilUrl,editUrl);
}
}
/* ------------------------------------- 查询,并返回分页信息(注意页面的命名规则,dataTb,pageTb分别是存放数据和存放分页信息的Table) ------------------------------------- */
function removeAll() //清空容器中已经存在的数据(注意页面中的容器的命名规则)
{
var t = document.getElementById("dataTb");//数据容器
var pageTb = document.getElementById("pageTb");//分页信息容器
for(var i=t.rows.length-1;i>=1;i--)
{
t.deleteRow(i);
}
for(var j=pageTb.rows.length-1;j>=0;j--)
{
pageTb.deleteRow(0);
}
}
function getPageList(pageIndex,keyInputId,colum,tableType,utilUrl,editUrl)//获取含有删除,修改功能的分页数据(当前请求的页码,关键字(以逗号分隔),数据的列数,"数据库表的类型","后台处理类URL","编辑页面")
{
var operationType = 1;//操作类型
var pdata = "operationType="+operationType+"&pageIndex="+pageIndex+"&tableType="+tableType;
var xx = keyInputId.split(",");//获得关键字的数组
for(var i in xx)
{
var keyi =xx[i];
pdata+="&"+keyi+"="+document.getElementById(keyi).value;
}
$.ajax({
url: utilUrl,//后台处理类
type: "POST",
data:pdata,
dataType: "json",
timeout: 1000,
error: function(data){alert("出现错误或者您没有权限!");},
success: function(data)
{
removeAll();//首先清空网页中已经存在的历史数据
if(data.result!=null)//后台出现错误,返回的是"{result:'查询失败'}",则提示错误信息
{
alert(data.result);
}
else
{
if(data.total==0)//如果返回的数据数为0
{
alert("您所要查询的数据不存在!");
}
else
{
var table = document.getElementById("dataTb");//获得显示数据的容器
var cell,row;
var width = window.screen.availWidth;
var height = window.screen.availHeight;
var iRow;
//在容器中输出数据
for (iRow=0;iRow<data.rows.length;iRow++)
{
row=table.insertRow(iRow+1);
row.setAttribute("onmouseover","this.className='highlight'");
row.setAttribute("onmouseout","this.className=''");
for (var iCell=0; iCell<colum+1; iCell ++)
{
cell=row.insertCell(iCell);
if(iCell == 0)
{
id=data.rows[iRow].cell[0];
cell.innerHTML = "<a οnclick=/"javascript:GB_myShow('编辑','"+editUrl+"?tableType="+tableType+"&operationType=4&id="+id+"');/" href='javascript:void(0) '>编辑</a>|<a href='javascript:del(/""+id+"/",/""+utilUrl+"/",/""+editUrl+"/",/""+keyInputId+"/","+colum+",/""+tableType+"/")'>删除</a>";
cell.setAttribute("align","center");
continue;
}
cell.setAttribute("align","center");
cell.appendChild(document.createTextNode(data.rows[iRow].cell[iCell-1]));
cell=null;
}
row=null;
}
var pageTable = document.getElementById("pageTb");//获得分页模块的容器
var pageIndex = data.page;//从后台获取索引页号
var total = data.total;//从后台获取总的数据量
var pageSize = 10;//页的大小
var maxPage =0;//最大页
if(total%pageSize==0)//计算最大页数
{
maxPage =Math.floor(total/pageSize);
}
else
{
maxPage =Math.floor(total/pageSize)+1;
}
//输出分页模块
if(data.rows.length!=0)
{
row1=pageTable.insertRow(0);
cell=row1.insertCell(0);
row1.setAttribute("colspan","11");
//调用pager获得分页模块,并从容器中输出
cell.innerHTML = pager(pageIndex ,maxPage,total,pageSize, true,keyInputId,colum,tableType,utilUrl,editUrl);
}
}
}
}
});
}