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对象关 ...
随机推荐
- hive知识点总结
hive知识点总结 1.什么是HIVE? 1.hive是hadoop生态圈的一个工具,提供一种结构化查询语言,可以查询HDFS或者其他文件系统上的文件. 2.hive操作: 1.hive一次使用命令: ...
- Canvas布局下使用附加属性使控件岁鼠标移动
定义附加属性 public class MoveBehavior { public static readonly DependencyProperty IsMoveAbleProperty = De ...
- git介绍和常用操作
- 冒泡排序快速排序C语言
//冒泡排序 void BubbleSort(ElemType A[], int n) { int i, j, temp; int flag=1; for (i = 1; i <= n - 1& ...
- pyspark 结构化数据开发实例
什么是SPARK? 1. 先进的大数据分布式编程和计算框架 2. 替换Hadoop 中的MR计算引擎. 3. 内存分布式计算:运行数度快 4. 可以使用不同的语言编程(java,scala,r 和py ...
- Android 杂项
1. String to InputStream new ByteArrayInputStream(str.getBytes());
- HTML中javascript的<script>标签使用方法详解
只要一提到把JavaScript放到网页中,就不得不涉及Web的核心语言--HTML.在当初开发JavaScript的时候,Netscape要解决的一个重要问题就是如何做到让JavaScript既能与 ...
- JAVA框架知识
Java中的MVC: M是指模型层,C则是控制器,V是指视图:一个完整的请求过程是,客户端发送请求到控制器,控制器调用业务层处理请求,并返回处理结果给视图,其中业务层是调用Dao层去完成业务逻辑的:M ...
- CH32V00+WS2812制作音乐谱显示
CH32V003,自带运放.SPI.PWM等外设模块,关键还便宜,便宜,便宜! 可以尝试来实现一个低成本的音乐谱显示. 1. 硬件设计 显示方面,使用64颗ws2812组成8*8的显示阵列,通过 CH ...
- windows 安装mysql-8.0.13(zip安装)
安装环境说明 系统版本:windows10 mysql版本:mysql-8.0.13-winx64.zip 下载地址:http://mirrors.163.com/mysql/Downloads/My ...