加载更多按钮一次

时间:2018-10-12 14:29:35

标签: php jquery ajax

我有一个名为tbl_video的表,该表包含两个字段(video_id,video_title),我想使用像社交网站这样的Ajax JQuery添加更多加载按钮。我能够获得前两个记录,但是当我第二次尝试时什么也没发生。我没有任何错误。我在做什么错了。

我的index.php文件在这里创建表结构,然后获取两条记录。并获取第二条记录的ID值并将其发送到more.php文件

  <body>  

                    <table class="table table-bordered" id="load_data_table"> 

                    <thead>
                    <tr>
                    <td width="15%">Video Id</td>
                    <td>Video Title</td>
                    </tr>
                    </thead>
                    <?php

                    while ($row = mysqli_fetch_array($result)) {
                        $video_id = $row['video_id']; ?>
                             <tr>
                             <td><?php echo $row['video_id']; ?></td>
                             <td><?php echo $row['video_title']; ?></td>

                             </tr>
                        <?php
                    }

                    ?> 
                    <tr id="remove_row"><td><button type="button" id="more" class="btn btn-success form-control"
                     data-id="<?php echo $video_id; ?>">More</button></td></tr>

                    </table>  
               </div>  
          </div>  
     </body>  
</html>  
 <script>  
 $(document).ready(function(){  
     $('#more').click(function(){
 var id=$(this).data("id");


        $.ajax({
            url:"more.php",
            data:{id:id},
            method:"post",
            success:function(data){

              if(data!=''){

               $('#load_data_table').append(data);
               $('#remove_row').remove();


              }
              else{
                $('#more').html("No Data");
              }
            }

还有more.php文件。我认为这是不言而喻的

$id = $_POST['id'];
$output = '';
$db = mysqli_connect('localhost', 'root', '', 'testing');
$data = mysqli_query($db, "select * from tbl_video where video_id >{$id} limit 2");
if (mysqli_num_rows($data)) {
    while ($row = mysqli_fetch_array($data)) {
        $output .= '

         <tbody>
         <tr>
          <td>'.$row['video_id'].'</td>
          <td>'.$row['video_title'].'</td>
         </tr>

         ';
    }
    $output .= '
  <tr id="remove_row"><td><button type="button" id="more" class="btn btn-success form-control"
  data-id="'.$row['video_id'].'">More</button></td></tr></tbody>

  ';
    echo $output;
}

将寻求任何帮助。

1 个答案:

答案 0 :(得分:0)

添加新行时,有一个用于“更多”的新按钮

它与原始按钮具有相同的ID,因此那里存在冲突

还需要对javascript进行初始化

PHP:

import matplotlib.pyplot as plt
import pandas as pd
import readTrc
from scipy import signal

datX, datY, m = readTrc.readTrc('C220180104_ch2_UHF00000.trc')
#100mil data points
srx, sry = pd.Series(datX * 1000), pd.Series(datY * 1000)
df = pd.concat([srx, sry], axis = 1)
df.set_index(0, inplace = True)

b, a = signal.butter(15, 0.1)
y = signal.filtfilt(b,a, df[1].values)
df2 = pd.DataFrame(y, index=df.index)

#Plot Impulse
if max(datX) < 0.01:
    df2.plot(grid = 1,
            linewidth = 0.5,
            figsize = (9,5),
            legend = False,
            xlim = (df.index[0], df.index[-1]))
else:
    df2.plot(grid = 1,
            linewidth = 1,
            figsize = (9,5),
            legend = False,
            xlim = (df.index[0], df.index[-1]))

plt.xlabel('Zeit in ms')
plt.ylabel('UHF-Signal in mV')

##plt.savefig('UHF_plot.png', dpi = 600)
plt.show()

print('done')

Javascript:

   $output .= '<tr id="remove_row"><td><button type="button"  class="more btn btn-success form-control" data-id="'.$row['video_id'].'">More</button></td></tr></tbody>';

别忘了将.more的按钮的ID删除为带有.more的类。