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:
Here is my JQuery/Ajax so far:
This is the filter_prange.php file.
And this is an example of the JSON I am getting back from the filter_prange.php file ( as verified by Firebug).
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.
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.