Redraw table - Server side - Json Response
Redraw table - Server side - Json Response
goktuginal41@gmail.com
Posts: 57Questions: 22Answers: 0
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. Is it possible to do such thing while using server-side processing? Thank you in advance. (I'm using Django framework)
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);
});
});
This question has an accepted answers - jump to answer
Answers
Assuming you have a reference to the DataTable you want to display them in, then use the
clear()and thenrows.add()methods:If you need more assistance than that, please link to a test case showing the issue so we can see the JSON response and table configuration.
Allan
Hi Allan,
Thank you for the response. I cannot share it because I work on the localhost and it is a bit huge project. But I can share table config here.
I updated js code in ready funtion, but nothing changed on the screen. Still show the whole table, not filtered one.
JSON response(json.x) is like that (I printed it on console):
I typed min:3 as input and there are 2 rows less than that. JSON returns the correct result but there may be a format problem.
APIs like
clear()androws.add()are for client side processing. These won't work with server side processing. ThemyDataTable.draw();in line 13 will fetch the rows from the server using server side processing.To use the above you will need to disable server side processing.
Otherwise, as discussed in your other thread, with server side processing enabled you will need to incorporate the date ranges into the data query used to fetch the row data.
Another option might be to initialize a second empty Datatable to show the date ranges. Hide this table then when the date range search is selected hide the original table and show the date range table. Toggle back and forth as needed. Or show both on the page.
Kevin
Thank you Kevin. I get it now. I have one more question. It's actually related to this topic. Maybe I found another way to fix my problem.
In js code, I loop through the JSON data and I wanna retrieve desired rows from that JSON.
My question is that is it possible to seach more than one rows? ( Maybe search([ARRAY]) or search(min<x<max) )
For example, if I wanna search a value in the first column, I am able to draw that row.
Sorry I don't understand the question or what you are trying to achieve, so these answers might not help.
If you are using client side processing you can create a search plugin to perform more complex searches. Possibly you can find one that fits your needs here.
You can get the JSON fetched by Datatables by using
ajax.json()and loop through it using your favorite Javascript loop.You can use
filter()to get data from a Datatable matching certain criteria to store in a Javascript variable for later processing.If this doesn't help then please provide more details of what you are trying to achieve.
Kevin
Sorry, I could not explain myself.
There are over 4000 data that I display on the screen. I can iterate the JSON containing this data with the for loop. There are two fields in the upper corner of the screen where input (min and max) can be entered. After entering the min and max value, when I click on the button next to them; I want to filter column(1) values. In short, after clicking the button, I want rows with values between the min and max range to display on the screen.
That is, I keep the rows between the min and max range in an array. Is it possible to display the JSON data in this array on the screen with column(1).search().draw()?
For example, here comment (1) is not working.
https://live.datatables.net/kuwomihe/1/edit
If you are going to return 4000 rows of JSON data to the client then turn off server side processing and let Datatables display all the rows via the
ajaxoption. Use the Date Range search plugin to filter the data based on the date range. Similar to this age range example.Kevin
The amount of data increases, unfortunately, if I do client side processing, it takes 20 seconds to load the page.
Maybe I misunderstood. I thought you wanted to return a JSON response with 4000 rows and loop through them to find the rows within the date range to populate the Datatable. Is my understanding incorrect?
Kevin
Do you want the initial table populated with row data? If not then initialize an empty Datatable, ie no
ajaxordataoption. When the user selects the date range use jQuery ajax(), like above to fetch the rows in the date range andclear()androws.add()the response to the Datatable. Also remove the server side processing option.Kevin