Struggling with fnServerParams
Struggling with fnServerParams
Hey all,
Using the great example provided to allow me to select multiple row items I want to first refine the list. Basically all I want to do is to send the data [code]{ 'builder_id' : }[/code] where N is the based off of a .change() event. I can't seem to get this last bit working. I don't desire to do bServerSide=True and the examples only show it enabled (I'm not sure if that is required or not).
Can someone please help me with this basic select to redraw the table based on a change of a select?
Thanks
[code]
var oTable;
var gaiSelected = [];
$(document).ready(function() {
/* Init the table */
oTable = $("#example").dataTable({
"bProcessing": true,
// "bServerSide": true,
"sAjaxSource": "{% url incentive_distribution_homes_ajax_list %}",
"fnServerParams": function ( aoData ) {
$('#id_customer').change(function () {
aoData.push( {'builder_id': $(this).val() } );
oTable.fnDraw();
});
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
{
$(nRow).addClass('row_selected');
}
return nRow;
},
"aoColumns": [
{ "bVisible": 0 }, /* ID column */
null,
null,
null,
null,
null
]
});
/* Click event handler */
$('#example tbody tr').live('click', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];
if ( jQuery.inArray(iId, gaiSelected) == -1 ) {
gaiSelected[gaiSelected.length++] = iId;
} else {
gaiSelected = jQuery.grep(gaiSelected, function(value) {
return value != iId;
} );
}
$('select[name=homes]').val(gaiSelected)
$(this).toggleClass('row_selected');
} );
});
[/code]
Using the great example provided to allow me to select multiple row items I want to first refine the list. Basically all I want to do is to send the data [code]{ 'builder_id' : }[/code] where N is the based off of a .change() event. I can't seem to get this last bit working. I don't desire to do bServerSide=True and the examples only show it enabled (I'm not sure if that is required or not).
Can someone please help me with this basic select to redraw the table based on a change of a select?
Thanks
[code]
var oTable;
var gaiSelected = [];
$(document).ready(function() {
/* Init the table */
oTable = $("#example").dataTable({
"bProcessing": true,
// "bServerSide": true,
"sAjaxSource": "{% url incentive_distribution_homes_ajax_list %}",
"fnServerParams": function ( aoData ) {
$('#id_customer').change(function () {
aoData.push( {'builder_id': $(this).val() } );
oTable.fnDraw();
});
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
{
$(nRow).addClass('row_selected');
}
return nRow;
},
"aoColumns": [
{ "bVisible": 0 }, /* ID column */
null,
null,
null,
null,
null
]
});
/* Click event handler */
$('#example tbody tr').live('click', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];
if ( jQuery.inArray(iId, gaiSelected) == -1 ) {
gaiSelected[gaiSelected.length++] = iId;
} else {
gaiSelected = jQuery.grep(gaiSelected, function(value) {
return value != iId;
} );
}
$('select[name=homes]').val(gaiSelected)
$(this).toggleClass('row_selected');
} );
});
[/code]
This discussion has been closed.
Replies
[code]
"fnServerParams": function ( aoData ) {
aoData.push( {'builder_id': $('#id_customer').val() } );
},
[/code]
And then put your change listener just after your table initialisation.
Since you are using client-side processing, if you want to get new data from the server you will need to use the fnReloadAjax API plug-in.
Allan