(网页)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。