How can I allow pagination on a bootstrap table with header on the left side-CodePudding

Hello I found this table on Stack Overflow and I would Like to know how to add a pagination for each 5 registers

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>

<table >
  <tbody>
    <tr>
      <th>Row</th>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <th>First Name</th>
      <td>John</td>
      <td>Peter</td>
      <td>John</td>
    </tr>
    <tr>
      <th>Last Name</th>
      <td>Carter</td>
      <td>Parker</td>
      <td>Rambo</td>
    </tr>
    <tr>
      <th>Email</th>
      <td>[email protected]</td>
      <td>[email protected]</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

You can check how the table looks like in the link I put on the start of the post. Thanks for your answers

CodePudding user response：

Is someting like this you want ?

getPagination("#table-id");

function getPagination(table) {
  var lastPage = 1;

  $("#maxRows")
    .on("change", function (evt) {
      //$('.paginationprev').html('');                      // reset pagination

      lastPage = 1;
      $(".pagination").find("li").slice(1, -1).remove();
      var trnum = 0; // reset tr counter
      var maxRows = parseInt($(this).val()); // get Max Rows from select option

      if (maxRows == 5000) {
        $(".pagination").hide();
      } else {
        $(".pagination").show();
      }

      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 #prev")
            .before(
              '<li data-page="'  
                i  
                '">\
                                  <span>'  
                i    
                '<span >(current)</span></span>\
                                </li>'
            )
            .show();
        } // end for i
      } // end if row count > max rows
      $('.pagination [data-page="1"]').addClass("active"); // add active class to the first li
      $(".pagination li").on("click", function (evt) {
        // on click each page
        evt.stopImmediatePropagation();
        evt.preventDefault();
        var pageNum = $(this).attr("data-page"); // get it's number

        var maxRows = parseInt($("#maxRows").val()); // get Max Rows from select option

        if (pageNum == "prev") {
          if (lastPage == 1) {
            return;
          }
          pageNum = --lastPage;
        }
        if (pageNum == "next") {
          if (lastPage == $(".pagination li").length - 2) {
            return;
          }
          pageNum =   lastPage;
        }

        lastPage = pageNum;
        var trIndex = 0; // reset tr counter
        $(".pagination li").removeClass("active"); // remove active class from all li
        $('.pagination [data-page="'   lastPage   '"]').addClass("active"); // add active class to the clicked
        // $(this).addClass('active');                  // add active class to the clicked
        limitPagging();
        $(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
      limitPagging();
    })
    .val(5)
    .change();

  // end of on select change

  // END OF PAGINATION
}

function limitPagging() {
  // alert($('.pagination li').length)

  if ($(".pagination li").length > 7) {
    if ($(".pagination li.active").attr("data-page") <= 3) {
      $(".pagination li:gt(5)").hide();
      $(".pagination li:lt(5)").show();
      $('.pagination [data-page="next"]').show();
    }
    if ($(".pagination li.active").attr("data-page") > 3) {
      $(".pagination li:gt(0)").hide();
      $('.pagination [data-page="next"]').show();
      for (
        let i = parseInt($(".pagination li.active").attr("data-page")) - 2;
        i <= parseInt($(".pagination li.active").attr("data-page"))   2;
        i  
      ) {
        $('.pagination [data-page="'   i   '"]').show();
      }
    }
  }
}

$(function () {
  // Just to append id number for each row
  $("table tr:eq(0)").prepend("<th> ID </th>");

  var id = 0;

  $("table tr:gt(0)").each(function () {
    id  ;
    $(this).prepend("<td>"   id   "</td>");
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
        <h2>Select Number Of Rows</h2>
                <div >    <!--        Show Numbers Of Rows        -->
                    <select class  ="form-control" name="state" id="maxRows">
                         <option value="5000">Show ALL Rows</option>
                         <option value="5">5</option>
                         <option value="10">10</option>
                        
                        </select>
                    
                </div>

<table  id= "table-id">
    <tbody>
        <tr>
          <th>Row</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
          <th>First Name</th>
            <td>John</td>
            <td>Peter</td>
            <td>John</td>
        </tr>
        <tr>
          <th>Last Name</th>
            <td>Carter</td>
            <td>Parker</td>
            <td>Rambo</td>
        </tr>
      <tr>
          <th>Email</th>
            <td>[email protected]</td>
            <td>[email protected]</td>
            <td>[email protected]</td>
        </tr>
       <tr>
          <th>Row</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
          <th>First Name</th>
            <td>John</td>
            <td>Peter</td>
            <td>John</td>
        </tr>
        <tr>
          <th>Last Name</th>
            <td>Carter</td>
            <td>Parker</td>
            <td>Rambo</td>
        </tr>
      <tr>
          <th>Email</th>
            <td>[email protected]</td>
            <td>[email protected]</td>
            <td>[email protected]</td>
        </tr>
       <tr>
          <th>Row</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
          <th>First Name</th>
            <td>John</td>
            <td>Peter</td>
            <td>John</td>
        </tr>
        <tr>
          <th>Last Name</th>
            <td>Carter</td>
            <td>Parker</td>
            <td>Rambo</td>
        </tr>
      <tr>
          <th>Email</th>
            <td>[email protected]</td>
            <td>[email protected]</td>
            <td>[email protected]</td>
        </tr>
       <tr>
          <th>Row</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
          <th>First Name</th>
            <td>John</td>
            <td>Peter</td>
            <td>John</td>
        </tr>
        <tr>
          <th>Last Name</th>
            <td>Carter</td>
            <td>Parker</td>
            <td>Rambo</td>
        </tr>
      <tr>
          <th>Email</th>
            <td>[email protected]</td>
            <td>[email protected]</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
    
</table>

<!--        Start Pagination -->
            <div class='pagination-container' >
                <nav>
                  <ul >
            
            <li data-page="prev" >
                                     <span> < <span >(current)</span></span>
                                    </li>
                   <!-- Here the JS Function Will Add the Rows -->
        <li data-page="next" id="prev">
                                       <span> > <span >(current)</span></span>
                                    </li>
                  </ul>
                </nav>
            </div>

</div> <!--         End of Container -->