jQuery onclick函数正在更改另一个函数值

时间：2018-11-26 07:59:19

标签： javascript jquery html

我为分页创建了jQuery代码。我的HTML表格中有大量记录。我创建了以下jQuery代码，将它们分为几页，每页10条记录。

分页效果很好没有下一个按钮功能。将“下一步”按钮代码放入jQuery中时，“下一步”按钮有效，但是当我单击页面时，它会显示下一页的下一页而不是所单击的页面。 所以我想下一页功能正在影响页面点击功能。这里有什么错误的地方？

HTML：

<!-- table -->
<table class="table" id="transactionsTable">
  <thead>
    <tr>
      <th class="th-width-20">DB</th>
      <th>Transaction ID</th>
      <th>Order ID</th>
      <th>Amount</th>
      <th class="th-width-10">City</th>
      <th class="th-width-30">Items</th>
    </tr>
  </thead>
  <tbody>
    @foreach($transactions as $key1 => $transaction)
      <tr class="cl">
        <td>{{ $transaction[0] }}</td>
        <td>{{ $transaction[1] }}</td>
        <td>{{ $transaction[2] }}</td>
        <td>{{ $transaction[3] }}</td>
        <td>{{ $transaction[4] }}</td>
      </tr>
    @endforeach
  </tbody>
</table>


<!-- pagination -->
<nav aria-label="dis pagination">
  <ul id="next-page" class="pagination">
    <li id="pre-page">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
  </ul>
</nav>

jQuery：

