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对象关 ...
随机推荐
- Datax-web的入门使用
在学习入门之前,需要先启动Datax-web(Datax-web入门配置与启动) 1.登录 账户:admin 密码:123456 2.创建项目 3.新建执行器 项目中有默认的,可以直接使用 4.新建数 ...
- VMvare虚拟机的安装及新建虚拟机(一)
a:hover { color: rgba(255, 102, 0, 1) } 一.VMvare虚拟机的安装 1.首先双击--你下载的安装包,这里我分享百度云盘,供大家下载:http://pan.ba ...
- Kubernetes部署的10个注意事项
摘要 容器开发有望在云中实现前所未有的可移植性和可扩展 性.此外,DevOps 开发和文化实践也有助于提升业务价 值和响应能力.但是,在开始第一个容器开发项目之前, 有一些问题需要考虑清楚:我们应该使 ...
- dll帮助类
项目中有很多时候用到外部dll,调用的时候如果用静态调用,程序exe目录下有很多dll,看起来很乱,不利于后续维护:动态调用可以把dll放在想放的文件夹内,但是如果一个dll要用到的函数很多,动态调用 ...
- [Swift]使用Alamofire传递参数时报错
p.p1 { margin: 0; font: 11px Menlo; color: rgba(0, 0, 0, 1) } span.s1 { font-variant-ligatures: no-c ...
- 安装jdk,tomcat,oracle,PL/SQL的一些问题
仅限于自己学习使用 新进公司,需要安装jdk1.6,tomcat6, oracle和pl/sql 先是jdk1.6,安装后配置环境变量,都在系统变量里,在cmd,分别打出 java -version, ...
- nodejs查询
const tagModel = require("../mongodb"); 1 const mongoose = require("mongoose"); ...
- SQL Server修改表的时候出现错误：未更新任何行,未删除任何行
无论点击什么,一直报错:未更新任何行,未删除任何行,就差点砸电脑啦. 参考这个大神才解决的问题: https://blog.csdn.net/weixin_44690047/article/detai ...
- vite + vue3 + js + xlsx 导出excel
安装依赖 1 npm install xlsx --save 使用版本 封装js /* 导出excel文件 */ /** * 导出excel文件实现思路分析 * * 1.通过XLSX插件的 XLSX. ...
- VMware Workstation 未能启动VMware Authentication Service
(1)今天像往常一样打开vmware启动虚拟机,但是弹出个框,显示VMware Workstations 未启动VMware Authorization Service,让我尝试手动启动. (2)Wi ...