网页前台分页算法案例

最新推荐文章于 2020-09-19 22:54:45 发布
最新推荐文章于 2020-09-19 22:54:45 发布
阅读量512 收藏
点赞数

网页:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
< head>
    <title>查验表</title>
    <meta http-equiv="keywords" content="监测线">
    <meta http-equiv="description" content="监测线">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/remote.css">
<script type="text/javascript" src="../script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/remote.js"></script>
< /head>
< body>
< div class="query">
< fieldset class="query">
< span class="tip">所有人:</span><input type="text" class="txt" title="按Enter键查询" id="query_user">
< span class="tip">VIN:</span><input type="text" class="txt" title="按Enter键查询" id="query_vin">
< span class="tip">发动机型号:</span><input type="text" class="txt" title="按Enter键查询" id="query_enery">
< span class="tip">号牌号码:</span><input type="text" class="txt" id="query_num">
< input type="button" class="bts" value="清空" title="点击清空参数" onclick="blankArgs();">
< input type="button" class="bts" value="查询" title="点击执行查询" onclick="getDataList();">
< /fieldset>
< /div>
< !--------------------------------------------end 查询div---------------------------------------------------->
<table class="data" cellspacing="0px" cellpadding="0px" id="tabList">
< tr>
< th><input type="checkbox" id="checkall" onclick="selectAll(this);"></th>
< th>流水号</th>
< th>号牌种类</th>
< th>号牌号码</th>
< th>所有人</th>
< th>车辆识别号</th>
< th>发动机号</th>
< th>车身颜色</th>
< th>查验状态</th>
< th>查验员</th>
< th>查验时间</th>
< th style="border-right:1px #00FFFF solid;">操作</th>
< /tr>
< /table>
< !--------------------------------------------end 数据列表---------------------------------------------------->
<div class="page">
< input type="button" class="bts" value="删除选中项" onclick="delSeledRecord();">
< span class="tip" id="pageinfo">当前页:第0/0页</span>
< img src="imgs/page/first.gif" class="page" alt="首页" onclick="setPage(1);">
< img src="imgs/page/prev.gif" class="page" alt="上一页" onclick="setPage(2);">
< img src="imgs/page/next.gif" class="page" alt="下一页" onclick="setPage(3);">
< img src="imgs/page/last.gif" class="page" alt="尾页" onclick="setPage(4);">
< input type="text" class="txt" style="width:40px;" value="0" title="按Enter键跳页"
id="jumppage" onkeyup="this.value=this.value.replace(/\D/g,'');">
< input type="button" class="bts" value="翻页" onclick="jumpPage();">
< /div>
< !--------------------------------------------end 分页div---------------------------------------------------->
< /body>
< /html>

样式文件:

