cant reload datatable from new source, used both fnreloadajax and ajax.url().load

haider512

I have select2 dropdown selector, which when i select executes the reload function..

Problem is when reload function is called it only reloads the datatable using original url source. i did defined the new source and gave it in parameter, but still it only reloads the datatable but not from new source.

Here is the code what i have tried so far.

            var GroupID = e.val;
            url = "{{base_url()}}admin/usersManagePermissions/listFormsInGroups_DT/"+GroupID;
            $('#ManageFormsInGroups').dataTable().api().ajax.url(url).load();
            oTable.fnReloadAjax(url);

both fnReloadAjax and ajax.url().load() works fine to reload the table, but they only reload from the original url path that is defined to them??

Here is my datatable.

function commonDataTables(selector,url,aoColumns,RowCallBack,DrawCallBack){
    var responsiveHelper;
    var breakpointDefinition = {
        tablet: 1024,
        phone : 480
    };
      oTable = selector.dataTable({
        sPaginationType: 'bootstrap',
        oLanguage      : {
            sLengthMenu: '_MENU_ records per page'
        },
        "autoWidth" : false,
        "aoColumns":aoColumns,
        "bServerSide":true,
        "bProcessing":true,
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sAjaxSource": url,
        "iDisplayLength": 25,
        "aLengthMenu": [[2, 25, 50, -1], [2, 25, 50, "All"]],
        'fnServerData'   : function(sSource, aoData, fnCallback){
            $.ajax({
                'dataType': 'json',
                'type': 'POST',
                'url': url,
                'data': aoData,
                'success': fnCallback
            }); //end of ajax
        },
        'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            $(nRow).attr("data-id",aData[0]);
            if(typeof RowCallBack !== "undefined"){
            eval(RowCallBack);
            }
            responsiveHelper.createExpandIcon(nRow);

            return nRow;
        },
        fnPreDrawCallback: function () {
            // Initialize the responsive datatables helper once.
            if (!responsiveHelper) {
                responsiveHelper = new ResponsiveDatatablesHelper(selector, breakpointDefinition);
            }
        },
        fnDrawCallback : function (oSettings) {
            // Respond to windows resize.
            responsiveHelper.respond();
            if(typeof DrawCallBack !== "undefined"){
                eval(DrawCallBack);
            }
        }
    });
}

            //Data Tables Script Here.
            var selector = $('#ManageFormsInGroups');
            var url = "{{base_url()}}admin/usersManagePermissions/listFormsInGroups_DT/";
            var aoColumns =  [
                /* ID */   {
                    "bVisible":    false,
                    "bSortable":   false,
                    "bSearchable": false
                },
                /* Form Name */  null,
                /* Form CI Path */  null,
                /* IsMenuLink */  null,
                /* GroupIDs */  {
                    "bVisible":    false,
                    "bSortable":   false,
                    "bSearchable": false
                },
                /* Actions */  null
            ];
            var RowCallBack = "$('td:eq(3) input.make-switch', nRow).attr('group-ids',aData[4]);";
            var DrawCallback = "$('input.make-switch').each(function(e){var groups = $(this).attr('group-ids').split(','); if (groups.length == 1) { $(this).attr('data-checked','false'); }else if (groups.length == 2){ $(this).attr('data-checked','true'); }}); "+"HRS.checkboxSwitches();";
            commonDataTables(selector,url,aoColumns,RowCallBack,DrawCallback);

please can anyone tell what is it that i am doing wrong, why it is not reloading datatable from new url???