微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

数据表-下滑-我在做什么错? -N.B我只在学习PHP和JQuery

如何解决数据表-下滑-我在做什么错? -N.B我只在学习PHP和JQuery

我是PHP和Ajax的新手。说实话,对JQuery或Datatables并不那么了解。我正在尝试做的。单击表,然后可以从选定的行中运行另一个查询。即将参数传递给PHP,以便我可以运行查询。然后,我想将此查询的结果返回到数据表中的幻灯片中。原始表正在填充。当我单击时,功能启动。任何帮助将不胜感激。预先感谢。

    $('#giftcards tbody').on('click','tr',function () {
        var data = table.row( this ).data();
        //alert(data);
        var num = data[0];
        //alert(num);
        var tr = $(this).closest('tr');
        var row = table.row( tr );
         //alert( '1. You clicked on '+num+'\'s row' );
        //format ( d );
          $.ajax({
             type: "POST",url: 'details.PHP',data: {number: num},success: function(data){
             //alert('response from PHP ' + data);
             //$('#result').html(response);
            }
              });
            if ( row.child.isShown() ) {
            // This row is already open - close it
            $('div.slider',row.child()).slideUp( function () {
                row.child.hide();
                tr.removeClass('shown');
            } );
            }
        else {
            // Open this row
            row.child( format( data ),'no-padding' ).show();
            tr.addClass('shown');
            $('div.slider',row.child()).slideDown();
          } 
              
        });

下面的格式功能用于桌面滑块

<script>
function format ( d ) {
    // `d` is the original data object for the row
     return '<div class="slider">'+
    alert('In format func ' + d)
     '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Customer Number:</td>'+
            '<td>'+d.number+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Customer Name:</td>'+
            '<td>'+d.Name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}
 
</script>

下表样本数据-N.B.该表是使用PHP构建的查询表

 <table id="giftcards"  class="table table-striped table-bordered"  cellspacing="0" width="100%">
                  <thead>
                  
                    <tr>
                      <th>Number</th>
                      <th>Name</th>
                      <th>Address1</th>
                      <th>Address2</th>
                      <th>Address3</th>
                      <th>Postcode</th>                                    
                      <th>Email</th>                      
                    </tr>
                  </thead>         
<tbody>
                    

<tr><td>   X23456</td><td>   Anne poly</td><td>   18 The Square</td><td>   </td><td>   London</td><td>   XA12345</td><td>   </td></td></tr>
<tr><td>   X15689</td><td>   Liam Murry</td><td>   123 Salmon Court</td><td>   </td><td>   London</td><td>   XA345</td><td>   </td></td></tr>
<tr><td>   X34567</td><td>   Micky Mouse</td><td>   177 Maryland Court</td><td>   </td><td>   Eastham</td><td>   EST456</td><td>   </td></td></tr>
<tr><td>   XX0419</td><td>   Micky Most</td><td>   39 Somewhere</td><td>   </td><td>   Birmingham</td><td>   EZ67 G45</td><td>   </td></td></tr>
<tr><td>   X400257</td><td>   Ally Bally</td><td>   140 Church Stret</td><td>   Everton</td><td>   Somewhere</td><td>   EV67 0EJ</td><td>   </td></td></tr>
<tr><td>   X340287</td><td>   Mary Fox</td><td>   16  Lough view</td><td>   </td><td>Liverpool</td><td>   LV32 XTY</td><td>   </td></td></tr>
<tr><td>   X600272</td><td>   Adam Woods</td><td>   435 Georges Road</td><td>   </td><td>  Middlesborugh</td><td>   DT26 7EQ</td><td>   </td></td></tr>
<tr><td>   X834261</td><td>   Adrian MArkhams</td><td>   117  Markham Drive</td><td>   </td><td>   London</td><td>   ES27 6UJ</td><td>   </td></td></tr>
<!-- <script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script> -->

  <tfoot>
         <tr>
          <th width="20%"><span></span></th>
          <th width="20%"><span></span></th>
          <!--<th width="40%" align='right'><span>Total For Selection :   £0</span></th> --> 
          <th width="20%"><span></span></th>          
          <th width="20%"><span></span></th>
          <th width="20%"><span> Date Range Executed :2020-09-30 AND 2020-10-21           </span></th>
          <th width="20%"><span></span></th>
          
          </tr>
   </tfoot>

                  </tbody>            
                </table>

PHP接收数据

<!DOCTYPE html>
 <?PHP
 $number =!Empty($_POST['number']);
 Echo $number;
 ?>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。