是否可以使用jQuery的datatables.js插件再通过PHP过滤器按钮从表中导出数据?

问题描述

我创建了一个销售表格,其中选择了产品的销售日期和地点:

enter image description here

enter image description here

点击“ Szukaj”按钮后,即表示“搜索”或“过滤器”

enter image description here

使用PHP和MSQL查询提取数据库中的数据。显示销售结果之后

enter image description here

我想使用jQuery DATATABLES插件将数据导出到EXCEL,PDF等。问题是它不起作用,仅复制和导出第一行

enter image description here

为什么?这是admin.PHP文件,其中在其中显示销售的位置,并在底部运行一个运行数据表的脚本:

<?PHP

session_start();

if (!isset($_SESSION['zalogowany']))
{
    header('Location: index.PHP');
    exit();
}

$connect = new PDO("MysqL:host=localhost;dbname=bukowski2","root","");

function fill_unit_select_Box2($connect)
{ 
 $output = '';
 $query = "SELECT * FROM users WHERE user_id!=7";
 $statement = $connect->prepare($query);
 $statement->execute();
 $result = $statement->fetchAll();
 foreach($result as $row)
 {
  $output .= '<option  value="'.$row["user"].'">'.$row["user"].'</option>';
 }
 
 return $output;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
        <Meta charset="UTF-8">
        <script src="jquery-3.5.1.min.js" a></script>
        <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
        <script src="js2.js" async></script>
        <link rel="stylesheet" href="bootstrap.min.css" />
        <script src="jquery-ui.js" defer></script>
        <link rel="stylesheet" href="style2.css">
        <link rel="stylesheet" href="jquery-ui.css"/> 
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
        <script src="buttons\datatables.min.js" defer></script>
        <script src="buttons\dataTables.buttons.min.js" defer></script>
        <script src="buttons\buttons.flash.min.js" defer></script>
        <script src="buttons\jszip.min.js" defer></script>
        <script src="buttons\pdfmake.min.js" defer></script>
        <script src="buttons\buttons.print.min.js" defer></script>
        <script src="buttons\buttons.html5.min.js" defer></script>
        <script src="buttons\vfs_fonts.js" defer></script>
        <script src="buttons\js.js" defer></script>
</head>
<body>
<?PHP
$_SESSION['sales_date']=date('Y-m-d');
echo '<p class="logged">Zalogowany: '.$_SESSION['user'].' | '.$_SESSION['sales_date'].' |  [ <a href="logout.PHP">Wyloguj się</a> ]</p>';
?>
<div class="wrapper">
    <div class="tabs">
        <ul>
            <li class="active">
                <span class="text">TABELA</span>
            </li>
            <li>
                <span class="text">DODAJ/USUŃ</span>
            </li>
            <li>
                <span class="text">3</span>
            </li>
            <li>
                <span class="text">4</span>
            </li>
        </ul>
    </div>

    <div class="content">
        <div class="tab_wrap" style="display: block;">
            <div class="title"></div>
            <div class="tab_content">
               <div class="container" style="width:100%;">    
                    <h3 align="center">Wyszukiwanie danych sprzedaży</h3><br /> <br /> <br />  
                    <div class="col-md-3" style="float:left;">  
                         <input type="text" name="date" id="date" class="form-control" placeholder="Wybierz datę" />  
                    </div>
                    <div class="col-md-3" style="float:left;">  
                         <select required name="item_from" id="item_from" class="form-control item_from"><option value="">
                         <?PHP echo fill_unit_select_Box2($connect); ?>
                         </option></select>  
                    </div>                      
                    <div class="col-md-5" style="float:left;">  
                         <input type="button" name="filter" id="filter" value="Szukaj" class="btn btn-info" />  
                    </div>  
                    <div style="clear:both"></div>                 
                    <br />  
                    <div id="order_table">  
                         <table class="table table-bordered" id="example">  
                            <thead>
                                <tr>  
                                   <th width="30%">Nazwa i kolor produktu</th>  
                                   <th width="10%" style="text-align:center">Rozmiar</th>  
                                   <th width="10%" style="text-align:center">Cena PLN</th>  
                                   <th width="10%" style="text-align:center">KARTA PLN</th>  
                                   <th width="10%" style="text-align:center">Inna waluta1</th>  
                                   <th width="10%" style="text-align:center">Inna waluta2</th>  
                                   <th width="10%" style="text-align:center">Od</th>  
                                </tr> 
                            </thead>
                            <tbody>
                            </tbody>    
                            <tfoot>
                                <tr>  
                                   <th width="30%">Nazwa i kolor produktu</th>  
                                   <th width="10%" style="text-align:center">Rozmiar</th>  
                                   <th width="10%" style="text-align:center">Cena PLN</th>  
                                   <th width="10%" style="text-align:center">KARTA PLN</th>  
                                   <th width="10%" style="text-align:center">Inna waluta1</th>  
                                   <th width="10%" style="text-align:center">Inna waluta2</th>  
                                   <th width="10%" style="text-align:center">Od</th>  
                                </tr> 
                            </tfoot>
                         </table>  
                    </div>          
               </div>  
            </div>
        </div>
        <div class="tab_wrap" style="display: none;">
            <div class="title"></div>
            <div class="tab_content">
                <p>CONTENT 2</p>
            </div>
        </div>
        <div class="tab_wrap" style="display: none;">
            <div class="title"></div>
            <div class="tab_content">
                <p>CONTENT 3</p>
            </div>
        </div>
        <div class="tab_wrap" style="display: none;">
            <div class="title"></div>
            <div class="tab_content">
                <p>CONTENT 4</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>  
      $(document).ready(function(){  
           $.datepicker.setDefaults({  
                dateFormat: 'yy-mm-dd'   
           });  
           $(function(){  
                $("#date").datepicker();  
           });  
           $('#filter').click(function(){  
                var date = $('#date').val();  
                var item_from=$('#item_from').val();
                if(date != '')  
                {  
                     $.ajax({  
                          url:"filter.PHP",method:"POST",data:{date:date,item_from:item_from},success:function(data)  
                          {  
                               $('#order_table').html(data);  
                          }  
                     });  
                }  
                else  
                {  
                     alert("Please Select Date");  
                }  
           });  
      });  
 </script>

和下面是filter.PHP文件,该文件使用PHP和MySQL查询数据库提取数据,我想使用DATATABLE插件按钮将其导出:

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <script src="jquery-3.5.1.min.js" a></script>
    <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
    <script src="js2.js" async></script>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script src="jquery-ui.js" defer></script>
    <link rel="stylesheet" href="style2.css">
    <link rel="stylesheet" href="jquery-ui.css"/> 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
    <script src="buttons\datatables.min.js" defer></script>
    <script src="buttons\dataTables.buttons.min.js" defer></script>
    <script src="buttons\buttons.flash.min.js" defer></script>
    <script src="buttons\jszip.min.js" defer></script>
    <script src="buttons\pdfmake.min.js" defer></script>
    <script src="buttons\buttons.print.min.js" defer></script>
    <script src="buttons\buttons.html5.min.js" defer></script>
    <script src="buttons\vfs_fonts.js" defer></script>
    <script src="buttons\js.js" defer></script>
</head>
<body>
<?PHP  
 //filter.PHP  
    if(isset($_POST["date"]))   {  
        

        //ustanawiamy połącznie z bazą danych
        $connect = MysqLi_connect("localhost","","bukowski2");
        
    if($_POST["item_from"]==""){
$query = "SELECT item_name.item_name,sizes.sizes,sales_table.total_pln,sales_table.total_cart_payment,sales_table.total_oc1,currencies.currency,users.user FROM item_name,sales_table,sizes,currencies,users WHERE sizes.size_id=sales_table.size_id AND item_name.id=sales_table.item_name_color AND currencies.id=sales_table.total_oc2 AND users.user_id=sales_table.user_id AND sales_date='".$_POST["date"]."' ORDER BY sales_id"; 
    }else{
    $query0="SELECT user_id FROM users WHERE user='".$_POST["item_from"]."'";
        $result = MysqLi_query($connect,$query0);
        while($row = MysqLi_fetch_assoc($result))
            {
                $e= $row['user_id']."<br>";
            }
        $user_id = (int)$e;
    
$query = "SELECT item_name.item_name,users WHERE sizes.size_id=sales_table.size_id AND item_name.id=sales_table.item_name_color AND currencies.id=sales_table.total_oc2 AND users.user_id=sales_table.user_id AND sales_date='".$_POST["date"]."' AND sales_table.user_id=".$user_id." ORDER BY sales_id";
    }
        $output='';  
        $result = MysqLi_query($connect,$query);  
        $output .= '  
           <table class="table table-bordered" id="example">  
                <thead>
                    <tr>  
                       <th width="30%">Nazwa i kolor produktu</th>  
                       <th width="10%" style="text-align: center">Rozmiar</th>  
                       <th width="10%" style="text-align: center">Cena PLN</th>  
                       <th width="10%" style="text-align: center">KARTA PLN</th>
                       <th width="10%" style="text-align: center">Inna waluta1</th>
                       <th width="10%" style="text-align: center">Inna waluta2</th>
                       <th width="10%" style="text-align: center">Od</th> 
                    </tr>
                </thead>
        ';  
        if(MysqLi_num_rows($result) > 0)  
        {  
           while($row = MysqLi_fetch_array($result))  
           {  
                $output .= '  
                     <tbody>
                         <tr>  
                              <td>'. $row["item_name"] .'</td>  
                              <td style="text-align: center">'. $row["sizes"] .'</td>  
                              <td style="text-align: center">'. $row["total_pln"] .'</td>  
                              <td style="text-align: center">'. $row["total_cart_payment"] .'</td>  
                              <td style="text-align: center">'. $row["total_oc1"] .'</td>  
                              <td style="text-align: center">'. $row["currency"] .'</td>                          
                              <td style="text-align: center">'. $row["user"] .'</td>                          
                         </tr> 
                    </tbody> 
                ';  
           }  
        }  
        else  
        {  
           $output .= '  
                <tr>  
                     <td colspan="5">Brak danych</td>  
                </tr>  
           ';  
        }  
        $output .= '</table>';  
        echo $output;
        //zamykamy połączenie z bazą danych 
        MysqLi_close($connect);
    } 
 ?>
</body>

buttons \ js.js脚本文件中包含用于初始化表的js代码。这是代码

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',buttons: [
            'copy','csv','excel','pdf','print'
        ]
    } );
} );

解决方法

好的,我解决了。从打印结果的循环中删除标记就足够了,因为每次插入一行数据时都会插入标记。已关闭

enter image description here