<script type="text/javascript">

  var numberOfItems = $("#transactionsTable tbody tr").length;
  var perPage = 10;
  var totalPages = Math.round(numberOfItems / perPage);

  for (var i = 1; i < totalPages; i++){
    $(".pagination").append("<li class='page-item'><a class='page-link' href='#'>" + i + "</a></li>");
  }

  $(".pagination").append("<li id='next-page'><a class='page-link' href='#'>Next</a></li>");

  $('#transactionsTable tbody tr').hide();
  $('#transactionsTable tbody tr').slice(0, perPage).show();
  $('.pagination li.page-item:eq(0)').addClass('active');

  //Page click function
  $(".pagination li.page-item").on("click", function() {
    if ($(this).hasClass("active")) {
      return false;
    }
    else {
      var currentPage = $(this).index();
      var startItem = currentPage * perPage;
      var endItem = startItem + perPage;

      $(".pagination li").removeClass("active");
      $(this).addClass("active");
      $('#transactionsTable tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
        css('display','table-row').animate({opacity:1}, 300);
    }
  });


  //Next button click function
  $("#next-page").on("click", function() {
    var currentPage = $(".pagination li.active").index();
    if (currentPage === totalPages) {
      return false;
    }
    else {
      currentPage++;
      $(".pagination li").removeClass("active");
      $('#transactionsTable tbody tr').hide();

      var startItem = currentPage * perPage;
      var endItem = startItem + perPage;

      $('#transactionsTable tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
        css('display','table-row').animate({opacity:1}, 300);
      $(".pagination li.page-item:eq(" + (currentPage - 1) + ")").addClass("active");
    }
  });

</script>

示例代码段，每页包含20条记录和5条记录

http://jsfiddle.net/shyrptdu/

2 个答案:

答案 0 :(得分：0)

 $(document).ready(function()
 {
 	var total_count = document.getElementById("totalrecords").value;
 	var optInit = getOptionsFromForm();
 	$("#pagination").pagination(total_count, optInit);
 });

 function pageselectCallback(page_index, jq) 
 {
 	var items_per_page = document.getElementById("items_per_page").value;
 	document.getElementById("startindex").value = page_index * (parseInt(items_per_page)) + parseInt(1);
 	document.getElementById("endindex").value = (parseInt(page_index) + parseInt(1)) * parseInt(items_per_page);
 	if (document.getElementById("current_page").value != page_index) 
 	{
 		document.getElementById("current_page").value = page_index;
 		document.form1.action = "";
 		submitForm();
 		document.form1.submit();
 	}
 	return false;
 }
 function getOptionsFromForm() {
 	var opt = {callback:pageselectCallback};
 	$("input:hidden").each(function () {
 		opt[this.name] = this.className.match(/numeric/) ? parseInt(this.value) : this.value;
 	});
 	var htmlspecialchars = {"&":"&amp;", "<":"&lt;", ">":"&gt;", "\"":"&quot;"};
 	$.each(htmlspecialchars, function (k, v) {
 		opt.prev_text = opt.prev_text.replace(k, v);
 		opt.next_text = opt.next_text.replace(k, v);
 	});
 	return opt;
 }

答案 1 :(得分：0)

尝试一下... 下一步按钮单击功能currentPage++;中的问题 在var endItem = startItem + perPage;之后添加 删除ul

中的ID 

var numberOfItems = $("#transactionsTable tbody tr").length;
  var perPage = 5;
  var totalPages = Math.round(numberOfItems / perPage);

  for (var i = 1; i <= totalPages; i++){ // i<=totalPages
    $(".pagination").append("<li class='page-item'><a class='page-link' href='#'>" + i + "</a></li>");
  }

  $(".pagination").append("<li id='next-page'><a class='page-link' href='#'>Next</a></li>");

  $('#transactionsTable tbody tr').hide();
  $('#transactionsTable tbody tr').slice(0, perPage).show();
  $('.pagination li.page-item:eq(0)').addClass('active');

  $(".pagination li.page-item").on("click", function() {
    if ($(this).hasClass("active")) {
      return false;
    }
    else {
      var currentPage = $(this).index()-1; // substract 1
      var startItem = currentPage * perPage;
      var endItem = startItem + perPage;

      $(".pagination li").removeClass("active");
      $(this).addClass("active");
      $('#transactionsTable tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
        css('display','table-row').animate({opacity:1}, 300);
    }
  });

  $("#next-page").on("click", function() {
  debugger
    var currentPage = $(".pagination li.active").index();
    if (currentPage === totalPages) {
      return false;
    }
    else {
      
      $(".pagination li").removeClass("active");
      $('#transactionsTable tbody tr').hide();
			
      var startItem = currentPage * perPage;
      var endItem = startItem + perPage;
			currentPage++;
      $('#transactionsTable tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
        css('display','table-row').animate({opacity:1}, 300);
      $(".pagination li.page-item:eq(" + (currentPage - 1) + ")").addClass("active");
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- table -->
<table class="table table-striped table-hover table-condensed" id="transactionsTable">
  <thead>
    <tr>
      <th class="th-width-20">Disbursements</th>
      <th>Transaction ID</th>
      <th>Order ID</th>
      <th>Amount</th>
      <th class="th-width-10">City</th>
      <th class="th-width-30">Items</th>
    </tr>
  </thead>
  <tbody>
      <tr class="cl">
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
      </tr>
      <tr class="cl">
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
      </tr>
      <tr class="cl">
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
      </tr>
      <tr class="cl">
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
      </tr>
      <tr class="cl">
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
        <td>Page 1</td>
      </tr>
      <tr class="cl">
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
      </tr>
      <tr class="cl">
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
      </tr>
      <tr class="cl">
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
      </tr>
      <tr class="cl">
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
      </tr>
      <tr class="cl">
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
        <td>Page 2</td>
      </tr>
      <tr class="cl">
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
      </tr>
      <tr class="cl">
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
      </tr>
      <tr class="cl">
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
      </tr>
      <tr class="cl">
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
      </tr>
      <tr class="cl">
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
        <td>Page 3</td>
      </tr>
      <tr class="cl">
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
      </tr>
      <tr class="cl">
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
      </tr>
      <tr class="cl">
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
      </tr>
      <tr class="cl">
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
      </tr>
      <tr class="cl">
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
        <td>Page 4</td>
      </tr>
  </tbody>
</table>


<!-- pagination -->
<nav aria-label="dis pagination">
  <ul  class="pagination"> <!-- remove id(same as next buttion) -->
    <li id="pre-page">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
  </ul>
</nav>

相关问题
最新问题