(网页)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 ...
随机推荐
- 利用 DynamicLinq 实现简单的动态表达式构建查询
平时使用 LINQ 进行一些简单的条件拼接查询一般都会这样操作: public class SearchInputDto { public string ConditionA { get; set; ...
- Jenkins技巧:如何更新Jenkins到最新版本
----------------------------------------------------------------- 原创博文,未经作者允许禁止转载. 博主:疲惫的豆豆 链接:http: ...
- [NewLife.XCode]数据层缓存(网站性能翻10倍)
NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和 ...
- for循环输出素数探究【java】
一.判断953是不是为素数(质数). 代码: /** 判断953是不是为素数(质数) 分析: 素数指整数在一个大于1的自然数中,除了1和此整数自身外,没法被其他自然数整除的数. 假设953是素数,则: ...
- 字体反爬--css+svg反爬
这个验证码很恶心,手速非常快才能通过.. 地址:http://www.dianping.com/shop/9964442 检查一下看到好多字没有了,替代的是<x class="xxx& ...
- Java基础系列--包装类
原创作品,可以转载,但是请标注出处地址http://www.cnblogs.com/V1haoge/p/5462489.html 1.8种基本数据类型都有各自的包装类,其对应关系为: 基本—————— ...
- MySQL系列详解六:MySQL主从复制/半同步演示-技术流ken
前言 随着技术的发展,在实际的生产环境中,由单台MySQL数据库服务器不能满足实际的需求.此时数据库集群就很好的解决了这个问题了.采用MySQL分布式集群,能够搭建一个高并发.负载均衡的集群服务器.在 ...
- Django 系列博客(三)
Django 系列博客(三) 前言 本篇博客介绍 django 的前后端交互及如何处理 get 请求和 post 请求. get 请求 get请求是单纯的请求一个页面资源,一般不建议进行账号信息的传输 ...
- c++中的new、operator new、placement new
一.定义 1.new new是c++中的关键字,,其行为总是一致的.它先调用operator new分配内存,然后调用构造函数初始化那段内存. new 操作符的执行过程:1. 调用operator n ...
- Tomcat 8005/8009/8080/8443端口的作用
--关闭tomcat进程所用.当执行shutdown.sh关闭tomcat时就是连接8005端口执行“SHUTDOWN”命令--由此,我们直接telnet8005端口执行“SHUTDOWN”(要大写, ...