Question

我想知道是否有人可以解释使用HTML按钮将数据加载到DataTable的最佳方式。

我将有一个下拉菜单，每个菜单项对应一个SQL查询。我想要一个HTML按钮，用户点击该按钮，从下拉菜单中使用所选查询更新DataTable。

请指出正确的方向。

更新 - 这是我到目前为止所做的事情：

<?
//Connect to database and return $results
?>
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Run Reports</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>
        <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
        <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>

        <style>
            div.container {
                margin: auto;
                width: 80%;
            }
            div.dt-buttons{
                margin-left: 350px;
                margin-top: 10px;
            }
        </style>

    </head>
    <body>
        <div class="container">
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </tr>
            </thead>
            <?
            while ($row = mysql_fetch_array($result)) {
              echo '
              <tr>
                <td>'.$row["ID"].'</td>
                <td>'.$row["user_login"].'</td>
              </tr>
              ';
            }
            ?>

        </table>
        <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#example').DataTable( {
                dom: 'lfrtipB',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ]
            } );
        } );
        </script>
        </div>
    </body>
</html>

DataTable通过HTML按钮加载数据

0 个答案: