Server-side processing - how to refresh the table on outside event (checkbox clicked)?

afarber

Hello,

if I have a series of checkboxes defining some additional conditions on the data (like "Male", "Female") above the server-processed DataTables table and the user makes some selections -

how do I tell the table to reload the new aaData from the server?

And is there a way to pass some parameters along?

Thank you
Alex

GregP

Hey Alex,

DataTables takes care of a lot of that kind of stuff automagically, as long as you do things a certain way.

First, initialize your DataTable using a variable to create a new DT object. A lot of the examples around here use "oTable" as a variable name in keeping with the general syntax used by the plugin itself:

[code]
var oTable = $('#myTable').dataTable({ ... });
[/code]

Now any time you want to refresh, you simply need to call fnDraw() on that object. In your case, this should happen with a click event, so something like this should work (disclaimer: untested code):

[code]
$('#myTable input[type=checkbox]').click( function() {
// do whatever else you need to do
oTable.fnDraw(); // reload the table
});
[/code]

Now, if you want to pass parameters along, in the initialization you will probably want to take advantage of fnServerParams. I haven't worked through collecting and passing your parameters, so my simplified snippets above probably aren't enough, but hopefully they give you the right idea.

afarber

Thank you! I will try this

afarber

Hello again,

I've prepared the following script - test.php:

[code]
<?php
error_log('QUERY_STRING: ' . $_SERVER['QUERY_STRING']);
?>
[/code]

and I'd like to pass few additional parameters to the table, when the input button is clicked in my index.html:

[code]



@import "/css/demo_table_jui.css";
@import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css";






$(function() {
my_table = $('#my_table').dataTable( {
bJQueryUI: true,
bServerSide: true,
bProcessing: true,
sAjaxSource: '/test.php'
} );
});

var my_table;

function redrawTable() {
var str = '';
var boxes = new Array();

//loop through all checkboxes
$(':checkbox').each(function() {
if ($(this).is(':checked')) {
boxes.push($(this).attr('name') + '=' + $(this).val());
}
});

str = '/test.php?' + boxes.join('&');
// TODO: set my_table.sAjaxSource to str
my_table.fnDraw();
}




Select fruit:
apple
banana
pear

Select candy:
toffee
fudge







Column_1
Column_2
Column_3








[/code]

Can anyone please advise me - how to set the my_table.sAjaxSource to the new string?

Thank you
Alex