Разбиение на страницы с помощью клавиш <- и -> в javascript и jquery - PullRequest
Новая
       64

Разбиение на страницы с помощью клавиш <- и -> в javascript и jquery

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

Я пытаюсь сделать нумерацию страниц, как показано на рисунке ниже в таблице в jQuery.Я пытался добиться этого, используя приведенный ниже код в jsfiddle.Работают только 1 2 3 опции .

  1. как добавить клавиши со стрелками вперед и назад для навигации
  2. А также мне нужно знать, как добавитьОтображение 10 из 25 записей в пути на изображении.Может кто-нибудь сказать, как это сделать.Заранее спасибо.

Примечание: версия Jquery: 3.4.1 версия Bootsrap: 4.3.1 

$(document).ready(function() {
  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').bind('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    var currPage = $(this).attr('rel');

    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
</table>

enter image description here

Ответы [ 4 ]

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

Я переместил стрелки и дал им класс.

Затем я опрашиваю активную навигационную ссылку

Я также изменил устаревший .bind на .on

Добавил"показывая x of y" тоже 

$(document).ready(function() {
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;

  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }


  $('#nav a').on('click', function() {
    $('#nav a').removeClass('active');
    $(this).addClass('active'); // add not(".arrow"). if inside nav

    var currPage = $(this).attr('rel');
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem)
      .css('display', 'table-row').animate({
        opacity: 1
      }, 300);
    $("#rowof").html(`Showing ${startItem+1} to ${endItem>=rowsTotal?rowsTotal:endItem} of ${rowsTotal}`);
  });

  
  $("#navContainer .arrow").on("click", function() {
    var currentPage = +$('#nav a.active').attr("rel");
    var prev = this.id === "prev";
    if (currentPage === 0 && prev); // nothing
    else if (currentPage === +$('#nav a:last').attr("rel") && !prev); // nothing
    else {
      currentPage += prev ? -1 : 1;
      $("#nav a").eq(currentPage).click();
    }
  })

  $('#data tbody tr').hide();
  $("#nav a").eq(0).click();
  
});
a {
  text-decoration: none;
  padding: 2px
}

.active {
  text-decoration: underline
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tbody>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
  </tbody>  
</table>
<div id="navContainer">
  <a href="#" class="arrow" id="prev">⬅️</a>
  <span id="nav"></span>
  <a href="#" class="arrow" id="next">➡️</a> <span id="rowof"></span>
</div>
0 голосов
/ 23 сентября 2019

Вы почти все сделали, все, что вам нужно сделать, это создать кнопку и проверить, где находится current_page, и убедиться, что вы используете метод click () для этого элемента навигации ... 

var current_page = 0;
$(document).ready(function() {
   
   

  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  
  $('.left-pag').on('click', function() { 
      if(current_page > 0) current_page--;
      $("#nav a").eq(current_page).click();
   });
   
   $('.right-pag').on('click', function() { 
      if(current_page < numPages-1) current_page++;
      $("#nav a").eq(current_page).click();
   });
  
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').bind('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    var currPage = $(this).attr('rel');
    current_page = currPage;

    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
</table>
<button class="left-pag">Previous</button>
<button class="right-pag">Next</button>
0 голосов
/ 23 сентября 2019

Вы можете использовать селектор :visible, чтобы получить элементы, отображаемые на текущей странице.Используйте класс .active в дополнение к селектору атрибутов hte [rel], чтобы получить предыдущую / следующую ссылку на пейджинг, а затем активируйте его обработчик кликов, используя trigger("click"). 

$(document).ready(function() {
  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;
  var currPage = 0;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav').after('<div id="stats">Displaying ' + $('#data tbody tr:visible').length + ' of ' + rowsTotal + ' items</div>');
  $('#nav a:first').addClass('active');
  $('#nav a').on('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    currPage = $(this).attr('rel');

    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
    $('#stats').text('Displaying ' + $('#data tbody tr:visible').length + ' of ' + rowsTotal + ' items');
  });

  $('<a href="#">&lt;</a> ').prependTo('#nav').on('click', function() {
    $('#nav a[rel].active').prev('a[rel]').trigger('click');
  });

  $('<a href="#">&gt;</a>').appendTo('#nav').on('click', function() {
    $('#nav a[rel].active').next('a[rel]').trigger('click');
  });
});
.active {
  font-weight: bold;
}

#nav a {
  display: inline-block;
  float: left;
  padding: 5px;
}

#nav {
  overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3 </td>
  </tr>
  <tr>
    <td>Row 4</td>
  </tr>
  <tr>
    <td>Row 5</td>
  </tr>
  <tr>
    <td>Row 6</td>
  </tr>
  <tr>
    <td>Row 7</td>
  </tr>
  <tr>
    <td>Row 8</td>
  </tr>
  <tr>
    <td>Row 9</td>
  </tr>
  <tr>
    <td>Row 10</td>
  </tr>
  <tr>
    <td>Row 11</td>
  </tr>
  <tr>
    <td>Row 12</td>
  </tr>
  <tr>
    <td>Row 13</td>
  </tr>
  <tr>
    <td>Row 14</td>
  </tr>
  <tr>
    <td>Row 15</td>
  </tr>
  <tr>
    <td>Row 16</td>
  </tr>
  <tr>
    <td>Row 17</td>
  </tr>
  <tr>
    <td>Row 18</td>
  </tr>
  <tr>
    <td>Row 19</td>
  </tr>
  <tr>
    <td>Row 20</td>
  </tr>
  <tr>
    <td>Row 21</td>
  </tr>
  <tr>
    <td>Row 22</td>
  </tr>
  <tr>
    <td>Row 23</td>
  </tr>
  <tr>
    <td>Row 24</td>
  </tr>
  <tr>
    <td>Row 25</td>
  </tr>
</table>
0 голосов
/ 23 сентября 2019

Вы должны отредактировать свой js-код, глобально определить currpage вне $('#nav a').bind(...., чтобы непосредственно перед циклом вы могли добавить предыдущую ссылку, и добавить следующую ссылку сразу после цикла 

$(document).ready(function() {
  var currPage = 0;

  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;

  $('#nav').append('<a href="#" id="prev" rel="' + (((currPage - 1) >= 0) ? (currPage - 1) : 0) + '" ><</a> ');
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  $('#nav').append('<a href="#" id="next" rel="' + (((currPage + 1) < numPages) ? (currPage + 1) : numPages - 1) + '" >></a> ');

  $('<span>showing ' + rowsShown + ' of ' + rowsTotal + '</span>').insertAfter('#nav')
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').on('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    currPage = parseInt($(this).attr('rel'));
    $(document).find('#prev').attr('rel', (((currPage - 1) >= 0) ? (currPage - 1) : 0));

    $(document).find('#next').attr('rel', (((currPage + 1) < numPages) ? (currPage + 1) : numPages));
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...