Динамическое разбиение на страницы в списке дел с использованием jQuery - проблема кодирования.Как использовать динамическое разбиение на страницы - PullRequest
Новая
       35

Динамическое разбиение на страницы в списке дел с использованием jQuery - проблема кодирования.Как использовать динамическое разбиение на страницы

0 голосов
/ 23 сентября 2019

У меня есть этот код

Я использую только jQuery, CSS и HTML.Я пытался почти всегда.Возможно, что-то не так в моем коде, что делает его не динамическим.

Каждый раз, когда я пишу новое задание, оно не меняет нумерацию страниц. У меня есть код, работающий, но мне нужно F5, чтобы изменить нумерацию страниц,что довольно печально, потому что я застрял здесь на несколько дней.

Я хочу, чтобы нумерация страниц автоматически менялась при каждом удалении или написании нового задания.

//javascript
<script type="text/javascript">
		
		localStorage.getItem('totalPage');

		$('#todoList').html(localStorage.getItem('listItems'));
			function updateNumbers() {
			  //update variable
			    var lists = document.querySelectorAll("number");
			    //update number
			    for(var i = 0; i < lists.length; i++) {
			      $(lists[i]).html(i+1 + ") ");
			    }
			}
			updateNumbers();
			//Check off Specific Todos By Clicking
			$(".todoList").on("click", ".item", function () {
			  $(this).toggleClass("completed");
			  localStorage.setItem('listItems', $('#todoList').html());
			});

			//Click on X to delete Todo
			$(".todoList").on('click', "span", function (e) {
			  e.stopPropagation();
			  $(this).closest(".item").fadeOut(500,function() {
			   $(this).remove();
			    updateNumbers();
			    localStorage.setItem('listItems', $('#todoList').html());
			  });
			});

			//Clear All
			$(".removeall").on('click', function (e) {
			    $(".item").fadeOut(500, function() {
			      $(this).remove();
		
			    localStorage.setItem('listItems', $('#todoList').html());
			    });
			});

			//Add new todos
			$("input[type='text']").keypress(function(e) {
			  if(e.which === 13) {
			    //grab text
			    var todoText = $(this).val();
			    //append todotext to ul
			    if( $(this).val() !== "") {
			    $(".todoList").append("<li class='item'><span><i class='fa fa-trash'> </i></span>" + "<number></number>" + todoText + "</li>");
			      }
			    updateNumbers();
			    localStorage.setItem('listItems', $('#todoList').html());
			    pageCount = Math.ceil($(".item").length / pageSize) ;
			    if(pageCount > totalPage){
			    	totalPage++;
			    	$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li>');
			    	localStorage.setItem('totalPage' , totalPage);

			    }
			    if(pageCount < totalPage){
			    	totalPage--;
			    	$("#pagin").remove('<li><a href="#">'+(i+1)+'</a></li>');
			    	localStorage.setItem('totalPage' , totalPage);

			    }
			    //clear text
			    $(this).val("");
			  }
			});

			$(".add").click(function() {
			  $("input[type='text']").fadeToggle(200);
			});

			//pagination
			var pageSize = 5;
			var pageCount = Math.ceil($(".item").length / pageSize) ;
			var totalPage = pageCount;
			console.log(totalPage);
			for(var i=0; i < pageCount ; i++){
				$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li>');
				
			}
			
			
			showPage = function(page) {
			    $(".item").hide();
			    $(".item").each(function(n) {
			        if (n >= pageSize * (page - 1) && n < pageSize * page){
			            $(this).show();
			        }
			    });        
			}
			showPage(1);
			
			$("#pagin li").first().find("a").addClass("current");
			$("#pagin li a").click(function() {
			    $("#pagin li a").removeClass("current");
			    $(this).addClass("current");
			    showPage(parseInt($(this).text())) 
			});


</script>
<div id = "container">
		  <h1>To-Do List<i class="removeall">Clear</i><i class="add">+</i></h1>
		  <input type="text" placeholder="[Add New Todo]">
		  <ul class="todoList" id="todoList">
		    <li><span><i class="fa fa-trash"></i></span><number></number>Go to potions Class </li>
		    <li> <span><i class="fa fa-trash"></i></span><number></number> Buy new Robes </li>
		    <li> <span><i class="fa fa-trash"></i></span><number></number> Visit Hagrid </li>
		  </ul>
		<ul id="pagin">
            
		</ul>
	</div>

Я не знаю, как сделать динамическое разбиение на страницы и автоматическое изменение без F5

...