<commit_before><!doctype html>
<html>
<head>
    <title>Angular Paging Directive</title>
	<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >
</head>
<body>
    

	<div class="jumbotron">
		<div class="container">
			<h2>Angular Paging</h2> 
			<div class="row">
				<div class="col-xs-1">
					<ul class="list-unstyled">
						<li>/pājiNG/
						<li><em>noun</em>
					</ul>
				</div>
				<div class="col-xs-11">
					<ul class="list-unstyled">
						<li><strong>Definition:</strong></li>
						<li>
							Pagination can be handled client-side or server-side. 
							Server-side pagination is more common. 
							Client-side pagination can be used when there are very few records to be accessed, 
							in which case all records can be returned, and the client can use JavaScript 
							to view the separate pages. <strong>By using AJAX, hybrid server/client-side pagination can be used</strong>, 
							in which Javascript is used to request the subsequent page which is loaded and 
							inserted into the Document Object Model via AJAX.
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
    <div class="container" ng-app="myApp">
		<div class="row">
			<div class="col-xs-8">
			

				
				<h2> Basic Sample </h2>
				<div paging
					page="currentPage" 
					page-size="pageSize" 
					total="total">
				</div>	
			 
				<hr/>		
				<br/>
				
				<h2> Advanced Sample </h2>
				<div paging
					page="currentPage" 
					page-size="pageSize" 
					total="total"
					dots="."
					scroll-top="false"
					hide-if-empty="true">
				</div>	

				<br/>
			</div>
			<div class="col-xs-4">
				<div class="well" class="form-group">
					<div class="form-group">
						<label>Current Page:</label> 
						<input 
							placeholder="page" 
							class="form-control"  
							maxlength="16"
							ng-model="currentPage" 
							ng-init="currentPage = 1"/>
					</div>
					<div class="form-group">
						<label>Page Size:</label> 
						<input 
							placeholder="Page Size" 
							class="form-control" 
							maxlength="16"
							ng-model="pageSize"
							ng-init="pageSize = 10"/>
					</div>		
					<div class="form-group">
						<label>Total Items:</label> 
						<input
							placeholder="Total" 
							class="form-control" 
							maxlength="16"
							ng-model="total" 
							ng-init="total = 1000"/>
					</div>
					<br/>
					<span class="btn btn-success" ng-click="currentPage = 0">
						Apply Settings
					</span>
				</div>				
			</div>
		</div>
    </div>
           
    				
				<hr/>	
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script><commit_msg>Added Complete Set of Settings<commit_after><!doctype html>
<html>
<head>
    <title>Angular Paging Directive</title>
	<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >
</head>
<body>
    

	<div class="jumbotron">
		<div class="container">
			<h2>Angular Paging</h2> 
			<div class="row">
				<div class="col-xs-1">
					<ul class="list-unstyled">
						<li>/pājiNG/
						<li><em>noun</em>
					</ul>
				</div>
				<div class="col-xs-11">
					<ul class="list-unstyled">
						<li><strong>Definition:</strong></li>
						<li>
							Pagination can be handled client-side or server-side. 
							Server-side pagination is more common. 
							Client-side pagination can be used when there are very few records to be accessed, 
							in which case all records can be returned, and the client can use JavaScript 
							to view the separate pages. <strong>By using AJAX, hybrid server/client-side pagination can be used</strong>, 
							in which Javascript is used to request the subsequent page which is loaded and 
							inserted into the Document Object Model via AJAX.
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
    <div class="container" ng-app="myApp">
		<div class="row">
			<div class="col-xs-8">
			
				<h2> Basic Sample </h2>
				<div paging
					page="currentPage" 
					page-size="pageSize" 
					total="total">
				</div>	
			 
				<hr/>		
				<br/>
				
				<h2> Advanced Sample </h2>
				<div paging
					page="currentPage" 
					page-size="pageSize" 
					total="total"
					adjacent="{{adjacent}}"
					dots="{{dots}}"
					scroll-top="{{scrollTop}}" 
					hide-if-empty="{{hideIfEmpty}}"
					ul-class="{{ulClass}}"
					active-class="{{activeClass}}">
				</div>	

				<br/>
			</div>
			<div class="col-xs-4">
				<div class="well" class="form-group">
					<div class="form-group">
						<label>Current Page:</label> 
						<input 
							placeholder="page" 
							class="form-control"  
							maxlength="16"
							ng-model="currentPage" 
							ng-init="currentPage = 1"/>
					</div>
					<div class="form-group">
						<label>Page Size:</label> 
						<input 
							placeholder="Page Size" 
							class="form-control" 
							maxlength="16"
							ng-model="pageSize"
							ng-init="pageSize = 10"/>
					</div>		
					<div class="form-group">
						<label>Total Items:</label> 
						<input
							placeholder="Total" 
							class="form-control" 
							maxlength="16"
							ng-model="total" 
							ng-init="total = 1000"/>
					</div>
					<hr/>
					<div class="form-group">
						<label>Dots Display:</label> 
						<input
							placeholder="..." 
							class="form-control" 
							maxlength="3"
							ng-model="dots" 
							ng-init="dots = '...'"/>
					</div>
					<div class="form-group">
						<label>Adjacent Count:</label> 
						<input
							placeholder="2" 
							class="form-control" 
							maxlength="3"
							ng-model="adjacent" 
							ng-init="adjacent = 2"/>
					</div>
					<hr/>
					<div class="form-group">
						<label>UL Class:</label> 
						<input
							placeholder="pagination" 
							class="form-control" 
							maxlength="100"
							ng-model="ulClass" 
							ng-init="ulClass = 'pagination'"/>
					</div>
					<div class="form-group">
						<label>Active Class:</label> 
						<input
							placeholder="active" 
							class="form-control" 
							maxlength="100"
							ng-model="activeClass" 
							ng-init="activeClass = 'active'"/>
					</div>
					<br/>
					<table class="table">
						<tr>
							<td><label>Hide if Empty:</label> 
							<td>
								<input
									type="checkbox"
									ng-model="hideIfEmpty" 
									ng-init="hideIfEmpty = true"/>
								{{hideIfEmpty}}
							</td>
						</tr>
						<tr>
							<td><label>Scroll Top:</label> 
							<td>
								<input
									type="checkbox"
									ng-model="scrollTop" 
									ng-init="scrollTop = true"/>
								{{scrollTop}}
							</td>
						</tr>
					</table>
					<span class="btn btn-default" onclick="location.reload()"> 
						Reset Settings
					</span>
					<span class="btn btn-success" ng-click="currentPage = 0">
						Apply Settings
					</span>
				</div>				
			</div>
		</div>
    </div>
           
    				
				<hr/>	
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
{'fraction_non_alphanumeric': 0.1617315284827975, 'fraction_numerical': 0.01015228426395939, 'mean_word_length': 2.066580198875919, 'pattern_counts': {'":': 0, '<': 201, '<?xml version=': 0, '>': 201, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1136076', 'n_tokens_mistral': 3526, 'n_tokens_neox': 2372, 'n_words': 508}