Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82115

Not able to load ajax json data into DataTables

$
0
0
I am new to DataTables and not quite an expert in javascript/jquery either.

My table is populated with the original php/html file and it works fine with DataTables (DT for short). So, we are not talking here about initialization of DT, or so I believe.

Now,once the table is visible to the user I need to give him/her the possibility to apply filters to the table. Note that the filter parameters are NOT within the table data, so it is not the case of using the sorting/filtering tools from DT. The filtering with ajax/php was working fine prior to the use of DT, but after implementing DT I do not manage to repopulate it with the new data coming from the Ajax call.
I did manage to empty the table using fnClearTable(), so all I get now once I apply any filter is an empty table.
Here is myTable as from the original php file:

			<table id="myTable" class="display">
<thead> 
<tr> 
    <th>data1</th>
    <th>data2</th>
    <th>data3</th> 
    <th>data4</th> 
    <th>data5</th>
    <th>Compare</th>
</tr> 
</thead>
<tbody>
<?php
$sql = mysql_query ("SELECT * FROM vprice_range ORDER BY price");
    
while($r= mysql_fetch_assoc($sql)){
?>
	<tr>
		
		<td><?php echo $r["data1"] ; ?></td>
		<td><?php echo $r["data2"] ; ?></td>
                <td><?php echo $r["data3"] ; ?></td>
                <td><?php echo $r["data4"] ; ?></td>
                <td><?php echo $r["data5"] ; ?></td>
        <td>Select: <input type="checkbox" name="vid[]" value= "<?php echo $r["version_id"] ;?>" onclick="chkChecks('vid[]')" />
                </td>
	</tr>
<?php
}
unset ($sql);
unset ($r);
?>
</tbody>
</table>

Here is my JQuery/Ajax so far:

 
$(document).ready(function(){	
$("#filter").change(function()
{
      var str = $("#filter").serialize();
      var oTable = $('#myTable').dataTable();
   // Immediately 'nuke' the current rows (perhaps waiting for an Ajax callback...)
        oTable.fnClearTable();
     $.ajax({
            url: "filter_prange.php",
            type: "POST",
	    dataType:"json",
           data: str,
           success: function fnClickAddRow(data) {
  $('#myTable tbody').dataTable().fnAddData(data);
     }
  });    
  });
  });

This is the filter_prange.php file.
$connect = mysql_connect("localhost", "root", "root");
mysql_select_db("mydb");
$trimids = array();
$trimids = $_REQUEST['hook'];
$qty = count($trimids);
$trimids = implode(",", $trimids);


    if($qty == 0){
    $sql = mysql_query ("SELECT * FROM vprice_range ORDER BY price");
    }
    else {
    mysql_query("CREATE OR REPLACE VIEW vrange AS (
SELECT ................)
    $sql = mysql_query ("SELECT * FROM vrange ORDER BY price");
    }
while($r= mysql_fetch_assoc($sql)){
	echo '<tr>';
		echo '<td>' . $r["data1"] . '</td>' ;
		echo '<td>' . $r["data2"] . '</td>' ;
                echo '<td>' . $r["data3"] . '</td>' ;
                echo '<td>' . $r["data4"] . '</td>' ;
                echo '<td>' . $r["data5"] . '</td>' ;
                echo '<td>' . 'Select:' . '<input type="checkbox" name="vid[]" value=' . $r["version_id"]  . 'onclick="chkChecks("vid[]")" ' . '/>' . '</td>' ;
	echo '</tr>' ;
}
unset ($sql);
unset ($row);
mysql_query("DROP VIEW vrange");

And this is an example of the JSON I am getting back from the filter_prange.php file ( as verified by Firebug).
<tr><td>data1</td><td>data2</td><td>data3</td><td>data4</td><td>data5</td><td>Select:<input type="checkbox" name="vid[]" value=259onclick="chkChecks("vid[]")" /></td></tr><tr><td>data1</td><td>data2</td><td>data3</td><td>data4</td><td>data5</td><td>Select:<input type="checkbox" name="vid[]" value=9onclick="chkChecks("vid[]")" /></td></tr> etc....

As you can see in my jQuery I am trying to used fnAddData(), but it is not clear to me if that's the right plug in nor which parameters, if any, I should provide.
Thanks for any assistance.

Viewing all articles
Browse latest Browse all 82115

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>