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对象关 ...
随机推荐
- js将json数据保存下载为json文件
const button = document.createElement('a'); button.onclick = () => { // 要保存的字符串, 需要先将数据转成字符串 cons ...
- CentOS7 yum设置阿里源
1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentOS-Base ...
- PHP 执行系统命令解压7z格式压缩包
银行推送的账单是7z格式的压缩包,需要用程序对账单进行解压,网上关系PHP解压7z格式压缩包的资料很少 现在分享下处理过程,首先安装7-zip软件,我是在windows环境下调试的,下载地址https ...
- jreg视频内容整理
目录 5种变得开心的方法 我(曾经)想死 别再问我过得好不好了 5种变得开心的方法 浪费时间,比如打游戏,什么都不干 停止思考,什么都不要想,刷视频 独处,不要跟别人分享你的痛苦,把自己的痛苦当作世界 ...
- deepinlinux安装golang
Download 从 Google 官方获取安装包,不用FQ直接访问 http://golang.google.cn,选择 Linux 的安装包如 go1.14.linux-amd64.tar.gz ...
- 关于vCenter6.7 导出的ovf 不能导入vCenter6.5/6.0的问题
正常从6.7导出ovf文件,包含四个文件. 编辑ovf文件,删除下面五条条目, 导入6.5时, 只用 ovf 和 vmdk 这两个文件导入 ,即可!
- CSMA/CA多路复用、载波监听、冲突避免
CSMA/CA是避免各站点之间数据传输冲突的算法,其特点是发送包的同时不能检测到信道上有无冲突,只能尽量"避免".例如,如果计算机A和计算机C同时给计算机B发送一个控制消息,它们将 ...
- sentinel监控数据持久化&本地测试
官方文档 https://sentinelguard.io/zh-cn/ wiki: 在生产环境中使用-Sentinel 推荐方案:持久化到 时序数据库InfluxDB : 结合Grafana 可 ...
- js中的base64转化
创建一个base64.js文件,将以下代码粘贴进去 var Base64= { _keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrst ...
- 个人网盘搭建SeaFile
资料参考: https://www.ittel.cn/archives/2904.html https://www.cnblogs.com/jiuyachun/p/10185111.html 恢复和 ...