Unsual behaviour of sSearch in datatable on dropdown change event ? Critical issue

sunildon

Hi

I had a need to update my datatable based on dropdownlist selection . So i written like below :

Dropdownlist :

[code]

All Leads
My Open Leads
Dead Leads

[/code]

[code]

$(document).ready(function () {

$('#DropDown_Select').change(function () {
oTable.fnFilter($(this).val()); // This is casuing error i guess strongly any workaround ?
});



var oTable= $('#myDataTable').dataTable({
"bProcessing": true,
"bServerSide": true,
"bFilter": true,
"bAutoWidth": true,
"sAjaxSource": "AjaxHandler" ,

"fnServerData": function (sSource, aoData, fnCallback) {
debugger;
sSource = sSource + "/" + $('#DropDown_Select').val();
$.getJSON(sSource, aoData, function (json)
{
fnCallback(json)
});
},

"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sName": "Lead_Id" },
{ "sName": "LeadName" },
{ "sName": "ContactName" },
{ "sName": "CompanyName" },
{ "sName": "Product" },

]

});


});
[/code]

On my initail load i get datatable with my All_Leads . but later when i change the dropdown selection i get no data intrestingly and the dropdown selected value will be sitting in search box in datatable ? i am confused with this unusual behaviour ?

fnServerData is a issue i guess but not sure .

My controller will be like :
[code]
public ActionResult AjaxHandler(JQueryDataTableParamModel param, string id)
{

//Here i will filter and pass data based on id which is dropdown selection . .

return json (/////)
}
[/code]


On my change in selection in dropdown i checked param in that sSearch : My_Open_Leads .. i donno why this is happening any work around is appreciated .

TEST CASE LINK : incase needed just given code as my work is mostly server side i donno how to attach it : http://live.datatables.net/lukozoz/1/edit
Regards

allan

What is the error you are getting? I presume a Javascript error from your post, but I'm not sure what.

Allan

sunildon

I am getting no error . please give a closer look at the drop-down click code which is main culprit here .

because of that when i am selecting something from dropdown the values is directly sitting on sSearch which indirectly effecting my filter logic at controller side . would you please look at fnserverdata & dropdownlist . . .

When ever the value in dropdownlist changes simply its coming and sitting on top my sSearch .

Image like provided to show my issue :
http://s3.postimg.org/vckgu6c6r/mvc4.jpg
(or)
http://postimg.org/image/poe63a7u7/

Regards & thank you for your time

sunildon

Hi allan

Done some research and found something may help you to find my excat issue ,
I am using
[code] oTable.fnFilter($(this).val()); [/code] . The functionality states its by default a filter . The table is getting filtered base on dropdown list selected values thats the reason i am getting my selected value in search box as mentioned in figure . But i am expecting something different .

I want to reload entire table based on dropdownlist selection and then user can search on top of it . I am trying to pass the dropdown selected value to controller and write logic there to send rows to my Datatable . HOW TO PASS my selection

[code] sSource = sSource + "/" + $('#DropDown_Select').val(); [/code]

i am trying like above and making controller parameterized

public ActionResult AjaxHandler(JQueryDataTableParamModel param,string id)
{

}

Look for some insights from you

regards

sunildon

Mate i done some stupid coding to achieve the excat functinality : loading DataTABLE dynamically upon dropdown change .


[code]

$(document).ready(function () {
var reason=3;
var userdata;
var oTable;



oTable = $('#myDataTable').dataTable({

"bProcessing": true,
"bServerSide": true,
"bAutoWidth": true,
"sAjaxSource": "AjaxHandler",


"fnServerData": function (sSource, aoData, fnCallback) {
debugger;
$('#DropDown_Select').change(function () {
alert($(this).val());
reason = $(this).val()


$.ajax({ //i am using 2 ajax same calls lot of redundancy
"type": "GET",
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"url": sSource+"/"+reason, //attaching my dropdow selected value and passing to controller ?
"data": aoData,
"success": function (data) {
debugger;
fnCallback(data);
}
});


});
$.ajax({
"type": "GET",
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"url": sSource +"/"+reason, //attaching my dropdow selection here passing static on initial load
"data": aoData,
"success": function (data) {
debugger;
fnCallback(data);
}
});
},

"bJQueryUI": true,
"sPaginationType": "full_numbers" ,
"aoColumns": [
{
"sName": "Lead_Id"

},
{
"sName": "LeadName"
},
{ "sName": "ContactName" },
{ "sName": "CompanyName" },
{ "sName": "LeadStatus" }

]

});

});

[/code]

dropdownlist code :
[code]

All Leads
My Open Leads
Dead Leads

[/code]

Controller code :
[code]
public ActionResult AjaxHandler(JQueryDataTableParamModel param, string id)
{
int sid = Convert.ToInt32(id);
var Lead_FullDetails = entityobj.Leads.ToList();

if (sid == 0)
{
Lead_FullDetails = entityobj.Leads.Where(c => c.LeadStatus == sid).ToList();
}
else if (sid == 1)
{
Lead_FullDetails = entityobj.Leads.Where(c => c.LeadStatus == sid).ToList();
}
else {
Lead_FullDetails = entityobj.Leads.ToList();
}
//next to this i return the lead_fullDetails as json to fncallback

[/code]

I am hoping there will be a brillent option so i can minimise all the extra stuff i am doing now

Regards