js 表格分页，ajax请求后台数据前台分页
$(function(){
var url="后台给的地址";
var shuju=document.getElementById("shuju");
console.log(shuju);
var lc=$("#lc").val();
var zy=$("#zy").val();
var ys=$("#ys").val();
var rw=$("#rw").val();
var ls=$("#ls").val();
var fq=$("#fq").val();
var list="";
$('.shuju').html('<img src="./img/ajax-loader-1.gif"/>').css('text-align','cente');
$.ajax({
type:"get",
url:url,
data:{
TA006:lc,
TA034:zy,
TA035:ys,
ProduceNo:rw,
ProcessName:ls,
WorkerName:fq
},
dataType:"json",
success:function(res){
console.log(res);
console.log("请求成功");
for(key in res){
//拼接循环表格数据
list+='<tr calss="hang"><td>'+res[key].ProduceNo+'</td><td >'+res[key].ProduceNo+'</td><td >'+res[key].ProcessName+'</td><td >'+res[key].TA006+'</td><td >'+res[key].TA034+'</td><td >'+res[key].TA035+'</td><td >'+res[key].WorkerName+'</td></tr>';
// console.log(res[key].ProduceNo);
}
shuju.innerHTML=list;//显示数据
goPage(1,10);//调用分页
},
//
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(404);
}
});
});
//
//分页
window.onload=function(){
}
function goPage(pno,psize){
var mytable = document.getElementById("table");
var num = mytable.rows.length;//表格所有行数(所有记录数)
// console.log(num);
var totalPage = 0;//总页数
var pageSize = psize;//每页显示行数
//总共分几页
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
var endRow = currentPage * pageSize;//结束显示的行 40
endRow = (endRow > num)? num : endRow; 40
// console.log(endRow);
//遍历显示数据实现分页
for(var i=2;i<(num+1);i++){
var irow = mytable.rows[i-1];
if(i>=startRow && i<=endRow){
irow.style.display = "";
}else{
irow.style.display = "none";
}
}
var pageEnd = document.getElementById("pageEnd");
var tempStr = '<p class="show-text"><span>共'+num+'条记录</span> <span>分'+totalPage+'页</span> <span>当前第'+currentPage+'页</span></P>';
if(currentPage>1){
tempStr += "<a class='page-btn'style='text-decoration:none;' href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
tempStr += "<a class='page-btn'style='text-decoration:none;' href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
}else{
//第一页禁用
tempStr += "<a class='page-btn btnfirst' style='border-color:#ccc;color:#ccc;text-decoration:none;'>首页</a>";
tempStr += "<a class='page-btn btnfirst' style='border-color:#ccc;color:#ccc;text-decoration:none;'><上一页</a>";
}
if(currentPage<totalPage){
tempStr += "<a class='page-btn'style='text-decoration:none; ' href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
tempStr += "<a class='page-btn'style='text-decoration:none; ' href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
}else{
//到最后一页禁用
tempStr += "<a class='page-btn btnlast' style='border-color:#ccc;color:#ccc;text-decoration:none;' >下一页</a>";
tempStr += "<a class='page-btn btnlast' style='border-color:#ccc;color:#ccc;text-decoration:none;' >尾页</a>";
}
document.getElementById("barcon").innerHTML = tempStr;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/pagination.css" />
<style type="text/css">
table td{
/*width:100px!important;*/
padding:3px 0!important;
}
table tr{
}
.table-box{
overflow-y: auto;
max-height: 300px;
}
.biaodan .row{
text-align: center;
}
.biaodan .col-sm-4{
margin-top: 10px;
}
.btn-box{
text-align: center;
margin-top: 10px;
}
.btn-box button{
margin-right: 10px;
}
.content{
height:300px;
}
.page{
margin:0 auto;
text-align: center;
}
.shuju{
text-align: center;
margin:0 auto;
}
/*.load-img{
text-align: center;
display: block;
margin:0 auto;
}*/
thead th,thead td{
text-align: center!important;
vertical-align: middle!important;
}
.table tr td{
width:30px;
}
tbody td{ text-align: left!important;
vertical-align: middle!important;
}
.on{
background: #428BCA;
} /*.page nav{
text-align: center!important;
}*/
/*.page ul{
display: inline-block;
text-align: center;
}*/
.page-btn{
display: inline-block;
width: 70px;
height: 25px;
border: 1px solid #0062CC;
text-decoration: none;
border-radius: 5px;
margin-right: 10px;
line-height: 25px; }
.page-wrap{
text-align: center;
background: #cfccff;
line-height: 36px;
height: 36px;
}
.page-btn:hover{
background: lightskyblue;
color: #fff
}
.show-text{
float: left;
}
.show-text span{
margin-right: 10px;
}
</style> </head>
<body>
<header>
<div class="head">
<ul class="nav nav-tabs">
<!--<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>-->
</ul>
</div>
</header>
<div class="container">
<div class="biaodan">
<form action="" method="post">
<div class="row">
<div class="col-sm-4">
<span id='1'>流程名:</span>
<input type="text" value="" id="lc"/>
</div>
<div class="col-sm-4">
<span id="hgfg">摘要信息:</span>
<input type="text" value="" name="hhh" id="zy"/>
</div>
<div class="col-sm-4">
<span>优先级:</span>
<input type="text" /value="" id="ys"/>
</div>
<div class="col-sm-4">
<span>任务号:</span>
<input type="text" value="" name="index" id="index"/>
</div>
<div class="col-sm-4">
<span> 流水号:</span>
<input type="text" value="" id="ls"/>
</div>
<div class="col-sm-4">
<span>发起人:</span>
<input type="text" value="" id="fq"/>
</div>
</div>
<p class="btn-box">
<button type="button" class="btn btn-primary" Id="search">查询</button>
<button type="button" class="btn btn-primary">重置</button>
</p> </form>
</div>
</div>
<div class="container">
<div class="table-box">
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>操作enen</th>
<th>任务号</th>
<th>流水号</th>
<th>流程名</th>
<th>摘要信息</th>
<th>优先级</th>
<th>发起人</th>
</tr>
</thead>
<tbody class="shuju" id="shuju"> //在js,ajax请求里的那个拼接，获取后台数据 <!--<tr calss="hang">
<td>1</td>
<td>23</td>
<td>11</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>-->
</tbody>
</table>
</div>
</div>
<div class="page-wrap">
<div id="barcon" name="barcon"></div>
</div>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/paging.js"> </script>-->
<!--<script type="text/javascript" src="js/mui.min.js"></script>-->
<script type="text/javascript">
$('.load-img').html('<img src="img/ajax-loader.gif"/>').css('text-align','cente');
</script>
<script src="js/my.js"></script>
</body>
</html>
js 表格分页，ajax请求后台数据前台分页的更多相关文章
- JS 操作 HTML 和 AJAX 请求后台数据
为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...
- 前台返回json数据的常用方式+常用的AJAX请求后台数据方式
我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- Ajax请求后台数据
一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...
- ajax 请求后台数据返回异常 及 提示404方法名不存在
1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/ge ...
- 【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据
这一节我们来说一下如何用ajax提交请求? 我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <!-- 采用post表单提交 --> <for ...
- jQuery Ajax请求后台数据并在前台接收
1.ajax基本语法 <script> $(function(){ $('#sub').click(function(){ var username=$('#username').val( ...
- 用Ajax请求后台数据
我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <%@ page language="java" contentType=" ...
- js页面用定时任务通过AJAX获取后台数据，但是从这个页面跳转到其他页面后，定时任务仍然在定时请求后台
setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...
- C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
随机推荐
- SAP BW/4HANA学习笔记1
1.Master Data BW/4HANA BW/4HANA简介 BW/4HANA的前身是SAP BW(Business Warehouse),本质是一种数据仓库解决方案. 数据仓库解决方案: 1. ...
- SpringBoot容器化的多环境配置
SpringBoot容器化的多环境配置 部署通常会有多个环境,如"dev"/"test"/"prod"等环境 容器化部署通常使用环境变量,而 ...
- redis底层数据结构之快速列表(quicklist)
快速列表(quicklist) redis3 .2版本之前,List类型数据使用的底层数据结构是压缩列表(ziplist)或双向链表(linkedlist),当列表元素个数比较少并且每个元素占用空间比 ...
- 升级sqlite3
原文连接: https://blog.zhheo.com/p/22f4cbb2.html 创建一个工作目录(可选) Code 12 mkdir sqlite3_upgradecd sqlite3_up ...
- UML 组成 1
常用关系: 关联关系使用一条直线表示,比如 A与B关联 用于描述不同类的对象之间的结构关系,将多个类的实例联系在一起 是一种静态关系,基本与程序的运行没有关系 比如,部门与员工的关系,就是关联关系 ...
- SSLCipherCheck_v1.4.2
Usage: sslciphercheck.exe -h <Host> -p <Port> -u <URL> -c <CSV File> -i < ...
- ORA-06502: PL/SQL: numeric or value error: character string buffer too small
oracle执行报错 ORA-06502: PL/SQL: numeric or value error: character string buffer too small ORA-06512: a ...
- web执行shell脚本
转载请注明来源:https://www.cnblogs.com/Sherlock-L/p/15584456.html 缘起 去年写过一个shell脚本用来校验统计打点,工作使用.发现同事不太熟悉这块, ...
- [Notes-DS-2]线性结构
分割线------------- 分割线----------------
- redhat安装opencv2.4.13
1.官网下载OpenCV2.4.5 http://opencv.org/ 解压到home/用户名/opencv2.4.5 2.安装cmake $sudo apt-get install cmake ...