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加上分页,优点可随便加样式的更多相关文章

  1. Display Tag Lib Table进行分页

    Display Tag Lib是一个标签库,用来处理jsp网页上的Table,功能非常强,可以对的Table进行分页.数据导出.分组.对列排序等等,反正我在做项目时需要的功能它都给我提供了,而且使用起 ...

  2. html中使用js+table 实现分页

    本文在html中利用js+table实现分页.主要思想是先对table中的所有数据隐藏,然后通过当前页面(currPageNum)来计算当前页要显示的行,并显示出来,首页.下一页.上一页.尾页都依此来 ...

  3. mybatis分页插件以及懒加载

    1.   延迟加载 延迟加载的意义在于,虽然是关联查询,但不是及时将关联的数据查询出来,而且在需要的时候进行查询. 开启延迟加载: <setting name="lazyLoading ...

  4. MySQL+Service+Servlet+Jsp实现Table表格分页展示数据

    下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...

  5. bootstrap table 服务器端分页例子分享

    这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...

  6. 利用JS实现HTML TABLE的分页

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...

  7. python之~【空格】可不能随便加唷~

    上个礼拜学习从.proto文件转xxpb2.py文件的时候,明明成功了的. 结果周末的时候在家里,以及今天周一来到公司电脑,都遇到同样的一个问题. 我就纳闷了.这个路径确实存在呀. 而且我找遍了搜索引 ...

  8. Footnotes for tables in latex - 为latex的table加上footnotes

    参考: Footnotes for tables in LaTeX Footnote in tabular environment Footnotes for tables in latex - 为l ...

  9. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

随机推荐

  1. Xamarin.Android ImageView 图片圆角显示

    第一步:在 values 文件夹下新增 Attrs.xml 文件 <?xml version="1.0" encoding="utf-8" ?> & ...

  2. Java IO 导入导出Excel表格

    1.将excel导入到内存 1. 调用工作簿Workbook的静态方法getWorkbook(),获得工作簿Workbook对象 InputStream in = new FileInputStrea ...

  3. 运维笔记--docker odoo镜像 运行异常处理

    场景描述: 镜像来源,dockerhub odoo官方镜像:https://hub.docker.com/_/odoo odoo镜像运行一段时间后,出现下述异常,可能是触发某个未知bug:该现象在生产 ...

  4. 接口隔离原则(ISP)

    设计应用程序的时候,如果一个模块包含多个子模块,那么我们应该小心对模块做出抽象.设想该模块由一个类实现,我们可以把系统抽象成一个接口.但是要添加一个新的模块扩展程序时,如果要添加的模块只包含原系统中的 ...

  5. Mycat - 实现数据库的读写分离与高可用

    前言 开心一刻 上语文课,不小心睡着了,坐在边上的同桌突然叫醒了我,并小声说道:“读课文第三段”.我立马起身大声读了起来.正在黑板写字的老师吓了一跳,老师郁闷的看着我,问道:“同学有什么问题吗?”,我 ...

  6. dd、split、csplit命令

    在Linux最常用的文件生成和切片工具是dd,它功能比较全面,但无法以行为单位提取文件数据,也无法直接将文件按大小或行数进行均分(除非借助循环).另两款数据分割工具split和csplit能够比较轻松 ...

  7. python布尔类型和逻辑运算

    布尔类型 python中True表示真,False表示假,它们是布尔类型: >>> type(True) <class 'bool'> 在python中,bool的Tru ...

  8. μC/OS-II 要点分析 ------ PendSV_Handler

    首先贴出今天要与大家分享的内容源码(位于内核源码的 os_cpu_a.asm 中): PendSV_Handler CPSID I MRS R0, PSP CBZ R0, PendSV_Handler ...

  9. [转]使用jenkins实现持续集成

    本文转自:https://www.cnblogs.com/zishengY/p/7170656.html 一.jenkins 介绍 它是一个自动化的周期性的集成测试过程,从检出代码.编译构建.运行测试 ...

  10. 自己用HashMap来模拟一个Session缓存(简易版)

    本文记录:Hibernate中一级缓存的特点. 一级缓存的细节什么操作会向一 1.级缓存放入数据 save,update,saveOrUpdate,load,get,list,iterate,lock ...