在单击下一个或上一个按钮时多次刷新页面

时间:2017-04-13 07:30:29

标签: javascript jquery dynamic pagination

我有几个弹出窗口显示用户列表,每页显示10个结果,工作正常。

我正在收到页面。来自JSON中的java servlet。 同时,单击下一个按钮,有时页面会刷新多次。

这是代码。

var currentPageNo = 0; // Keep track of currently displayed page

		$('.next-btn').click(function(){ // Give buttons an ID (include them in HTML as hidden)
			userList(currentPageNo+10);
			adminList(currentPageNo+10);
			
		});
		$('.prev-btn').click(function(){
			userList(currentPageNo-10);
			adminList(currentPageNo-10);
		});

		function userList(pageNo) {
			var resType="userList";
			createTable(resType,pageNo);
		}
		
		function adminList(pageNo) {
			var resType="adminList";
			createTable(resType,pageNo);
		}

		function createTable(resType, pageNo) {
			// Update global variable
			currentPageNo = pageNo; 
			// Set visibility of the "prev" button:
			$('.prev-btn').toggle(pageNo > 0);
			// Ask one record more than needed, to determine if there are more records after this page:
			$.getJSON("https://api.randomuser.me/?results=11&start="+pageNo, function(data) {
				$('#datatable tr:has(td)').empty();
				// Check if there's an extra record which we do not display, 
				// but determines that there is a next page
				$('.next-btn').toggle(data.results.length > 10);
				// Slice results, so 11th record is not included:
				data.results.slice(0, 10).forEach(function (record, i) { // add second argument for numbering records
					var json = JSON.stringify(record);
					$('#datatable').append(
						$('<tr>').append(
							$('<td>').append(
								$('<input>').attr('type', 'checkbox')
											.addClass('selectRow')
											.val(json),
								(i+1+pageNo) // display row number
							),
							$('<td>').append(
								$('<a>').attr('href', record.picture.thumbnail)
										.addClass('imgurl')
										.attr('target', '_blank')
										.text(record.name.first)
							),
							$('<td>').append(record.dob)
						)
					);
				});
				// Show the prev and/or buttons
				
				
			}).fail(function(error) {
				console.log("**********AJAX ERROR: " + error);
			});            
		}

		var savedData = []; // The objects as array, so to have an order.

		function saveData(){
			var errors = [];
			// Add selected to map
			$('input.selectRow:checked').each(function(count) {
				// Get the JSON that is stored as value for the checkbox
				var obj = JSON.parse($(this).val());
				// See if this URL was already collected (that's easy with Set)
				if (savedData.find(record => record.picture.thumbnail === obj.picture.thumbnail)) {
					errors.push(obj.name.first);
				} else {
					// Append it
					savedData.push(obj);
				}
			});
			refreshDisplay();
			if (errors.length) {
				alert('The following were already selected:\n' + errors.join('\n'));
			}
		}

		function refreshDisplay() {
			$('.container').html('');
			savedData.forEach(function (obj) {
				// Reset container, and append collected data (use jQuery for appending)
				$('.container').append(
					$('<div>').addClass('parent').append(
						$('<label>').addClass('dataLabel').text('Name: '),
						obj.name.first + ' ' + obj.name.last,
						$('<br>'), // line-break between name & pic
						$('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'),
						$('<label>').addClass('dataLabel').text('Date of birth: '),
						obj.dob, $('<br>'),
						$('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
						obj.location.street, $('<br>'),
						obj.location.city + ' ' + obj.location.postcode, $('<br>'),
						obj.location.state, $('<br>'),
						$('<button>').addClass('removeMe').text('Delete'),
						$('<button>').addClass('top-btn').text('Swap with top'),
						$('<button>').addClass('down-btn').text('Swap with down')
					)	
				);
			})
			// Clear checkboxes:
			$('.selectRow').prop('checked', false);
			handleEvents();
		}

		function logSavedData(){
			// Convert to JSON and log to console. You would instead post it
			// to some URL, or save it to localStorage.
			console.log(JSON.stringify(savedData, null, 2));
		}

		function getIndex(elem) {
			return $(elem).parent('.parent').index();
		}

		$(document).on('click', '.removeMe', function() {
			// Delete this from the saved Data
			savedData.splice(getIndex(this), 1);
			// And redisplay
			refreshDisplay();
		});

		/* Swapping the displayed articles in the result list */
		$(document).on('click', ".down-btn", function() {
			var index = getIndex(this);
			// Swap in memory
			savedData.splice(index, 2, savedData[index+1], savedData[index]);
			// And redisplay
			refreshDisplay();
		});

		$(document).on('click', ".top-btn", function() {
			var index = getIndex(this);
			// Swap in memory
			savedData.splice(index-1, 2, savedData[index], savedData[index-1]);
			// And redisplay
			refreshDisplay();
		});
			
		/* Disable top & down buttons for the first and the last article respectively in the result list */
		function handleEvents() {
			$(".top-btn, .down-btn").prop("disabled", false).show();
			$(".parent:first").find(".top-btn").prop("disabled", true).hide();
			$(".parent:last").find(".down-btn").prop("disabled", true).hide();
		}

		$(document).ready(function(){
			$('#showExtForm-btn').click(function(){
				$('#extUser').toggle();
			});
			$("#extUserForm").submit(function(e){
				addExtUser();
				return false;
		   });
		});

		function addExtUser() {
			var extObj = {
				name: {
					title: "mr", // No ladies? :-)
					first: $("#name").val(),
					// Last name ?
				},
				dob: $("#dob").val(),
				picture: {
					thumbnail: $("#myImg").val()
				},
				location: { // maybe also ask for this info?
				}
			};
			savedData.push(extObj);
			refreshDisplay(); // Will show some undefined stuff (location...)
		}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#userList" onclick="userList(0)">User List</button>
<button class="btn btn-primary btn-sm" onclick="logSavedData()">Get Saved Data</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#adminList" onclick="adminList(0)">User Admin</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#extUser">Open External Form</button>

					  <div class="modal fade" id="userList" role="dialog">
						<div class="modal-dialog modal-lg">
						
						  
						  <div class="modal-content">
							<div class="modal-header">
							  <button type="button" class="close" data-dismiss="modal">&times;</button>
							  <h4 class="modal-title">User List</h4>
							</div>
							<div class="modal-body">
							  <div class="table-responsive">
                                  <table class="table table-bordered table-hover" id="datatable">
									<tr>
										<th>Select</th>
										<th>Name</th>
										<th>DOB</th>
									</tr>
								</table>
							  </div>
							  <div class="row">
								<div class="col-sm-offset-3 col-sm-4">
									<button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
								</div>

								<div class="col-sm-4">
									<button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
								</div>
							</div>
                                <hr/>
							<div class="row">
								<div class="col-sm-offset-3 col-sm-4">
									<button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
								</div>
								<div class="col-sm-4">
									<button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
								</div>
							</div>
							<br />
						  </div>
						</div>
					  </div>
					</div>
					
					<div class="modal fade" id="adminList" role="dialog">
						<div class="modal-dialog modal-lg">
						  <div class="modal-content">
							<div class="modal-header">
							  <button type="button" class="close" data-dismiss="modal">&times;</button>
							  <h4 class="modal-title">Admin List</h4>
							</div>
							<div class="modal-body">
							  <div class="table-responsive">
                                  <table class="table table-bordered table-hover" id="datatable">
									<tr>
										<th>Select</th>
										<th>Name</th>
										<th>DOB</th>
									</tr>
								</table>
							  </div>
							  <div class="row">
								<div class="col-sm-offset-3 col-sm-4">
									<button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
								</div>

								<div class="col-sm-4">
									<button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
								</div>
							</div>
                                <hr/>
							<div class="row">
								<div class="col-sm-offset-3 col-sm-4">
									<button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
								</div>
								<div class="col-sm-4">
									<button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
								</div>
							</div>
							<br />
						  </div>
						</div>
					  </div>
					</div>
					
					<div class="modal fade" id="extUser" role="dialog">
						<div class="modal-dialog modal-lg">
						
						  <!-- External User-->
						  <div class="modal-content">
							<div class="modal-header">
							  <button type="button" class="close" data-dismiss="modal">&times;</button>
							  <h4 class="modal-title">Add External User</h4>
							</div>
							<div class="modal-body">
							  <form class="form-horizontal" id="extUserForm">
								<div class="form-group">
								  <label class="control-label col-sm-3" for="name">Name:</label>
								  <div class="col-sm-8">
									<input type="text" class="form-control" id="name" name="name" required>
								  </div>
								</div>
								<div class="form-group">
								  <label class="control-label col-sm-3" for="myImg">Image:</label>
								  <div class="col-sm-8">
									<input type="text" class="form-control" id="myImg" name="myImg" required>
								  </div>
								</div>
																
								<div class="form-group">
								  <label class="control-label col-sm-3" for="dob">DOB:</label>
								  <div class="col-sm-8">
									<input type="date" class="form-control" id="dob" name="dob" required>
								  </div>
								</div>
								<hr />
								<div class="form-group">        
								  <div class="col-sm-offset-3 col-sm-3">
									<button class="btn btn-primary btn-sm">Submit</button>
								  </div>
								  <div class="col-sm-3">
									<button type="reset" class="btn btn-primary btn-sm">Reset</button>
								  </div>
								  <div class="col-sm-3">
									<button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
								  </div>
								</div>
							  </form>
							</div> 
						  </div>
						</div>
					  </div>

<div class="container"></div>

2 个答案:

答案 0 :(得分:1)

试试这个:

   $('.next-btn').unbind("click").on("click",function(){ // Give buttons an ID (include them in HTML as hidden)
         userList(currentPageNo+10);
         adminList(currentPageNo+10);
        });
    $('.prev-btn').unbind("click").on("click",function(){
        userList(currentPageNo-10);
        adminList(currentPageNo-10);
    });

我认为click event多次绑定,这会进行多次刷新,所以unbind然后添加事件onclick。

答案 1 :(得分:1)

将以下内容添加到“下一步”按钮事件侦听器中。对于以前也许也是如此:

$('.next-btn').click(function(e){ 
e.preventDefault();         
userList(currentPageNo+10);
        adminList(currentPageNo+10);

    });