Django Applying Filters To Reload DataTable

Question

So I have a couple of filters that user can apply to alter the information displayed in a Table. I have an Ajax call that gets triggered whenever a user clicks on a one of these filters:

        $.ajax({
            url: '/fund_monitor/fund_directory',
            type: 'GET',
            data:JSON.stringify({
                filter_dict: filter_dict
            }),
            success: function (data) {
            }
        });

Pretty simple stuff. Next my Class Based View will serve this Ajax Call.

def get(self, request, *args, **kwargs):
    filtered_ids = []
    if request.is_ajax():
        #filter_dict = request.GET.getlist('filter_dict')
        request_data = json.dumps(request.GET)
        request_data = json.loads(request_data)
        for each in request_data:
            each = json.loads(each) # Just for parsing
            for key, value in each['filter_dict'].items():
                if key == 'Structure':
                    objects = Fund.objects.filter(structure__in=value).values('fund_account_id').distinct()
                    for fund_account_id in objects:
                        filtered_ids.append(fund_account_id['fund_account_id'])
                elif key == 'Fund Class':
                    objects = Fund.objects.filter(fund_class__in=value).values('fund_account_id').distinct()
                    for fund_account_id in objects:
                        filtered_ids.append(fund_account_id['fund_account_id'])
                elif key == 'Designated Broker':
                    objects = Fund.objects.filter(designated_broker__in=value).values('fund_account_id').distinct()
                    for fund_account_id in objects:
                        filtered_ids.append(fund_account_id['fund_account_id'])

        filtered_ids = set(filtered_ids)
        context = self.get_context_data(filtered_ids, **kwargs)
        self.template_name = 'fund_monitor/fundaccount_table_list.html'
        return self.render_to_response(context)
    context = self.get_context_data(**kwargs)
    return self.render_to_response(context)

So after I collected all the ids that I want to be displayed in the table, I pass it to the get_context_data function which takes all these ids and obtains the required information based on the ids.

def get_context_data(self, filtered_ids=None, **kwargs):
    context = super(__class__, self).get_context_data(**kwargs)
    context['nbar'] = 'fund_monitor'
    context['sbar'] = 'fundaccount_list'
    context['transmission'] = 3

    if filtered_ids:
        context['fundaccount_list'] = self.model.objects.filter(id__in=filtered_ids)
    else:
        context['fundaccount_list'] = self.model.objects.all()
    url_dict = defaultdict(list)
    for fund in context['fundaccount_list']:
        end_date = str(NAV.objects.filter(fund= fund.id, transmission=3).values('valuation_period_end_date').order_by('-valuation_period_end_date')[0]['valuation_period_end_date'])
        start_date = str(NAV.objects.filter(fund= fund.id, transmission=3).values('valuation_period_end_date').order_by('-valuation_period_end_date')[1]['valuation_period_end_date'])

        url_dict[fund.account_description].extend([fund.id,context['transmission'],
                                                   start_date, end_date])
    context['obj_items'] = dict(url_dict)
    return context

So after it returns context, in the get function, the line:

self.template_name = 'fund_monitor/fundaccount_table_list.html'   
return self.render_to_response(context)

should run with the modified template_name. This template_name basically contains only the table HTML. Basically, I only want the table to refresh itself and not the whole page...However, while the context is updating due to the filters the table is not reloading. Any ideas?

Answer 1

Simple solution:

   $.ajax({
        url: '/fund_monitor/fund_directory',
        type: 'GET',
        data:JSON.stringify({
            filter_dict: filter_dict
        }),
        success: function (data) {
            $("#myTable").html(data); // Add this line to your based on your table div
        }
    });