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