使用jQuery在待办事项列表中进行动态分页-编码问题。如何使用动态分页

Question

我有这个代码

我仅使用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的情况下，我不知道如何使分页动态和自动更改