Unsual behaviour of sSearch in datatable on dropdown change event ? Critical issue
Unsual behaviour of sSearch in datatable on dropdown change event ? Critical issue
sunildon
Posts: 40Questions: 7Answers: 0
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
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
This discussion has been closed.
Replies
Allan
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
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
[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