javascript - Jquery分页记录

Question

想问一下如何根据表中的记录显示正确的条目行(黄色背景部分)？例如，如果我选择每页“显示 5 行”，则结果将是“显示 1-5 行，共 {total 条目}”，当我点击第二页时，结果将是“显示 6-10 行，共 {总条目}”。希望有人可以教教我。

	$(document).ready(function () {
		getPagination('#Tabla');
	});

	function getPagination(table) {

	  $('#maxRows').on('change', function() {
		$('.pagination').html(''); // reset pagination 
		var trnum = 0; // reset tr counter 
		var maxRows = parseInt($(this).val()); // get Max Rows from select option
		var totalRows = $(table + ' tbody tr').length; // numbers of rows 
		$(table + ' tr:gt(0)').each(function() { // each TR in  table and not the header
		  trnum++; // Start Counter 
		  if (trnum > maxRows) { // if tr number gt maxRows

			$(this).hide(); // fade it out 
		  }
		  if (trnum <= maxRows) {
			$(this).show();
		  } // else fade in Important in case if it ..
		}); //  was fade out to fade it in 
		if (totalRows > maxRows) { // if tr total rows gt max rows option
		  var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..  
		  //	numbers of pages 
		  for (var i = 1; i <= pagenum;) { // for each page append pagination li 
			$('.pagination').append('<li class"wp" data-page="' + i + '">\
										  <span>' + i++ + '<span class="sr-only">(current)</span></span>\
										</li>').show();
		  } // end for i 
		} // end if row count > max rows
		$('.pagination li:first-child').addClass('active'); // add active class to the first li 
		$('.pagination li').on('click', function() { // on click each page
		  var pageNum = $(this).attr('data-page'); // get it's number
		  var trIndex = 0; // reset tr counter
		  $('.pagination li').removeClass('active'); // remove active class from all li 
		  $(this).addClass('active'); // add active class to the clicked 
		  $(table + ' tr:gt(0)').each(function() { // each tr in table not the header
			trIndex++; // tr index counter 
			// if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
			if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) {
			  $(this).hide();
			} else {
			  $(this).show();
			} //else fade in 
		  }); // end of for each tr in table
		}); // end of on click pagination list
	  }).trigger('change');

	  // end of on select change 
	  // END OF PAGINATION 
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<select class="form-control" name="state" id="maxRows">
	<option value="1" selected>Show 1 Rows</option>
	<option value="3">Show 3 Rows</option>
	<option value="5">Show 5 Rows</option>
	<option value="5000">Show ALL Rows</option>
</select>

<table id="Tabla">
	<thead>
		<tr>
			<th>Name</th>
			<th>Remark</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
		<tr>
			<th>Abu</th>
			<th>Test2</th>
		</tr>
		<tr>
			<th>Ali</th>
			<th>Test1</th>
		</tr>
	</tbody>
</table>

<div style="float:left">
	<strong>Showing <i style="background-color:yellow">11 to 17 </i>out of <?=$count2?> Entries </strong> 
</div>

<div>
	<nav>
	  <ul class="pagination" style="cursor:pointer"></ul>
	</nav>
</div>

Answer 1

检查一下......刚刚使用了一些数学知识，即操作保存页面总行数的total_rows变量。

查看下面更新后的代码:

var initial = 0;
$(document).ready(function() {
  getPagination('#Tabla');
});

function getPagination(table) {

  $('#maxRows').on('change', function() {
    $('.pagination').html(''); // reset pagination 
    var trnum = 0; // reset tr counter 
    var maxRows = parseInt($(this).val()); // get Max Rows from select option


    var totalRows = $(table + ' tbody tr').length; // numbers of rows 
    //console.log("maxRows---", maxRows, totalRows);
    $('#pagin').html(initial + " - " + maxRows);
    $('#totalData').html(totalRows);

    $(table + ' tr:gt(0)').each(function() { // each TR in  table and not the header
      trnum++; // Start Counter 
      if (trnum > maxRows) { // if tr number gt maxRows

        $(this).hide(); // fade it out 
      }
      if (trnum <= maxRows) {
        $(this).show();
      } // else fade in Important in case if it ..
    }); //  was fade out to fade it in 
    if (totalRows > maxRows) { // if tr total rows gt max rows option
      var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..  
      //	numbers of pages 
      for (var i = 1; i <= pagenum;) { // for each page append pagination li 
        $('.pagination').append('<li class"wp" data-page="' + i + '">\
										  <span>' + i++ + '<span class="sr-only">(current)</span></span>\
										</li>').show();
      } // end for i 
    } // end if row count > max rows
    $('.pagination li:first-child').addClass('active'); // add active class to the first li 
    $('.pagination li').on('click', function() { // on click each page
      var pageNum = $(this).attr('data-page'); // get it's number
      var total_rows = maxRows * pageNum; //get total no. of rows WRT page
      $('#pagin').html(total_rows - maxRows + " - " + total_rows);
      var trIndex = 0; // reset tr counter
      $('.pagination li').removeClass('active'); // remove active class from all li 
      $(this).addClass('active'); // add active class to the clicked 
      $(table + ' tr:gt(0)').each(function() { // each tr in table not the header
        trIndex++; // tr index counter 
        // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
        if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) {
          $(this).hide();
        } else {
          $(this).show();
        } //else fade in 
      }); // end of for each tr in table
    }); // end of on click pagination list
  }).trigger('change');

  // end of on select change 
  // END OF PAGINATION 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<select class="form-control" name="state" id="maxRows">
  <option value="1" selected>Show 1 Rows</option>
  <option value="3">Show 3 Rows</option>
  <option value="5">Show 5 Rows</option>
  <option value="5000">Show ALL Rows</option>
</select>

<table id="Tabla">
  <thead>
    <tr>
      <th>Name</th>
      <th>Remark</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>

    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
    <tr>
      <th>Abu</th>
      <th>Test2</th>
    </tr>
    <tr>
      <th>Ali</th>
      <th>Test1</th>
    </tr>
  </tbody>
</table>

<div style="float:left">
  <strong>Showing <i id="pagin" style="background-color:yellow"></i> out of <span id="totalData"></span> Entries </strong>
</div>

<div>
  <nav>
    <ul class="pagination" style="cursor:pointer"></ul>
  </nav>
</div>