JSON Response - draw() datatable

Hello everyone,

When I press search_date button, I get the min input value and perform an action in views.py. I want to display the rows that are smaller than the min value (datatables). I can see the rows which are smaller than min I sent with JsonResponse by printing json.x, but I don’t know how to display them by using draw() or any other way. Any ideas? Thank you in advance.

views.py

@csrf_exempt
def dateRange(request):
    if request.method == "POST":
        min = request.POST.get('min')

        x = list(Samples.objects.filter(patientid__lt=min).values())

        return JsonResponse({'min': min, 'x': x})

js

$('#search_date').click(function () {
          var min = $("#min").val();
          $.ajax({
            type: 'POST',
            url: '/dateRange',
            data: {'min': min, csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()},
          })
          .done(function(json){
            console.log(json.x);
          });
  });

Are you saying you’re using the jQuery Datatables library and you’re looking to update the data in it? If so, are you looking just to update certain rows, or are you looking to replace all the contents currently displayed with the new data that was retrieved?

Yes, I am using jQuery Datatables library. I want to destroy the entire table and fill it with only the new data I retrieved. In this case, I want to check the patient_id column(query) at my views.py, retrieve the rows that are lower than the min value, and display(redraw) the entire table on the screen. (Kind of filter)

See the Datatables docs for Data to see how you can use JavaScript to update and replace the data being displayed.
You can also have Datatables manage the AJAX call itself. See the Datatables AJAX API for more information there. (Make sure you also read the examples provided.)

Thank you for the response. Should I code another ajax in .done( function(json) ? I think I am lost a bit.

Just updated it but still nothing changed.

('#search_date').click(function () {
          var min = $("#min").val();
          var max = $("#max").val();
          $.ajax({
            type: 'POST',
            url: '/dateRange',
            data: {'min': min, csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()},
          })
          .done(function(json){
            myDataTable = $("#records").DataTable();
            console.log(json.x);
            myDataTable.clear();
            myDataTable.rows.add(json.x);
            myDataTable.draw();
          });
        });

JSON response(json.x) is like that (I printed it on console):

I typed min:3 as input and clicked search_date button. There are 2 rows less than that. JSON returns the correct result but there may be a format problem.

No, you only need one AJAX call.

Yes, you will need to ensure that the data you receive is in the format that datatables is expecting. That means you may either need to change the format of the data being returned by the view, or change your datables configuration to accept the data being sent.