带Bootpag AJAX的分页表

Question

我找到了一个名为Bootpag的插件，该插件提供了一些用于分页数据的基本功能。

我有一个连接到数据库并提供表中所有数据的文件。 数据被解析为表格行，我想将其附加到

<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脚本的路径。

这是表的快照，没有填充任何数据，可以让您大致了解我要完成的工作。

在这一点上，我迷失了方向，我无法弄清楚如何将它们组合在一起并使所有内容同步。 我看了很多示例，但是我需要具体的信息以了解我的具体情况，以便更好地理解完成这些类型任务所需的逻辑。

谢谢您的帮助。

Answer 1

由于我没有Bootpag的经验，因此我无法直接回答您的问题。 我不想建议Bootpag不是一个好的解决方案。 但是我的脑海尖叫着“数据表”！ https://www.datatables.net/-这是我在这类情况下使用的数据表，就像梦一样。 您可能需要考虑将其作为替代方案。