表格分页错误

Question

所以最近，我尝试更新我的分页代码，以便我可以将它用于不同页面中的多个表。但是当我根据表的唯一 id 添加函数时，前 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>

Answer 1

"分页按钮在同一个 div 中，我就是不能 找出原因。" -

这是因为您的代码将它们放在一个循环中。这是因为您正在重用nav 的id 属性。所以第二次循环触发时，它会将它们放在第一个 div 中。

将每次调用的id属性值更改为setPage()

更新：OP 询问如何创建唯一 ID：

有很多方法可以创建唯一的 id 属性。但是，按照您已经创建的模式，为什么不使用表的 id 属性的当前方法呢？即，传入第三个参数，即按钮 div 的 id。像这样：

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 ...

Answer 2

我想问一下，这是否是代码的正确实现

'#nav button:first'

到

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

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

如果这是正确的，分页按钮不会显示在代码之后。