2016-02-14 82 views
0

我發現了一個名爲Bootpag的插件,它爲分頁數據提供了一些基本功能。帶Bootpag的分頁表AJAX

我有一個連接到數據庫並提供表中所有數據的文件。該數據被解析爲錶行,我想將其追加到

<tbody> 

data.php

舉行的行數和HTML

try { 
    $dbh = new PDO("mysql:host=$hostname;dbname=$database",$username,$password); 
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    $results = $dbh->prepare("SELECT * FROM wuno_inventory"); 
    $results->execute(); 
    $count = $results->rowCount(); 

    if($results->rowCount()==0) { 
    echo 'No results where found'; 
    } else { 
    echo $_POST[$count]; 
    while($data = $results->fetch(PDO::FETCH_ASSOC)) 
    { ?> 
     <tr class="invent"> 
      <td><?php echo $data['wuno_product']; ?></td> 
      <td><?php echo $data['wuno_alternates']; ?></td> 
      <td><?php echo $data['wuno_description']; ?></td> 
      <td><?php echo $data['wuno_onhand']; ?></td> 
      <td><?php echo $data['wuno_condition']; ?></td> 
      </tr> 

     <?php 
     } 
     } 
     } catch (PDOException $e) { 
     error_log('PDO Exception: '.$e->getMessage()); 
     die("ERROR: THERE WAS A PROBLEM CONNECTING TO THE DATABASE"); 
     } 

在我的用戶視圖文件數據顯示,如果我包括文件,但我想要得到它並用ajax調用它的頁面分頁html看起來像這樣

<table id="prods" class="display table center-table" width="100%" > 
        <thead> 
          <tr> 
           <th>Product #</th> 
           <th>Alternate #</th> 
           <th>Description</th> 
           <th>On Hand</th> 
          <th>Condition</th> 
          </tr> 
         </thead> 

        <tbody id="productResults"> 
        <span class="pagination"> 

        </span> 

最後,我使用這個jquery將它們放在一起,但它不會加載數據或與分頁同步。

<script type="text/javascript"> 
var assetPath ='<?php echo $assetPath; ?>'; 
var num ='<?php $_POST[$count];; ?>'; 
(function($) { 
$(document).ready(function(){ 

$('.pager-top,.pager-bottom').bootpag({ 
    total: 300, 
    page: 1, 
    maxVisible: 5, 
    leaps: true, 
    firstLastUse: true, 
    first: '←', 
    last: '→', 
    wrapClass: 'pagination', 
    activeClass: 'active', 
    disabledClass: 'disabled', 
    nextClass: 'next', 
    prevClass: 'prev', 
    lastClass: 'last', 
    firstClass: 'first' 
}).on("page", function(event, num){ 
    $.ajax({ 
      url: "assetPath?pageNumber="+num, 
      }).done(function(data) { 
      $("#productResults").html(data); 
      }); 
}); 
}); 
})(jQuery); 

</script> 

我打電話給我在Jquery開頭聲明的變量給我的頁碼和PHP腳本的路徑。

這裏是一張沒有填充數據的表格,讓您知道我正在努力完成的任務。 enter image description here

我迷失在這一點上,我一直無法弄清楚如何把這些結合在一起,讓所有的東西一起同步。我看了大量的例子,但是爲了更好地理解我不能完成這些類型的任務所掌握的邏輯,我需要具體的信息來確定我的確切情況。

謝謝你的幫助。

回答

0

我無法直接回答你的問題,因爲我沒有使用Bootpag的經驗。我不想建議Bootpag不是一個好的解決方案。但我的頭腦尖叫「數據表」! https://www.datatables.net/ - 這是我用於這些類型的情況,Datatables像夢一樣工作。您可能希望將其視爲替代方案。

+0

我已經嘗試了所有你可能想象的事情,並且不能得到一個工作示例。我將所有數據解析爲名爲showProducts()的函數;我所需要做的就是弄清楚如何讓這個函數與分頁表中的ajax一起工作。如果你認爲這是一個很好的選擇,請告訴我如何設置它 – wuno

+0

以我的經驗,datatables開箱即用。只要按照他們的指示..但我很高興能成爲幫助,如果你遇到任何問題! https://www.datatables.net/manual/installation –