How to render with input from front-end?

Using Django
1

I’m trying to render a table with data from my database based upon input from the user in the frond-end. But it seems I can’t use my data from the front-end to render the page once again to display the new data based upon user input.

This is my view for rendering:

class OverzichtView(LoginRequiredMixin, View):
    model = Info
    template_name = "overzicht/overzicht.html"

    def post(self, request, *args, **kwargs):
        begindatum = request.POST.get('begindatum', None)
        einddatum = request.POST.get('einddatum', None)
        print(begindatum)
        print(einddatum)

    def get(self, request, *args, **kwargs):
         if self.request == "POST":
             begindatum = request.POST.get('begindatum', None)
             einddatum = request.POST.get('einddatum', None)
         else:
             begindatum = "2021-09-01"
             einddatum = "2021-09-30"

         data = []
         nummerPlaten = Info.objects.filter(Q(transactieDatum__gte=begindatum) & Q(transactieDatum__lte=einddatum)).values_list('nummerPlaat', flat=True).distinct()
         for plaat in nummerPlaten:
             qs = Info.objects.filter(Q(transactieDatum__gte=begindatum) & Q(transactieDatum__lte=einddatum) & Q(nummerPlaat=plaat))
             earliest = qs.earliest('transactieDatum')
             print('nummerplaat: {0}, earliest kilometerstand: {1}'.format(plaat, earliest.kilometerStand))
             latest = qs.latest('transactieDatum')
             print('nummerplaat: {0}, latest kilometerstand: {1}'.format(plaat, latest.kilometerStand))
             diff = latest.kilometerStand - earliest.kilometerStand
             hoeveelheid = qs.aggregate(totalHoeveelheid=Sum('hoeveelheid'))['totalHoeveelheid']
             data.append({
             'nummerPlaat' : plaat,
             'diff' : diff,
             'hoeveelheid' : hoeveelheid
         })

         print(data)

         return render(request, self.template_name, { 'list' : data})

This is the user-input data I send to the back-end:

$('#zoekopdatumbtn').on("click", function(){
        begindatum = $("#begindatum").val();
        einddatum = $("#einddatum").val();
        
        console.log(begindatum)
        console.log(einddatum)

        
    
        $.ajax({
            url: zoekurl,
            method: "POST",
            data:{begindatum:begindatum, einddatum:einddatum},
            dataType: 'json',
            success:function(data)
            {
                console.log(data)
            },
            error: function(data){
                alert("error");
            }
        });
    })

And this is my template where I want to output the data inside a table based upon user input:

 <!-- DataTales Example -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">Overzicht</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>Nummerplaat *</th>
                                            <th>Totaal aantal facturen *</th>
                                            <th>Getankte hoeveelheid *</th>
                                            <th>Aantal kilometers *</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>Nummerplaat *</th>
                                            <th>Totaal aantal facturen *</th>
                                            <th>Getankte hoeveelheid *</th>
                                            <th>Aantal kilometers *</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                    {% for object in list %}
                                        <tr>
                                            <td>{{ object.nummerPlaat }}</td>
                                            <td>1</td>
                                            <td>{{ object.hoeveelheid }}</td>
                                            <td>{{ object.diff }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

Any help in order to achieve this (User gives input, data gets shown inside the table based upon user input)? Thank!

2

Are you getting the right html data logged on the console? Or is the problem that you’re not getting the right data?

You show a url in your ajax named zoekurl. Is that working? Is that view returning the HTML that you want to inject into your page?

I’m not really understanding what you’re trying to explain here, but I’ll mention that when you have an ajax call to a view, it’s up to you to provide the JavaScript in the browser to do whatever needs to be done with the response.
If that view returns an HTML fragment, your JavaScript needs to insert it into the DOM. If the view returns JSON data, your JavaScript needs to build the new HTML elements from that data.