@CHARSET "UTF-8";
body{
margin:0px;
padding:10px;
background-color:#FFFFFF;
font-size:12px;
}
fieldset{
margin:0px 0px 0px 20px;
padding:5px;
width:95%;
border:1px #FFCCFF solid;
}
input.bts{
margin:0px 0px 0px 5xp;
padding:2px 3px 1px 3px;
background-color:#66CCFF;
border:1px #000000 solid;
font-size:11px;
color:#FFFFFF;
}
img.page{
margin:0px;
padding:0px;
width:12px;
height:12px;
border:none;
}
span.tip{
margin:0px 3px 0px 5px;
padding:0px;
}
div.query{
margin:0px;
padding:5px;
width:100%;
background-color:#F0FFFF;
text-align:left;
overflow:auto;
}
div.page{
margin:0px;
padding:3px 2px 2px 2px;
width:100%;
background-color:#F0FFFF;
border:1px #CCCCCC solid;
vertical-align:bottom;
overflow:hidden;
}
table{
margin:0px;
padding:0px;
border:none;
}
table.data{
width:100%;
border:none;
overflow:auto;
}
th{
margin:0px;
padding:0px;
background-color:#AFEEEE;
border-top:1px #00FFFF solid;
border-right:none;
border-bottom:1px #00FFFF solid;
border-left:1px #00FFFF solid;
font-size:13px;
text-align:center;
vertical-align:middle;
}
td{
padding:0px;
margin:0px;
border:none;
border-right:1px #CCCCCC dotted;
border-bottom:1px #CCCCCC dotted;
font-size:12px;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
/*以下样式被脚本调用*/
input.txt{
padding:1px 0px 1px 2px;
width:140px;
border:1px solid #87C6F9;
border-radius:6px;
}
input.txtfocus{
padding:1px 0px 1px 2px;
width:140px;
    border:1px #00FFFF solid;
    box-shadow:0px 0px 8px rgba(103, 166, 217, 1);
    outline:none;
}
tr.ou{
background-color:"#EEEEFF";
}
tr.qi{
background-color:"#FFFFFF";
}
tr.hover{
background-color:#FFCCFF;
}

分页图片:

脚本:

//所有记录
var allRecord=null;
//记录数
var allCount=0;
//每页记录数
var pageSize=10;
//总页数
var pageCount=0;
//当前页
var currPage=1;
//Enter键监听
$(document).ready(function(){
var $inp=$("input:text");
$inp.keypress(function(e){
  if(!e){
   e=window.event;
  }
     if(e.which==13){
      if(this.id=="jumppage"){
    jumpPage();
   }else{
    getDataList();
   }
     }
});
var oldcss="";
$inp.focus(function(){
  oldcss=$(this).attr("class");
  $(this).removeClass(oldcss).addClass("txtfocus");
});
$inp.blur(function(){
  $(this).removeClass("txtfocus").addClass(oldcss);
});
$inp[0].focus();
});
//清空查询参数
function blankArgs(){
$("#query_user").val("");
$("#query_vin").val("");
$("#query_enery").val("");
$("#query_num").val("");
}
//清空数据表
function blankList(){
var trLen=$("#tabList").find("tr").length;
for(var i=trLen;i>0;i--){   
  $("#tabList").find("tr").eq(i).remove();
}
}
//执行查询
function getDataList(){
allRecord=null;
blankList();
//添加aJax请求后台数据的代码,allRecord最好是JSON数组,这样解析数据容易
allRecord=new Object();
allCount=56;
if(allCount%pageSize==0){
  pageCount=allCount/pageSize;
}else{
  pageCount=parseInt(allCount/pageSize)+1
}
//显示第一页数据
currPage=-1;
setPage(1);
}
//分页
function setPage(type){
if(!allRecord){
  window.alert("没有数据");
  return;
}
if(pageCount<=1){
  window.alert("总页数不够");
  return;
}
if(currPage==1&&type==1){
  window.alert("已是首页");
  return;
}
if(currPage==1&&type==2){
  window.alert("已是第一页");
  return;
}
if(currPage==pageCount&&type==3){
  window.alert("已是最后一页");
  return;
}
if(currPage==pageCount&&type==4){
  window.alert("已是尾页");
  return;
}
var start=0;
var end=0;
if(type==1){
  currPage=1;
  start=0;
  end=pageSize;
}else if(type==2){
  currPage--;
  start=(currPage-1)*pageSize;
  end=currPage*pageSize;
}else if(type==3){
  currPage++;
  start=(currPage-1)*pageSize;
  end=Math.min(currPage*pageSize,allCount);
}else if(type==4){
  currPage=pageCount;
  start=(currPage-1)*pageSize;
  end=allCount;
}
blankList();
//向表格写入数据
for(var i=start;i<end;i++){
  var id=i;
  var bgcss=" ";
  if(i%2==0){
   bgcss=" class='ou'";
  }else if(i%2==1){
   bgcss=" class='qi'";
  }
  var strHtml="<tr name='datarow' "+bgcss+">";
        strHtml+="<td><input type='checkbox' name='item' value='"+id+"' id='"+id+"'></td>";
        strHtml+="<td>"+i+"</td>";       
        strHtml+="<td>小型汽车</td>";
        strHtml+="<td>京A12033</td>";
        strHtml+="<td>张飞</td>";
        strHtml+="<td>LSYBCAAF38K019621</td>";
        strHtml+="<td>016355</td>";
        strHtml+="<td>蓝色</td>";
  strHtml+="<td>通过</td>";
        strHtml+="<td>李四</td>";
        strHtml+="<td>2012-12-16</td>";
        strHtml+="<td><a href=javascript:preView('"+id+"');>查看照片</a>&nbsp;";
  strHtml+="<a href=javascript:delSingleRecord('"+id+"');>删除</a>&nbsp;";
  strHtml+="<a href=javascript:getDetail('"+id+"');>详细</a></td>";
        strHtml+="</tr>";
        $("#tabList").append(strHtml);
}
var oldcss=null;
$("tr[name='datarow']").hover(
  function(){
     oldcss=$(this).attr("class");
     $(this).removeClass(oldcss).addClass("hover");
  },
  function(){
     $(this).removeClass("hover").addClass(oldcss);
  }
);
$("#checkall").removeAttr("checked");
$("#pageinfo").html("当前页:第"+currPage+"/"+pageCount+"页");
    $("#jumppage").val(currPage);
}
//跳转分页
function jumpPage(){
var page=parseInt($("#jumppage").val());
if(!allRecord){
  $("#jumppage").val(0);
  window.alert("没有数据");
  return;
}
if(page<1||page>pageCount){
  $("#jumppage").val(currPage);
  window.alert("输入的页数不对");
  return;
}
if(page==currPage){
  return;
}
if(page==1){
  currPage=-1;
  setPage(1);
}else if(page==pageCount){
  currPage=-1;
  setPage(4);
}else{
  currPage=page-1;
  setPage(3);
}
}
//全选或全不选
function selectAll(obj){
$("input:checkbox[name='item']").each(function(i){
  $(this).attr("checked",obj.checked);
});
}
//查看照片
function preView(id){
window.alert("查看照片 "+id);
}
//删除单个记录记录
function delSingleRecord(id){
$("#"+id).attr("checked",true);
delAct(1,id);
}
//删除选中的所有记录
function delSeledRecord(){
delAct(2,null);
}
//执行删除
function delAct(type,id){
if(!allRecord){
  window.alert("没有数据");
  return;
}
var args="";
if(type==1&&id!=null){
  args=id;
}else if(type==2){
  var objDels=$("input[name='item']:checked");
     objDels.each(function(i){
         args+=$(this).val()+",";
     });
  args=args.substring(0,args.length-1);
}else{
  return;
}
if(args==""){
  window.alert("还没进行选择");
  return;
}
if(!window.confirm("确认删除被选记录吗")){
  return;
}
args="?type=del&dels="+agrs;
$.ajax({
  type:"POST",
     processData:true,
     url:"../servlet/TestServlet",
     data:agrs,
     success:function(msg){
   if($.trim(msg.result)=="succ"){
    window.alert("删除成功");
   }else{
    window.alert("删除失败");
   }
  }
});
}
//查看详细
function getDetail(id){
window.alert("查看详细 "+id);
}

效果预览:

zq530885040
关注
前端js分页功能的实现，非常实用，新手必看
weixin_30724853的博客
06-24 5209
分享一个前端拿到数据后，自己生成分页的案例，案例如图显示，点击搜索后查询数据，显示数据列表，前端根据数据显示正确的分页 附上代码：代码附上,简单粗暴，自己用过的，兼容性好，没有封装，可以很好的分页原理，希望可以帮助到大家 html排版如下： <!--搜索列表--><div class="search"> <div class="co...
SQL分页查询，SQL的LIMIT语句用法，SQL如何实现分页查询，SpringBoot实现分页查询。
qq_46416934的博客
07-31 577
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。添加下方名片，即可获取全套学习资料哦。以上面这条语句为例，表示忽略第一个满足条件的数据开始再查询两条，例如1，2，3满足条件，上面这条语句执行后将返回2，3这两条数据，于是就为实现了分页查询奠定了基础。前台只需要向后台传入两个参数，一个是要查询的页码，另一个是每页数据的总数。.
网页前台分页算法
上而求索QQ1138789752
12-26 1609
今天(2013-5-12)修改了一个bug 网页:     简单分页                   所有人: VIN: 发动机型号: 号牌号码: 流水号 号牌种类 号牌号码 所有人 车辆识别号 发动机号 车身颜色 查验状态 查验员 查验时间 操作 当前页:第0
分页算法
guan_moyi的博客
04-28 503
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;BootStrap+AngularJS分页显示 &lt;/title&gt; &lt;script type="text/javascript" src="../j
几种分页算法。翻页必备
laorer
12-19 629
几种分页算法。翻页必备 经典的： 参考这里：海量数据库的查询优化及分页算法方案 http://dev.youkuaiyun.com/article/43/43936.shtm -------------------------------------------------------------------------------- 1.“俄罗斯存储过程”的改良版 ...
C#前台Bootstrap分页算法实践分享
### 描述：C#前台bootstrap分页算法实例，可参考，有好的代码希望可以共享 #### 1. C#在分页算法中的应用 C#是一种强类型的面向对象的编程语言，常用于Web开发，尤其是在ASP.NET平台下。在分页算法中，C#主要用于...
高效实现前台分页的jQuery插件
前台分页是网页中常用的一种功能，它允许用户在有限的页面空间内，按照一定的规则和数量显示数据，并通过分页控件让用户可以快速地切换到不同的数据集。当提到“前台分页js”时，我们通常指的是使用JavaScript以及...
bootstrap paginator分页插件的两种使用方式实例详解
10-19
前台分页适用于数据量较小的情况，例如万条数据以下。在这种模式下，JavaScript 会通过 AJAX 一次性获取所有数据，然后在客户端进行分页处理。以下是使用前台分页的步骤： #### 初始化分页控件 ```html ...
C# .NET分页技术实例代码大全
这通常涉及到后端数据的查询、分页算法的实现以及前端显示的处理。 3. **存储过程分页**：使用存储过程来处理数据分页也是常见的做法，特别是在数据库层面就需要对数据进行筛选和分页的场景。通过编写SQL语句，可以...
Web开发之分页算法，N(N>=3)种解决方案
gaosini0001的专栏
12-06 413
在Web开发中，分页是最常用的一个功能了。但是，想简单、灵活、方便地解决分页这个问题，还是需要动点脑筋的。    今天，简要梳理下，过去6年中，亲自遇到的分页问题和解决办法。 1. 定义问题      原由：在页面中需要展示若干数据，但不可能一次展示所有的，想通过每次只展示若干条。分页数，pageNo，是为了标记，当前访问的内容在哪里。      后端需要做的：后端需要分页
分页实现起始页算法
热门推荐
蓝海风的博客
07-25 1万+
起始索引=（当前页数-1）*每页显示的条数
如何使用分页和分页样式
civilized的专栏
11-29 512
分页组件的使用： 第一步：将util文件夹复制到项目 的SRC文件下面 第二步：将mypage.tld文件复制到web-inf文件夹下面 第三步：打开需要分页的页面，在page指令下方添加导入标签库的代码： %@taglib uri="/WEB-INF/MyPage.tld" prefix="pt"%> 在需要显示分页的地方，添加如下代码：   我们在action中所要使用的代码
Java 分页计算公式
zhangwenchao0814的博客
09-19 1万+
1 根据传入的参数计算 1.1 请求参数（currPage：当前页、pageSize：每页展示条数）,根据这两个参数计算起始起始条数、截止条数 起始条数 firstIndex = (currPage-1) * pageSize 截止条数 lastIndex = currPage * pageSize 1.2 计算总页码（需获取总条数） pages= total%pageSize == 0 ? total/pageSize: total/pageSize + 1 ...
分页算法总结
猿马
06-30 8095
总记录数 : totalCount 每页显示的数量: pageSize总页数: pageCount算法:&gt;&gt;&gt;1 pageCount = (totalCount -1) / pageSize + 12 pageCount = (totalCount % pageSize == 0 ? totalCount/pageSize : totalCount/pageSize + 1)...
page 分页的源代码
10-28 2046
function jumpPage(pageIndex,pageSize){ if(pageIndex==1){ document.getElementById('start').value=0; }else{ document.getElementById('start').value=(pageIndex-1)*pageSize; } var f = document.forms[0]; if
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值