Bootstrapカスタムページング方法

4440 ワード

改ページブックストリーム pagination

1.コアjsクラスライブラリの導入
まずビューの上にjsとcssファイルを導入する必要があります.主にbootstrapのcss、jquery、bootstrapのjsファイルの3つのファイルがあります.

<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

2.ビューの設定:

<!--         --->
<div class="col-sm-6">       
<div class="dataTables_info" id="sample-table-2_info"></div>
</div>
<!--    -->
<div class="col-sm-6">
<div class="dataTables_paginate paging_bootstrap" id="pager">
													
</div>
</div>

2.ページングjs:

/**
 *     
 * @param datas   
 */
function createPagerInfo(datas){
	 /**
	  *         
	  */
	if(datas.pageCount!=0){
	$("#sample-table-2_info").html("<font style='font-weight:bold;'>   ["+datas.pageIndex+"/"+datas.pageCount+"]  "+" ["+datas.total+"]   </font>");
	}else{
	$("#sample-table-2_info").html("<font style='font-weight:bold;'>   ["+datas.pageCount+"/"+datas.pageCount+"]  "+" ["+datas.total+"]   </font>");

	if(datas.pageCount!=0){
		//       
		$("#pager").html('<ul class="pagination">'+
  				'<li class="next" id="start"><a href="#"  onclick="pageStart('+datas.pageIndex+')">  </a></li>'+
  				'<li class="next" id="up"><a  href="javascript:void(0)" onclick="pageUp('+datas.pageIndex+')">   </a></li>'+
  				'<li class="next" id="down"><a  href="javascript:void(0)" onclick="pageDown('+datas.pageIndex+','+datas.pageCount+')" >   </a></li>'+
  				'<li class="next" id="last"><a href="#"  onclick="pageLast('+datas.pageIndex+','+datas.pageCount+')">    </a></li>'+
				'</ul>');
		}else{
			$("#pager").html('<ul class="pagination">'+
	  				'<li class="next" id="start"><a href="#"  onclick="pageStart('+datas.pageIndex+')">  </a></li>'+
	  				'<li class="next" id="up"><a  href="javascript:void(0)" onclick="pageUp('+datas.pageIndex+')">   </a></li>'+
	  				'<li class="next" id="down"><a  href="javascript:void(0)" onclick="pageDown('+datas.pageIndex+','+datas.pageCount+')" >   </a></li>'+
	  				'<li class="next" id="last"><a href="#"  onclick="pageLast('+datas.pageCount+','+datas.pageCount+')">    </a></li>'+
					'</ul>');	
		}			
}

4.ページ数イベントをクリック

/**
 *   
 * @param pageStartIndex
 */
function pageStart(pageStartIndex){
	var nowPage = pageStartIndex-1;
	var pageStart = 1;
	if(nowPage==0){
		$.msg("    !","         ","btn-primary");
	}else{
		gainDetailsInfo(pageStart);
	}
	
}
/**
 *     
 * @param pageIndex
 * @param pageTotal
 */
function pageLast(pageIndex,pageTotal){
	console.info(pageIndex);
	console.info(pageTotal);
	   var nowPage = pageTotal;
	   if(pageIndex == pageTotal){
		   $.msg("    !","           ","btn-primary");
	   }else{
		   gainDetailsInfo(nowPage);   
	   }
		  

       
	 
	  
}
/**
 *    
 * @param c
 */
function pageUp(c){
	var nowPage = c-1;
	if(nowPage==0||nowPage == -1){
		 $.msg("    !","         ","btn-primary");
	}else{
		gainDetailsInfo(nowPage);
	}
		
	
}
/**
 *    
 * @param now
 * @param total
 */
function pageDown(now,total){
	var nowPage = now+1;
	if(now==total||total==0){
		$.msg("    !","           ","btn-primary");
		$("#down").attr({"disabled":"disabled"});
	}else{
		gainDetailsInfo(nowPage);	
	}
	
}

第十節2 ASP.Netサービス側のコントロールは何をしましたか?

マルチメディアクエリ@media