(网页)table加上分页,优点可随便加样式
1.先有静态的页面:
<div class="col-xs-12">
<table id="tbtablesaleinfo" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center">
角色名称
</th>
<th>操作</th>
</tr>
</thead>
<tbody id="datatbody">
</tbody>
</table>
<nav aria-label="...">
<ul class="pager">
<li><button class="btn btn-white" onclick="datatop()" >首页</button></li>
<li><button class="btn btn-white" onclick="datapageup()" >上一页</button></li>
<li><button class="btn btn-white" onclick="datapagedown()" >下一页</button></li>
<li><button class="btn btn-white" onclick="datapagefooter()">尾页</button></li>
</ul>
</nav>
<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
2.相对应的js方法:
function convertstring(val){
if(null == val || undefined == val || "" == val){
return "";
}
return val;
} var jsonpagesaleinfo = {
pageCount:1,
pagecurrpage:1,
pageSize:10,
pageCountSize:0
};
var localhost = sessionStorage.getItem("localhost");
var name = sessionStorage.getItem("name");
$("small[id='username']").html(convertstring(name));
var dealerId = sessionStorage.getItem("dealerId"); //goods頭:
function datatop(){
//跳转到第一页:
if(1 == jsonpagesaleinfo.pagecurrpage){
return;
}else{
jsonpagesaleinfo.pagecurrpage = 1;
}
querysaleinfotable();
}
//goods上:
function datapageup(){
if(1 == jsonpagesaleinfo.pagecurrpage){
return;
}else{
jsonpagesaleinfo.pagecurrpage = jsonpagesaleinfo.pagecurrpage - 1;
}
//模仿强哥方法:
querysaleinfotable();
}
//goods下: function datapagedown(){
console.log(jsonpagesaleinfo.pageCount);
console.log(jsonpagesaleinfo.pagecurrpage);
if(jsonpagesaleinfo.pageCount == jsonpagesaleinfo.pagecurrpage){
return;
}else{
jsonpagesaleinfo.pagecurrpage = jsonpagesaleinfo.pagecurrpage + 1;
}
//模仿强哥方法:
querysaleinfotable();
}
//goods尾:
function datapagefooter(){
if(jsonpagesaleinfo.pageCount == jsonpagesaleinfo.pagecurrpage){
return;
}else{
jsonpagesaleinfo.pagecurrpage = jsonpagesaleinfo.pageCount;//设置为末尾.
}
querysaleinfotable();
} //设置为1,总是找到第一页不久得啦.
function querysaleinfotableMd(){
jsonpagesaleinfo.pagecurrpage = 1;
querysaleinfotable(); }
//分页方法:
function querysaleinfotable(){ //获取参数的值:
var data = {
"pageSize" : jsonpagesaleinfo.pageSize,
"pageindex":jsonpagesaleinfo.pagecurrpage
};
$.ajax({
url: localhost+"/role/lytacequeryrole",
data:JSON.stringify(data),
dataType:'json',
type:'post',
contentType:'application/json',
success:function(data){
var datajson = data.target.pagedata;
$("#datatbody").empty();
jsonpagesaleinfo.pagecurrpage = data.target.pageindex;//当前页码;
jsonpagesaleinfo.pageCountSize = data.target.pagecount;//总条数;
jsonpagesaleinfo.pageCount = data.target.pagePagecount;//总页码:
$("#pageindex").html(jsonpagesaleinfo.pagecurrpage);
$("#pagecountsize").html(jsonpagesaleinfo.pageCountSize);
$("#pagecount").html(jsonpagesaleinfo.pageCount);
if(null != datajson && datajson.length > 0){
for(var i = 0; i < datajson.length; i++){
$("#datatbody").append(createtr(
convertstring(datajson[i].id),
convertstring(datajson[i].name)
));
}
}
}
});
} //传递参数:
function createtr(a,b){
//<td>'+k+'</td>详情:
var str = '<tr><td style="display:none;">'+a+'</td><td class="col-xs-6">'+b+'</td><td><button class="btn btn-link" onclick="editMethod(this);">修改</button></td></tr>';
return str;
}
$(function(){
//日期插件:
$('.date-picker').datepicker({autoclose:true}).next().on(ace.click_event, function(){
$(this).prev().focus();
});
querysaleinfotable();
//$("#purchaseStatus").chosen({
// search_contains: true,
// disable_search_threshold: 10
//});
});
//点击查看详情,去详情页面:
function logistics(val){
//alert('点击我去详情!');
//window.location.href = 'purchaseinfotable.html?id='+$(val).parent().parent().find('td:eq(0)').text();
}
//修改界面:
function editMethod(val){
window.location.href = "authoritymanagerEdit.html?id="+$(val).parent().parent().find('td:eq(0)').text();;
}
//增加界面:
function preupdateMethod(){
window.location.href = "authoritymanagerEdit.html?id=-1";
}
十分简易的table动态加载就出来啦,还是比较码放,下次发angularjs动态获取数据table。
(网页)table加上分页,优点可随便加样式的更多相关文章
- Display Tag Lib Table进行分页
Display Tag Lib是一个标签库,用来处理jsp网页上的Table,功能非常强,可以对的Table进行分页.数据导出.分组.对列排序等等,反正我在做项目时需要的功能它都给我提供了,而且使用起 ...
- html中使用js+table 实现分页
本文在html中利用js+table实现分页.主要思想是先对table中的所有数据隐藏,然后通过当前页面(currPageNum)来计算当前页要显示的行,并显示出来,首页.下一页.上一页.尾页都依此来 ...
- mybatis分页插件以及懒加载
1. 延迟加载 延迟加载的意义在于,虽然是关联查询,但不是及时将关联的数据查询出来,而且在需要的时候进行查询. 开启延迟加载: <setting name="lazyLoading ...
- MySQL+Service+Servlet+Jsp实现Table表格分页展示数据
下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...
- bootstrap table 服务器端分页例子分享
这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...
- 利用JS实现HTML TABLE的分页
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...
- python之~【空格】可不能随便加唷~
上个礼拜学习从.proto文件转xxpb2.py文件的时候,明明成功了的. 结果周末的时候在家里,以及今天周一来到公司电脑,都遇到同样的一个问题. 我就纳闷了.这个路径确实存在呀. 而且我找遍了搜索引 ...
- Footnotes for tables in latex - 为latex的table加上footnotes
参考: Footnotes for tables in LaTeX Footnote in tabular environment Footnotes for tables in latex - 为l ...
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
随机推荐
- [ncw7] 小睿睿的方案
考虑一对情侣(x,y)x<y的贡献,设in[x],out[x]为数的dfs序. 强制从x走向y方向 当in[x]<in[y]且out[y]<=out[x] 矩形{1,in[x],in ...
- Kubernetes 服务入口管理 Traefik Ingress Controller
前面部署了 kubernetes/ingress-nginx 作为 Ingress Controller,使用 Nginx 反向代理与负载,通过 Ingress Controller 不断的跟 Kub ...
- 项目中使用sass,如何实现自动编译
本次React项目中用到了Sass,在一个主文件main.scss中引入了其余的scss文件,然后把main.scss文件编译为main.css文件,最后在项目的主文件入口index.html中引入m ...
- springboot~让我习惯了TDD的开发模式
TDD是什么 TDD就是测试驱动开发,以测试用例为主导,去开发项目,业务代码该怎么写还是怎么写,在实现UI之前,可以先实现Test用例,通过test来实现对业务场景的模拟,最终让你的代码更稳定. 大叔 ...
- Flink集群部署
部署方式 一般来讲有三种方式: Local Standalone Flink On Yarn/Mesos/K8s… 单机模式 参考上一篇Flink从入门到放弃(入门篇2)-本地环境搭建&构建第 ...
- LINUX负载均衡LVS-NAT搭建
1.搭建前的规划工作 这里从lvs官方网站找了一个nat模型的图,如下: 我这里使用虚拟机模拟出了4台rhel6机器.一台服务器作为lvs调度器(40网段使用的都是仅主机模式,168网段使用桥接模式) ...
- Java线程池ThreadPoolExecutor使用和分析(二) - execute()原理
相关文章目录: Java线程池ThreadPoolExecutor使用和分析(一) Java线程池ThreadPoolExecutor使用和分析(二) - execute()原理 Java线程池Thr ...
- JQ-bootstrap我的开源前端框架
因为实在不知道写啥,所以迟迟没有相关的介绍.但是必须要积累过程资产,所以还是介绍一下,不定哪天就有人用了. 首先还是介绍遇到的问题,我是做传统后台管理系统的,公司赶时髦,要用boo ...
- ZooKeeper系列(5):ZooKeeper的日志和快照
ZooKeeper系列文章:https://www.cnblogs.com/f-ck-need-u/p/7576137.html#zk ZooKeeper有两种日志.一种快照.日志分为事务日志和Zoo ...
- Linux常用命令汇总(一)
线程操作 1.ps ps -ef 查看当前活动进程 ps -ef | grep [线程关键信息] ps -ef | grep java 查看java相关进程 2.kill killall -9 jav ...