通过按钮单击事件刷新/重新加载数据

时间:2017-01-10 06:04:42

标签: javascript jquery html5 twitter-bootstrap

还有更多问题需要解决的问题。我正在使用Jquery Datatable,现在只需单击该表下方的引导按钮即可刷新/重新加载该表。声音容易。我不得不承认这一定很容易,但不知怎的,我找不到任何对我有帮助的帮助,这里提到这个小问题。这就是我到目前为止所做的:

enter image description here

HTML:

<table class="table table-striped table-hover droplist">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Filename</th>
                        <th>Size[bytes]</th>
                        <th>Image</th>
                        <th>Type</th>
                        <th>Added</th>
                        <th>Delete</th>
                    </tr>
                </thead>
        <?php 
                $statement = $pdo->prepare("SELECT * FROM file_upload ORDER BY id");
                  $result = $statement->execute();
                    $count = 1;
                    while($row = $statement->fetch()) {
                        echo '<tr name="'.$row['name'].'">';
                        echo "<td>".$count++."</td>";
                        echo "<td>".$row['name']."</td>";
                        echo "<td>".$row['size']."</td>";
                        echo '<td><img src="'.$row['link'].'" alt="'.$row['name'].'" height="auto" width="100%"></td>';
                        echo "<td>".$row['type']."</td>";
                        echo "<td>".date('d.m.Y H:i:s',strtotime($row['date']))."</td>";
                        echo '<td><a class="delete" href="#" data-artname="'.$row['name'].'"><i class="fa fa-trash" ></i></a></td>';
                        echo "</tr>";
                    }
                ?>
            </table>

JS:

$(document).ready(function() {
    "use strict";
    var table = $('.droplist').DataTable({
            responsive: true,
        // "scrollY":        "100px",
        // "scrollCollapse":  true,
            "paging":         true,
        //  "pagingType": "full_numbers"
        }

    });

    // Refresh datatable by clicking the refresh button (no auto refresh)

    $("#refreshbtn").on('click', function() {

    //          table.fnClearTable();
    //          table.fnDestroy();
    //          table.fnDraw();

    $("#refreshbtn").html('<i class="fa fa-refresh fa-spin"></i>   updating ...');

    setTimeout(function (){
          $("#refreshbtn").html('<i class="fa fa-refresh"></i>   Refresh ');
          }, 3000);
    });

fnDestroyfnDrawfnClearTablefnReloadAjax对我无效。我已经尝试了所有这些。真奇怪。

0 个答案:

没有答案