Блог

Недавно я попытался обновить свой код разбивки на страницы, чтобы я мог использовать его для нескольких таблиц на разных страницах. Но когда я добавил функцию, основанную на уникальном идентификаторе таблицы, первые 2 кнопки работают вместе, а последние 2 работают просто отлично. Кроме того, кнопки разбивки на страницы находятся внутри одного и того же div, и я просто не могу понять, почему.

Это функция

    function setPage(pagination, pageBody){
    $(pagination).after('<div id="nav"> </div>');
    var rowsShown = 4;
    var rowsTotal = $(pageBody).length;
    var numPages = rowsTotal/rowsShown;
    for(i = 0;i < numPages;i  ) {
        var pageNum = i   1;
        $('#nav').append('<button type="button" rel="' i '" class="navpage">' pageNum '</button> ');
    }
    $(pageBody).hide();
    $(pageBody).slice(0, rowsShown).show();
    $('#nav button:first').addClass('active');
    $('#nav button').bind('click', function(){

        $('#nav button').removeClass('active');
        $(this).addClass('active');
        var currPage = $(this).attr('rel');
        var startItem = currPage * rowsShown;
        var endItem = startItem   rowsShown;
        $(pageBody).css('opacity','0.0').hide().slice(startItem, endItem).
        css('display','table-row').animate({opacity:1}, 300);
    });
}


setPage('#pagination', '#pagination tbody tr')
setPage('#pagination2', '#pagination2 tbody tr')
 

Это код css

     .navpage {
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
  padding: 0 10px 0 10px;
  background-color: #3cd45d;
  width: 40px;
  border-radius: 10px;
  color: white;
  display: inline-block;
  text-align: center;
}

.navpage:hover {
  background-color: rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
 

И это код EJS

 <div class="grid-container">
  <div>
    <h1>Performance</h1>

    <div class="dropdown">
      <button type="button" class="button button1" id="addperformance" data-toggle="modal"
        data-target="#exampleModal">Add</button>
      <button type="button" class="button button1" id="editperformance" data-toggle="modal"
        data-target="#exampleModal1">Edit</button>
      <form action="" class="search-form">
        <input type="search" id="search_p" class="search-input" />
        <i class="fa fa-search"></i>
      </form>
    </div>
    <br />

    <table class="table table-sortable" id="pagination">
      <thead>
        <tr>
          <th>Name</th>
          <th>Category</th>
          <th>Description</th>
          <th>Date</th>
          <th>Written By</th>
        </tr>
      </thead>
      <tbody id="table_body_p">
        <% for(var i=0; i < data.employeeProfile.length; i  ) { %>
          <tr>
            <td>
              <%= data.employeeProfile[i].name %>
            </td>
            <td>
              <%= data.employeeProfile[i].category %>
            </td>
            <td>
              <%= data.employeeProfile[i].description %>
            </td>
            <td>
              <%= data.employeeProfile[i].date %>
            </td>
            <td>
              <%= data.employeeProfile[i].writtenBy %>
            </td>

          </tr>
          <% } %>
      </tbody>
    </table>
  </div>
</div>
<div class="grid-container">
  <div>
    <h1>Personal Information</h1>

    <div class="dropdown">
      <button type="button" class="button button1" id="addinfo" data-toggle="modal"
        data-target="#exampleModal2">Add</button>
      <button type="button" class="button button1" id="editinfo" data-toggle="modal"
        data-target="#exampleModal3">Edit</button>
      <form action="" class="search-form">
        <input type="search" id="search_pi" class="search-input" />
        <i class="fa fa-search"></i>
      </form>
    </div>
    <br />

    <table class="table table-sortable" id="pagination2">
      <thead>
        <tr>
          <th>Name</th>
          <th>Phone</th>
          <th>Email</th>
          <th>Emergency Contact</th>
          <th>Joined Date</th>
        </tr>
      </thead>
      <tbody id="table_body_pi">
        <% for(var i=0; i < data.employeeResponse.length; i  ) { %>
          <tr>
            <td>
              <%= data.employeeResponse[i].name %>
            </td>
            <td>
              <%= data.employeeResponse[i].contact %>
            </td>
            <td>
              <%= data.employeeResponse[i].email %>
            </td>
            <td>
              <%= data.employeeResponse[i].emergencyContact %>
            </td>
            <td>
              <%= data.employeeResponse[i].joinedDate %>
            </td>

          </tr>
          <% } %>
      </tbody>
    </table>
  </div>
</div>

<%- include('partials/addNewPerformance') %>
  <%- include('partials/editNewPerformance') %>
    <%- include('partials/addNewInfo') %>
      <%- include('partials/editInfo') %>


        </div>
 

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

Это происходит потому, что ваш код помещает их туда в цикле. Это происходит потому , что вы повторно id используете атрибут nav . Таким образом, при втором запуске цикла он помещает их внутрь первого div.

Измените значение id атрибута для каждого вызова на setPage()

ОБНОВЛЕНИЕ: ОП спросил, как создать уникальные идентификаторы:

Существует много способов создания уникальных атрибутов идентификатора. Но, следуя шаблону, который вы уже создали, почему бы не использовать ваш текущий метод атрибута id таблицы? А именно, передайте третий параметр, который является идентификатором кнопки div. Вот так:

 setPage('#pagination', '#pagination tbody tr', '#nav')
setPage('#pagination2', '#pagination2 tbody tr', '#nav2')
 

Затем внутри setPage() сделайте это:

 function setPage(pagination, pageBody, buttonDiv){
    $(pagination).after('<div id="'  buttonDiv  '"> </div>');
      // other code here ...

      // in the for loop
        $(buttonDiv).append('<button type="button" rel="' i '" class="navpage">' pageNum '</button> ');

     // rest of code ...
 

Я хотел бы спросить, является ли это правильной реализацией кода для

 '#nav button:first'
 

Для

  $(buttonDiv    'button:first').addClass('active');
    $(buttonDiv   'button').bind('click', function(){

        $(buttonDiv   'button').removeClass('active');
        $(this).addClass('active');
 

Если это правильно, кнопки разбивки на страницы не отображаются после кода.