Adding server parameters when clicking external button
Adding server parameters when clicking external button
Right next to my datatables grid, I have a custom search form. When clicking the submit button it will fireup the fnFilter for the datatable. I want to pass some additional parameters only when this submit button is clicked, any idea to get this done?
This discussion has been closed.
Replies
[code]
var oTable= $('#example').dataTable({
...
'fnServerParams': function ( aoData ) {
if ($('#testinp').val()=='1'){
aoData.push( { "name": 'test', "value": 'test' } );
//this was for a constant value
//now let's play some rock&roll ;)
$('#inputsherediv').find('input,select').each( function(i,v){
var t= v.type.toUpperCase();
if (t!='RADIO'){
aoData.push( { "name": $(v).attr('name'), "value": $(v).val() } );
} else if (v.checked) {
//radio buttons are many inputs, but only one of them is checked
aoData.push( { "name": $(v).attr('name'), "value": $(v).val() } );
}
}
);
}
$('#testinp').val('');
}
...
})
[/code]
some more js may be needed to trigger filter
[code]
function doMySearch(){
$('#testinp').val('1');
//this is to call filtering with the value from the dataTable input in it's header
oTable.fnFilter($('#example').closest('.dataTables_wrapper').find('.dataTables_filter input').val());
//or we may call it with a different value
oTable.fnFilter('test');
}
[/code]
and then in html
[code]
...
[/code]
In fact I use a simplier and more user friendly way- I put some inputs in table header(or anywhere on page) for different parameters other than just search string. Then in fnServerParams I put all input values. There's no need for an external button and your user doesn't change anything on filter external parameters by pressing a key in dataTable internal filter input(with a button you make him use two scenarios- standard filter with a string search and another with a button, that will make him wonder which on of them he uses right now.).
The scenario is easy- you just have to comment the line for checking the hidden input value and make a div that contains additional filter inputs and each parameter must have a value that represents dataTable default behaviour(select with "filter complex" and "filter simple" or something like that).
[code]
var oTable= $('#example').dataTable({
...
'fnServerParams': function ( aoData ) {
if ($('#testinp').val()=='1'){
$('#inputsheredivhidden').html('');
$('#inputsherediv').find('input,select').each( function(i,v){
var t= v.type.toUpperCase();
if (t!='RADIO'){
aoData.push( { "name": $(v).attr('name'), "value": $(v).val() } );
} else if (v.checked) {
//radio buttons are many inputs, but only one of them is checked
aoData.push( { "name": $(v).attr('name'), "value": $(v).val() } );
}
//store a copy of dom object for input in hidden div
$('#inputsheredivhidden').append(v.cloneNode());
}
);
} else {
//now let's play some rock&roll ;)
$('#inputsheredivhidden').find('input,select').each( function(i,v){
var t= v.type.toUpperCase();
if (t!='RADIO'){
aoData.push( { "name": $(v).attr('name'), "value": $(v).val() } );
} else if (v.checked) {
//radio buttons are many inputs, but only one of them is checked
aoData.push( { "name": $(v).attr('name'), "value": $(v).val() } );
}
}
);
}
$('#testinp').val('');
}
...
})
[/code]
$('submit').click(function(){
//append data to the server params
//do a fnFilter
});;
?
[code]
aoData.push( { "name": 'test', "value": 'test' } );
[/code]
in the " if ($('#testinp').val()=='1')" statement. This code actually adds a new server parameter with its name and value. So inside GET or POST you get $_GET['test'] that has a value of "test".
I think you didn't pick what I meant, I have a button called #submit, when this button is clicked I want to filter data + pass some additional data to the server. I don't want to pass these additional data when user search normally (Global search, column search). Make sense?
Have you make any progress? I'm trying to do the same thing after submitting a form. For example I need the user to select from a dropdown and input a date range then submit the form and have datatables redraw with the new data.
[code]
var oTable;
$(document).ready(function() {
$('#submitForm').click(function() {
setupTable();
getReport($(this).data("object"));
return false;
});
function setupTable() {
if (oTable != null) {
$('#mydt').empty();
oTable.fnDestroy();
}
}
function getReport(objDef) {
var settings = {
"bJQueryUI": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"sDom": '<"H"T<"clear">iplfr>t<"F"ip>',
"aLengthMenu": [[10, 20, 30, 50, -1], [10, 20, 30, 50, "All"]],
"sSearch": '',
"oLanguage": {
"sLengthMenu": "Page length: _MENU_",
"sSearch": "Filter:",
"sZeroRecords": "No matching records found"
},
"bProcessing": true,
"bServerSide": true,
"aaSorting": [[ 3, "desc" ]],
"sAjaxSource": 'ajax/list-rmas.asp',
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": "ajax/list-rmas.asp",
"data": $('#form1').serializeArray(),
"success": fnCallback
});
},
"aoColumnDefs": [
{ "aTargets": [0],
"fnRender": edit_link,
"bVisible": true,
"bSearchable": false,
"bSortable": false,
"bUseRendered": false,
"bAutoWidth": false,
"sClass": 'alignCenter',
"sWidth": '24px'
},
{ "aTargets": [1],
"fnRender": print_link,
"bVisible": true,
"bSearchable": false,
"bSortable": false,
"bUseRendered": false,
"sClass": 'alignCenter',
"sWidth": '24px'
},
{ "aTargets": [2],
"bSearchable": false,
"fnRender": billed_icon,
"sClass": 'alignCenter',
"sWidth": '24px'
},
{ "aTargets": [3], "bSearchable": true, "sClass": 'alignCenter'},
{ "aTargets": [4], "bSearchable": true, "sType": 'date', "sClass": 'alignRight'},
{ "aTargets": [5], "bSearchable": true, "sClass": 'alignCenter'},
{ "aTargets": [6], "bSearchable": true},
{ "aTargets": [7], "bSearchable": false, "sClass": 'alignCenter', "sWidth": '40px'}
],
"oTableTools": {
"sSwfPath": "/css/dtimages/swf/copy_cvs_xls_pdf.swf",
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
}
}
oTable = $("#mydt").dataTable(settings);
new FixedHeader( oTable );
}
} );
[/code]
You can samplify it by removing the 'each' statements (I use them because this JS is loaded for all my dataTables, and I have more than one table in a single page) and the switch statement (I use it for other options, to control them via element attributes instead of javascript).
HTML:
[code]
....
Filter
[/code]
You can add as many filters as you want, even select, radios, etc.
Javascript:
[code]
function filter_table(table_id) {
$table = $('#' + table_id).dataTable();
$table.fnDraw();
}
$(document).ready(function() {
$(".table-objects-list").each(function(){
var additional_filters = [];
$table = $(this);
$("*[data-table='" + $table.attr('id') + "']").each(function(){
var element = $(this);
switch ($(this).attr('data-property')) {
case "additional-filter": {
additional_filters.push({
'name': element.attr('data-key'),
'get_value': function(){
return value = $("#" + element.attr('id')).val();
},
});
break;
}
}
});
var options = { /* your options here */ }
if (additional_filters.length > 0) {
options["fnServerParams"] = function (aoData) {
for (var i=0; i 'example!!' to the request.
The custom key-value tuples are passed also when you use the normal 'global' filter.