1. 程式人生 > >bootstrap table 外掛 從伺服器請求資料 分頁

bootstrap table 外掛 從伺服器請求資料 分頁

<span style="font-family: Arial, Helvetica, sans-serif;"><html></span>
<head>
	<link rel="stylesheet" href="./bootstrap/css/bootstrap/bootstrap.css" />
	<link rel="stylesheet" href="./bootstrap-table/bootstrap-table.css" />	
	
	<script src="./jquery/jquery.min.js"></script>
	<script src="./bootstrap/js/bootstrap.js"></script>	
	<script src="./bootstrap-table/bootstrap-table.js"></script>
</head>

<body>
	<div id="content">
		
		
		<div id="content-body">
			
			<div id="reportTableDiv" class="span10">
				<table id="reportTable">
				</table>
			</div>
		</div>
	</div>
	

	<script type="text/javascript">
		function initReport() {
			$('#reportTable').bootstrapTable({
				method: 'get',
				cache: false,
				height: 400,
				striped: true,
				pagination: true,
				sidePagination: "server", //服務端處理分頁
				//pageSize: 20,
				pageNumber:1,
				pageList: [10, 20, 50, 100, 200, 500],
				search: true,
				showColumns: true,
				showRefresh: true,
				search: true,
				clickToSelect: true,				
				columns: [{field:"sid",title:"sid",align:"center",valign:"middle",sortable:"true"},
				      {field:"age",title:"age",align:"center",valign:"middle",sortable:"true"},
				      {field:"name",title:"name",align:"center",valign:"middle",sortable:"true"}],
				url:"xxxxxxxxxx",
<span style="font-family: Arial, Helvetica, sans-serif;">				onPageChange: function (size, number) {</span>
					
					
                                },
		
               onLoadSuccess:function(data){
               
              },
               onLoadError:function(status,res){
                 

              },
                formatNoMatches: function(){
                	return '??';
                }
			});
		}
		initReport();
		
	</script>

</body>

</html>
伺服器返回的資料必須得是json格式的,pageSize預設為10,columns必須與返回的欄位對應