将数据附加到Tbody AJAX

Question

I have a foreach statement that is adding the data from a DB to my table rows

HTML

<table id="myTable" class="display table center-table" width="100%" >
   <thead>  
          <tr>  
            <th>Product #</th>  
            <th>Alternate #</th>  
            <th>Description</th>  
            <th>On Hand</th>  
        <th>Condition</th>
          </tr>  
        </thead>  

    <tbody id="productResults"> </tbody>

</table>

PHP

$query =  $sql . " limit " . $start . "," . $perPage; 
  $data = $db_handle->runQuery($query);

  if(empty($_GET["rowcount"])) {
  $_GET["rowcount"] = $db_handle->numRows($sql);
  }
  $pages  = ceil($_GET["rowcount"]/$perPage);
    $output = '';
  if(!empty($data)) {
  $formval = '<input type="hidden" class="pagenum" value="' . $page . '" /><input type="hidden" class="total-page" value="' . $pages . '" />';
  foreach($data as $k=>$v) {
  $output .= '<tr><td>' . $formval . $data[$k]["wuno_product"] . '</td>';
  $formval = '';
  $output .= '<td>' . $data[$k]["wuno_alternates"] . '</td>';
  $output .= '<td>' . $data[$k]["wuno_description"] . '</td>';
  $output .= '<td>' . $data[$k]["wuno_onhand"] . '</td>';
  $output .= '<td>' . $data[$k]["wuno_condition"] . '</td></tr>';     
}
}
echo $output;

Then in my user view I am adding the data back to the page like this,

JQUERY

<script>

(function($) {
$(document).ready(function(){
    function getresult(url) {
    $.ajax({
          url: url,
          type: "GET",
          data:  { rowcount:$("#rowcount").val() },
          beforeSend: function(){
          $('#loader-icon').show();
        },
        complete: function(){
            $('#loader-icon').hide();
        },
        success: function(data){/* convert to dom element */
            $("#productResults").append( data.toElement() );
        },
        error: function(){}             
   });
}

    $(window).scroll(function(){
        if ($(window).scrollTop() == $(document).height() - $(window).height()){
            if($(".pagenum:last").val() <= $(".total-page").val()) {
                var pagenum = parseInt($(".pagenum:last").val()) + 1;
                getresult('<?php echo $assetPath; ?>?page='+pagenum);
            }
        }
    }); 
});
})( jQuery );

</script>

But when it shows up in my page it shows up outside of the table and does not have the html added to it. It looks like this in the page,

8855K5MS21026-B2111212M39029/5-1171313Q4559PROD CODE: 4057911RESTOCKING CHARGE11TAS8732-1C277TEST REPORTS6690H549(W) LAMP CKT99MEC-1MF1 FEET DB9M/F CABLE11T1-GMIL-L-25567E1 GAL JUG2121WL-322914VOLT T-1 BULB100100

Which was the data from the DB just all together... Why would this happen and how can I fix it? It shows up above the table instead.

Answer 1

firstly, you are attempting to add to a table, but the first portion of your generated code is a form element outside the table structure; any modern browser is going to spot the mistake and add in the assumed missing

  </table> 

which is why the response is outside a table view.