Data table should change accordingly ? MVC4

See more:

jQuery

DataTable

MVC4

Hi
Source to image : http://tinypic.com/view.php?pic=ev5ma9&s=8#.U1WAufmSxf4

FIND the image here : http://i59.tinypic.com/ev5ma9.jpg[^]

Try this image hosted with different site : http://postimg.org/image/mhdfa4fwx/2e9661ca/[^]

IMAGE CONTENT : Data table with a dropdownlist with 3 list items in my Main view (dropdownlist present on verytop just like sdom toolbar).. Onload Datatable have complete list of data which indirectly be my 1st Listitem .
when 2nd list item selected : Data-table data should change on change of selection in dropdownlist likely same for 3rd list item .

What i need is there is only one ajax source right in my code mentioned below ? so, How to pass my dropdwon selection to AJAXSOURCE ? ?


Well my jquery datatable code :

<script  type="text/javascript">

    $(document).ready(function () {

        var tab = $('#myDataTable').dataTable({
           
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": 'DataProvider',
            "bJQueryUI": true,
            "aoColumns": [
                         {
                             "sName": "ID"
                             , "bVisible" : false
                            
                         },
                         { "sName": "COMPANY_NAME",  "sClass": "hidden-xs" ,
                          "fnRender": function(oObj)
                             {  return '<a href=\"Home/Details/' + oObj.aData[0] + '\">' + oObj.aData[1] + '</a>'; 
                             }
                         },
                         { "sName": "ADDRESS" },
                         { "sName": "TOWN" }
            ]
 
        });
      

        tab.makeEditable({
            "aoColumns": [
 
                null,
                null,
                {
                indicator: 'Saving...',
                tooltip: 'Click to select town',
                loadtext: 'loading...',
                type: 'select',
                onblur: 'submit',
                loadurl: 'AjaxDataProvider1'
        });
    });


</script>

<div class="table-responsive">

<table id="myDataTable" class="table" >
                    <thead >

                         <tr>
                            <th>ID</th>
                            <th >Company name</th>
                            <th>Address</th>
                           <th>Town</th>
                        </tr>
                    
                    </thead>
                        
                    <tbody> 
                       
                   </tbody>

                </table>
    </div>

On top code you can find the ajaxsource there from it i will get data via ajax call . but when i select something in dropdown i am confused how to initially approach .. Any idea is very much Handy .

Any further queries please comment

Regards