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对象关 ...
随机推荐
- 前端框架大比拼：2022年的Vue与React谁更胜一筹？
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第 18 天,点击查看活动详情 前端框架经历了十多年的争奇斗艳百花齐放,经历了 JSP.jQuery.Ember.Angular.R ...
- Git命令学习总结(廖雪峰官方Git教程)
1.Windows系统安装完Git后,需要在Git Bash命令窗口输入以下命令,进行用户名和邮箱设置.
- Eclipse-Hadoop开发配置详解
Eclipse_Hadoop开发详解 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockqu ...
- css你所不知道技巧
利用属性选择器来选择空链接 当 <a> 元素没有文本内容,但有 href 属性的时候,显示它的 href 属性: a[href^="http"]:empty::befo ...
- EF中使用SqlBulkCopy
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using S ...
- CompletableFuture使用方法的详细说明
异步执行一个任务时,我们一般是使用自定义的线程池Executor去创建执行的.如果不需要有返回值, 任务实现Runnable接口:如果需要有返回值,任务实现Callable接口,调用Executor的 ...
- Java基础-类型转换、变量、变量命名规范
类型转换 强制转换 (类型)变量名 高-->低 自动转换 低-->高 注意点 不能对布尔值进行转换 不能把对象类型转换为不相干的类型 在把高容量转换到低容量的时候,强制转换 转换的时候可能 ...
- 【Linux】从零开始学Linux -01
总结自<鸟哥的linux私房菜> BIOS与BootLoader 一般而言,对于嵌入式系统,BootLoader是写在flash上,开机运行的最底层的引导软件,初始化主板的基本设置,为接收 ...
- k8s如何配置secret保存harbor仓库账号密码、pod中怎么使用harbor仓库镜像
转载: https://blog.csdn.net/MssGuo/article/details/127312239
- 51电子-STC89C51开发板：使用KEIL编译汇编代码
全部内容请点击目录列表查看: 51电子-STC89C51开发板:<目录> --------------------------- 正文开始 ---------------------- ...