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

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

sunildonsunildon Posts: 40Questions: 7Answers: 0
edited April 2014 in DataTables
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

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    What is the error you are getting? I presume a Javascript error from your post, but I'm not sure what.

    Allan
  • sunildonsunildon Posts: 40Questions: 7Answers: 0
    edited April 2014
    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
  • sunildonsunildon Posts: 40Questions: 7Answers: 0
    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
  • sunildonsunildon Posts: 40Questions: 7Answers: 0
    edited April 2014
    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
This discussion has been closed.