带有Bootpag AJAX的Paginate表

时间:2016-02-14 00:00:58

标签: javascript php jquery ajax pagination

我找到了一个名为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脚本的路径。

以下是该表的一个镜头,没有填充数据,让您了解我想要完成的任务。 enter image description here

我迷失在这一点上我无法弄清楚如何将它们结合在一起并让所有东西同步。我看了很多例子,但我需要具体的信息来了解我的具体情况,以便更好地理解我不能掌握哪些逻辑来完成这些类型的任务。

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

我无法直接回答您的问题,因为我没有使用Bootpag的经验。我不想暗示Bootpag不是一个好的解决方案。但是我的脑子里尖叫着#Dattiess&#34;! https://www.datatables.net/ - 它是我用于这些类型的情况,而Datatables就像一个梦想。您可能希望将其视为替代方案。