मेरे पास MySQL डेटाबेस से रिकॉर्ड की गतिशील तालिका वाला एक डैशबोर्ड PHP पृष्ठ है, जो प्रत्येक 1000 के पृष्ठों में पृष्ठांकित है। मैंने प्रदर्शित पंक्तियों की मात्रा को अद्यतन करने के लिए उपयोगकर्ता के लिए कुछ विकल्पों के साथ एक चुनिंदा ड्रॉपडाउन जोड़ा। चयन में परिवर्तन पर फ़ॉर्म को स्वचालित रूप से सबमिट करने के लिए जावास्क्रिप्ट कोड है।

प्रपत्र पृष्ठ:

<?php

 include('connect.php');

 // first check URL
 if (isset($_GET['amount'])) {
 $perpage = $_GET['amount'];
 }
 // Now check form
 if (isset($_POST['amount'])) {
 $perpage = $_POST['amount'];
 }
 // if nothing set, default:
 if(!isset($perpage)) {
 $perpage = 50;
 }


 if(isset($_GET['page']) && !empty($_GET['page'])){ // code to get the amount of records for HTML paginated pages
     $currentPage = $_GET['page'];
 } else {
     $currentPage = 1;
 }

 // Pagination code and query
 $startFrom = ($currentPage * $perpage) - $perpage;
 $totalEmpSQL = "SELECT * FROM `tblusers` WHERE Id NOT IN (1,2,3)";
 $allEmpResult = mysqli_query($conn, $totalEmpSQL);
 $totalEmployee = mysqli_num_rows($allEmpResult);
 $lastPage = ceil($totalEmployee/$perpage);
 $firstPage = 1;
 $nextPage = $currentPage + 1;
 $previousPage = $currentPage - 1;
 $empSQL = "SELECT Id, FirstName, LastName, Cell, Email, Address, Region
            FROM `tblusers` 
            WHERE Id NOT IN (1,2,3) 
            ORDER BY LastName 
            LIMIT $startFrom, $perpage";
 $empResult = mysqli_query($conn, $empSQL);

 ?>

 <!-- HTML Form -->
 <section class="panel">
 <header class="panel-heading">
             <div class="input-group">
<!-- JavaScript Filter Input -->
<input type="text" class="form-control"  id="search" onkeyup="myFunction()" 
placeholder="Soek lede..">
<div class="input-group-btn">
  <button class="btn btn-default" type="submit">
    <i class="glyphicon glyphicon-search"></i>
  </button>
</div>
</div>
</header>
    <div class="panel-body">

<div class="row datatables-header form-inline">

                            <div class="col-sm-4 col-md-4">

                            <!-- THE FORM THAT IS SUPPOSED TO UPDATE THE 
VARIABLE FOR AMOUNT QUERY -->
                            <form method="post" action="<?php echo 
htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                <select id="amount" class="form-control" 
onchange="this.form.submit()">
                                         <option value="10">10</option>
                                         <option value="25">25</option>
                                         <option value="50">50</option>
                                         <option value="100">100</option>
                                         <option value="500">500</option>
                                    </select>
                           </form>
                            </div>
    <div class="col-sm-4 col-md-4">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <?php if($currentPage != $firstPage) { ?>
                        <li class="page-item">
                            <a class="page-link" href="?page=<?php echo 
$firstPage ?>" tabindex="-1" aria-label="Vorige">
                                <span aria-hidden="true">Eerste</span>
                            </a>
                        </li>
                <?php } ?>
                <?php if($currentPage >= 2) { ?>
                        <li class="page-item"><a class="page-link" href="? 
 page=<?php echo $previousPage ?>"><?php echo $previousPage ?></a></li>
                <?php } ?>
                        <li class="page-item active"><a class="page-link" 
  href="?page=<?php echo $currentPage ?>"><?php echo $currentPage ?></a> 
 </li>
                            <?php if($currentPage != $lastPage) { ?>
                        <li class="page-item"><a class="page-link" href="?page=<?= $nextPage ?>&amount=<?= $perpage ?>"><?= $nextPage ?></a></li>
                        <li class="page-item">
                            <a class="page-link" href="?page=<?php echo 
  $lastPage ?>" aria-label="Volgende">
                                <span aria-hidden="true">Laaste</span>
                            </a>
                        </li>
                <?php } ?>
            </ul>
        </nav>
    </div>
    <div class="col-sm-4 col-md-4">
            <a class="btn btn-primary pull-right" style="margin:20px;" 
href="index.php?page=new">Laai nuwe lid</a>
    </div>
</div>
        <!-- THE DYNAMIC TABLE -->
        <div class="table-responsive">
            <table id="myTable" class="table table-hover table-striped 
    table-condensed mb-none">
                <?php
                    echo "<thead><th>Van:</th><th>Naam:</th><th>Selfoon: 
   </th><th>E-pos:</th><th>Adres:</th><th>Streek:</th><th>Aksie:</th> 
 </thead> 
   <tbody>";
                            while($emp = mysqli_fetch_assoc($empResult)){
                    ?>
                            <tr>
                                <?php echo "<tr><td>". $emp["LastName"] . " 
</td><td>". $emp["FirstName"] . "</td><td>". $emp["Cell"] . "</td><td>". 
 $emp["Email"] . "</td><td>". $emp["Address"] . "</td><td>". $emp["Region"] 
. 
"</td><td class='actions'><a href='index.php?page=edit&id=" . $emp["Id"] . 
"'><i class='fa fa-pencil'> Wysig | </i></a><a href='index.php? 
page=delete&id=" . $emp["Id"] . "'<i class='delete-row'><i class='fa fa- 
trash-o'> Verwyder | </i></a><a href='index.php?page=single&id=" . 
 $emp["Id"] 
 . "'<i class='delete-row'><i class='fa fa-comment-o'> SMS</i></a></td> 
</tr>";?>
                            </tr>
                        <?php } ?>
                    </tbody>
            </table>
        </div>
    </div>
</section>
<!-- dash panel end -->




<script>
function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
       if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
         tr[i].style.display = "";
       } else {
         tr[i].style.display = "none";
       }
    } 
  }
}
</script>

पृष्ठ को तालिका के लिए प्रति पृष्ठ १००० पंक्तियों की डिफ़ॉल्ट राशि के साथ लोड होना चाहिए, और तब अद्यतन करें जब चयन को १०० कहने के लिए बदल दिया जाए, केवल १०० रिकॉर्ड लोड करें। यह वर्तमान में कोई रिकॉर्ड नहीं दिखा रहा है, लेकिन जब मैं चयन को हटा देता हूं तो यह डिफ़ॉल्ट लोड करता है। मेरा अनुमान है, राशि को संभालने के लिए मेरा कोड सही नहीं है?

0
WebAcumen 26 अक्टूबर 2018, 14:00

1 उत्तर

समस्या बूटस्ट्रैप के साथ आए डेटा टेबल प्लगइन के कारण हुई थी। मुझे बस इतना करना था कि टेबल पर क्लास डेटाटेबल जोड़ें और सब कुछ काम कर गया।

0
André van Rensburg 29 अक्टूबर 2018, 09:51