externally call .getJSON, using an advanced "search" form
externally call .getJSON, using an advanced "search" form
mainstreetmark
Posts: 9Questions: 0Answers: 0
I've been unable to wrap my head around the sever side thing entirely, since it's been a pretty long day so far, and this beer isn't helping matters.
I have a datatable, using server-side updating, which works splendidly.
I've added a form on top of the table where the user should be able to enter in a series of search criteria, and I wish datatables to do an update based on the new data. Essentially, I want to push or replace some variables in the aoData with the new value.
Specifically, I have a jquery-ui slider, and I want to send the min and max values of the slider to the server, and have it send back (to the datatable) a bunch of records within the min and max values. I got the slider working, and am console.log()ing the values when they change, so all I need to do is call the server with these values, have it update the record set, and send it back down to the datatable.
So, do I create my own $.getJSON somehow? I can't make it work. Do I alter $datatable.fnServerData with a whole new function, essentially duplicating everything it has on startup? I can't even work out how the search field is even working.
Confused?!
I have a datatable, using server-side updating, which works splendidly.
I've added a form on top of the table where the user should be able to enter in a series of search criteria, and I wish datatables to do an update based on the new data. Essentially, I want to push or replace some variables in the aoData with the new value.
Specifically, I have a jquery-ui slider, and I want to send the min and max values of the slider to the server, and have it send back (to the datatable) a bunch of records within the min and max values. I got the slider working, and am console.log()ing the values when they change, so all I need to do is call the server with these values, have it update the record set, and send it back down to the datatable.
So, do I create my own $.getJSON somehow? I can't make it work. Do I alter $datatable.fnServerData with a whole new function, essentially duplicating everything it has on startup? I can't even work out how the search field is even working.
Confused?!
This discussion has been closed.
Replies
So I get this right - you want to send the values from the slider to the server-side processing script, so it can limit the return based on those values? Did you see the example for how to add custom variables to the data sent to the server: http://datatables.net/examples/server_side/custom_vars.html ? This would allow your to get your slider values and just slot them in as required.
Does that help?
Allan
that aoData, which I use, now needs to be modified AFTER .dataTable() has initialized. In this case, it's a list of real estate properties, with a min/max slider. When the page initially loads, all props are displayed, and the user can slide a slider to define the price range.
http://docs.jquery.com/UI/Slider Here's the slider i'm using, and i'm logging when the values change, and I'm refreshing the dataTable, i just can't seem to work out how to refresh it with the NEW variables. aoData doesn't seem to work after initialization.
So when the values of the slider change, you want to clear out the data that DataTables currently has stored, and load in new stuff, is this correct? I'm slightly confused as to what the problem is I'm afraid :-). You've got the information you need being sent to the sever (which is read form the DOM and therefore should be current), and you are redrawing the table - so (and I'm probably being blind), where is the hiccup coming in?
Regards,
Allan
1. Slide the slider to '5' for example. <-- done
2. Call the server with the same url, but a new searchterm, "value=5" <-- don't know how. This is the question.
3. Update the table with the results of the server call <-- probably, fnDraw()??
4. Profit.
[code]
stop: function (event, ui) {
console.log($("#slider").slider('option','values'));
propertiesforsale_dt.fnDraw();
}
[/code]
Have a look at the custom variables example I pointed out before: http://datatables.net/examples/server_side/custom_vars.html - this will let you send value=5 (and any other variables you want) to the server to modify your SQL queries with.
Regards,
Allan
I'm new to Jquery/Javascript so I am trying to wrap my brain around the example you provided. Let's say you do send the extra information using fnServerData and aoData.push, etc, as you described. I understand what is happening, but how would you map the value in { "name": "my_field", "value": "my_value" } to the option value in a particular dropdown box as opposed to having it hardcoded ? (example below)
[code]
-- SELECT --
1
2
3
[/code]
Any help would be appreciated. Thank you!
[code]
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
var testVal = $("#test").val();
aoData.push( { "name": "t", "value": testVal } );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json);
} );
}
});
[/code]
I had two quick questions : How did you get the application to call your server data on change of the dropdown and secondly I don't see you passing the url location of the servlet in the method. How does that happen.
[code]
$("#dropdown").change(function() {
oTable.fnClearTable(0);
$.getJSON("server/methodName", { comboId: $('#comboName').val() }, function(data) {
$.each(data, function(i,rowData){
oTable.fnAddData( [rowData.Name,rowData.Dsc] );
}
}
[/code]
Have two more questions and I am sorry to use a existing thread.... I lost all the row style that I am using when I used addData is there a way to add style to a row and secondly my first column is a link. How do I make it a link using addData