'pagination in html page

I am showing all my products in rows, but the code which I am using shows the result in columns. I am using the datatable pagination, I don't know how I am using pagination in my web site please help me. enter image description here

<table  id="datatables" class="table no-margin">
    <thead >
         <tr>
             <th></th>
         </tr>
    </thead>
    <tbody class="df">
        <?php 
            $pr = mysqli_query($link,"select * from product where company_id = '".$company_id."'");
            while($prd = mysqli_fetch_array($pr))
            {
                $price = mysqli_fetch_array(mysqli_query($link,"select * from 
                admin_price where p_code = '".$prd['p_code']."'"));
            ?>  
        <tr>            
    <td>
        <?php echo("<a href='single.php?
            p_code=".$prd['p_code']."'>"); ?>
        <div class="part-secz">                  
            <img src="<?php echo("images/".$prd['image']); ?>" alt=""/>
            <div class="part-infoz">
                <?php 
                    echo("<a class='asd' href='single.php?p_code=".$prd['p_code']."'>"); 
                ?>
                <h5>
                    <?php echo($prd['p_code']); ?><span>$ <?php echo($price['price']); ?>
                    </span>
                </h5>
                <?php 
                    echo("</a>");?>
                    <?php echo("<a class='add-cart' href='single.php p_code=".$prd['p_code']."'>"); ?> Quick View<?php 
                    echo("</a>");?>
                    <?php echo("<a class='qck' href='single.php p_code=".$prd['p_code']."'>"); ?>BUY NOW</a><?php 
                    echo("</a>");?>
                </div>
            </div>   
        </td>
        <div class="clearfix">
        </div>
    </tr>                           
    <?php
        }
    ?>
phphtmldatatable


Solution 1:[1]

Just get your tag outside of while loop

<tr>
 while($prd = mysqli_fetch_array($pr))
   {

<td> Your Values </td>

}
</tr>

Solution 2:[2]

Basically, your code is a cycle of :

<table  id="datatables" class="table no-margin">
  <thead><tr><th></th></tr></thead>
  <tbody class="df">
    <?php 
        $pr = mysqli_query($link,"select * from product where company_id = '".$company_id."'");
        while($prd = mysqli_fetch_array($pr))
        {
     <tr>           
      <td>
         {{some display logic}}
      </td>
      <div class="clearfix">
      </div>
 </tr>     
 <?php } ?>

If you want your products to be in one line fix it, so new row is not created

<table  id="datatables" class="table no-margin">
  <thead><tr><th></th></tr></thead>
  <tbody class="df">
     <tr>         
    <?php 
        $pr = mysqli_query($link,"select * from product where company_id = '".$company_id."'");
        while($prd = mysqli_fetch_array($pr))
        {

      <td>
         {{some display logic}}
      </td>
      <div class="clearfix">
      </div>
      <?php } ?>       
 </tr>

Solution 3:[3]

<html>
<head>
    
</head>
<style>
    
    #myInput {width: 90px; height: 10px;  border-radius: 12px;
    };
    .button1 {width: 90px;
        height: 10px;  border-radius: 20px;
    }

    
    .button1:hover, .button1:active {
      background-color: #008B8B;
      color: white;
    }
</style>
<style>
    .paginationbutton {
     
      font: bold 11px Arial;
      text-decoration: none;
      background-color: #EEEEEE;
      color: #333333;
      padding: 4px 6px 4px 6px;
      border-top: 1px solid #CCCCCC;
      border-right: 1px solid #333333;
      border-bottom: 1px solid #333333;
      border-left: 1px solid #CCCCCC;
      border-radius: 12px;
      
    
    }
    
    a.paginationbutton:hover, a.paginationbutton:active {
      background-color: #008B8B;
      color: white;
    }
    </style>
    

<script>
//document.getElementById('currentPage').value=1;
gotoFirstPage();
function gotoFirstPage(){
        
        paginate(100,1);

    }
    function gotoPrevPage(){
        var currentPg=document.getElementById('currentPage').value;
       var prevPage=currentPg-1;
        if (prevPage < 1) {
            prevPage = 1;
    }     
        paginate(100,prevPage);

    }
    function gotoNextPage(){
        var currentPg=document.getElementById('currentPage').value;
        var totalItems=document.getElementById('totalItems').value; 
        var pageSize=10;
        var nextPage=parseInt(currentPg)+1;
        var totalPages = Math.ceil(totalItems / pageSize);
alert(nextPage);
alert(totalPages);

        if (nextPage > totalPages) {
            nextPage = totalPages;
    } 
        var start=1;
        var end=10;
       
        paginate(totalItems,nextPage);

    }
    function gotoLastPage(){
        var totalItems=document.getElementById('totalItems').value;
        var pageSize=10;
        var totalPages = Math.ceil(totalItems / pageSize);
         paginate(100,totalPages);

    }

    function paginate(
    totalItems ,
    currentPage
    
    
) {
   // var totalItems=document.getElementById('totalItems').value;
 
    var pageSize=10;
    // calculate total pages
    var totalPages = Math.ceil(totalItems / pageSize);

    // ensure current page isn't out of range
    if (currentPage < 1) {
        currentPage = 1;
    } else if (currentPage > totalPages) {
        currentPage = totalPages;
    }

    var startPage, endPage ;
    
    // calculate start and end item indexes
    var startIndex = (currentPage - 1) * pageSize;
    var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

    alert(""+startIndex+""+endIndex);
    document.getElementById('currentPage').value=currentPage;

}

 </script>
<div id="buttons" style="text-align:right">
    Total Items<input type="text"  id='totalItems' value="" size=3  class="paginate_control_prev">
    currentPage<input type="text"  id='currentPage' value="1" size=3  class="paginate_control_prev">
    
    <span id="pageLabel" > 
    <a href="default.asp" class="paginationbutton" target="_blank" onclick="gotoFirstPage()">&laquo;&laquo; First</a>    
   <a href="default.asp" class="paginationbutton" target="_blank" onclick="gotoPrevPage()">&laquo;Previous</a>

   <a href="default.asp" class="paginationbutton" target="_blank" onclick="gotoNextPage()">Next &raquo;</a>

   <a href="default.asp" class="paginationbutton" target="_blank" onclick="gotoLastPage()">Last  &raquo;&raquo;</a>

    <input type="text"  id='nthPage' size=3 maxlength=3 class="paginate_control_prev">

    <input type="button" id="paginate-go-button" class="button1" value="Go" onclick="goToNthPage()">  </div>
    <script>
        document.getElementById('currentPage').value="2";

        </script>
    
</body></html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Parth Sureliya
Solution 2 Vestel
Solution 3 Prashanth

Related Questions