I am using Django for backend, and I am using Datatable library to display a large number of records ( approx 1 million records ). I am trying to set up datatable in such a way that
every time 25 records are being fetched from the backend and when the user clicks on the next page button, another ajax call gets the next 25 records and so on.
But I am having a trouble setting these up.
My DataTable initialisation :
$("#company-table").DataTable({
"processing": true,
"serverSide": true,
"bDestroy": true,
ajax: {
type: "POST",
url: "/get_results/",
headers: {
"X-CSRFToken": getCookie("csrftoken"),
},
data: {
...other data params...
page:$("#company-table").DataTable().page()
},
},
columns: [
...populating columns...
],
});
And my views.py looks like this ( It is completely wrong as far as I know ) :
#filtered_queryset contains all the records.
paginator = Paginator(filtered_queryset, 25) # Show 25 contacts per page.
page_number = request.POST.get('page')
start = request.POST.get('start')
length = request.POST.get('length')
page_obj = paginator.get_page(page_number)
data = list(page_obj.object_list.values())
return_data = {"data": data}
json_data = json.dumps(return_data,indent=4, sort_keys=True, default=str)
return HttpResponse (json_data, content_type = "application/json")
Can anyone help me? Or just nudge me in the right direction?
Try this one django-ajax-datatable
I hope this will work
Related
I have a Django Model which I'm trying to update from the Admin change_list view when a field that is listed in list_editable has a change event fired. Right now the only way to save the updates is by clicking a "Save" button and then the page reloads. I don't want the page to reload at all. I just want it to update the model asynchronously.
For example I have the following model.
class Example(models.Model):
name = models.CharField()
hide = models.BooleanField(default=False)
In the Admin Form I have
class ExampleAdmin(admin.ModelAdmin):
list_display = [
"name",
"hide"
]
list_editable = [
"name",
"hide"
]
When viewing the change list for Examples now I will see the values listed out with an editable text input for name and a checkbox for hide.
I would like to listen for events on those inputs and when they are fired send an async request to update the specific model.
UPDATE
This is what I have right now.
window.addEventListener("load", function() {
(function($) {
$(".field-name .vTextField").on("change",function (event) {
$('#changelist-form').submit()
})
$('#changelist-form').submit(function(event) { // On form submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: "POST", // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
console.log(response)
},
error: function(e, x, r) { // on error..
console.log(e)
}
});
event.preventDefault()
return false;
});
})(django.jQuery);
})
I can see this firing in the network requests and can verify that the serialized data being sent is updated. The response is a 200, but when I refresh the page the data has not been updated.
UPDATE
At this point I'm giving up on sending this data to Django and will be sending the serialized data to a custom endpoint and parse through and save the data in a custom save function.
Within your Admin Model add the following
class ExampleAdmin(admin.ModelAdmin):
class Media:
js = ("js/admin/example.js")
list_display = [
"name",
"hide"
]
list_editable = [
"name",
"hide"
]
example.js
window.addEventListener("load", function() {
(function($) {
$(".field-name .vTextField").on("change",function (event) {
submit()
})
function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
function submit(){
$.ajax({
data: getFormData($('#changelist-form')),
type: "POST",
url: '/api/save-example',
success: function(response) {
console.log(response)
},
error: function(e, x, r) {
console.log(e)
}
});
}
})(django.jQuery);
})
I'm using Django Rest Framework so I created a POST endpoint, but you could also do this in a Django View that is listening for a POST.
When you execute the post Django will send the data categorized by the row number and field name, like so.
form-0-id : 1
form-0-name: example-name
form-0-hide: false
form-0-example_parent: 100
form-1-id : 2
form-1-name: example-name-two
form-1-hide: true
form-1-example_parent: 200
#api_view(["POST"])
def save_example(request):
try:
total_rows = int(request.POST.get("form-TOTAL_FORMS"))
prefix = "form-"
form_fields = {
"id": "id",
"name": "name",
"hide": "hide",
"example_parent": "example_parent_id",
}
for x in range(total_rows):
item = {}
for key, val in form_fields.items():
post_field = prefix + str(x) + "-" + key
field = val
if key == "id":
id = request.POST.get(post_field)
else:
item[field] = request.POST.get(post_field)
Example.objects.filter(id=id).update(**item)
return Response(status=status.HTTP_200_OK)
except Exception as e:
return Response(status=status.HTTP_404_NOT_FOUND)
Note
total_rows = int(request.POST.get("form-TOTAL_FORMS")) which lets you know how to loop through all the form data that is passed back.
This doesn't take different values into consideration. (i.e. Checkboxes will return an on value but no value if not checked.
You will need to update your save_example function accordingly.
EDIT #1
well maybe because it is not clear in my head
and your are right saying Django forms are not intented to be used with ajax that why I wonder if there is way way doing what I want using Django forms without losing power of Django forms validation
I will try to clear my demand
considering this UI below
When user reach this "patient page" = main form (image 1), he can select "Inclusion form = subform (INCL-001 for instance) in the menu
I want the corresponding form to be displayed without refresh the page ; that why I have used ajax to display the corresponding form
If the corresponding form does not exist, it is a CREATION and a blank "Inclusion form" is displayed : user can enter data and save
If the corresponding form already exist, it is a UPDATE and a prefilled "Inclusion form" is displayed : user can update data and save or delete the form
what would be an elegant way of doing that?
I have a main form (patient.html) and I want to display different subforms (inclusion.html for instance) with ajax in this form.
I manage to display a subform when user click on a button in the main form
But, data are not stored when submitted and it is quite normal as no view is linked to this subform
I have read about this in different post but I miss the concept how to...
I thinks it is a common task with web so probably Django as an easy way to do it?
thanks for advices
urls.py
app_name='ecrf'
urlpatterns = [
path('', views.index, name='index'),
path('patient/<pk>', views.patient, name='patient'),
path('sub_form', views.sub_form, name='sub_form'),
]
views.py
def patient(request,pk):
patient = {"id":1,"num":'A-001',"dat":'Mon 11, novembre 2020',"arm":1,"doc":'Slater'}
return render(request, 'ecrf/patient.html', {'patient':patient})
def sub_form(request):
if request.is_ajax():
return JsonResponse(
{
'html_inclusion': render_to_string(
'ecrf/inclusion.html',
{
'form': InclusionForm,
'language': request.session.get('language')
},
request=request
),
},
status=200
)
js
$(document).ready(function () {
...
$("#add").on("click",function (event) {
var csrftoken = getCookie('csrftoken');
$.ajax({
type: "POST",
url: '/ecrf/sub_form',
data: {
csrfmiddlewaretoken: csrftoken,
},
dataType: 'html',
success: function (data) {
$("#sub_form").children().remove();
obj = JSON.parse(data);
$("#sub_form").append(obj.html_inclusion);
},
error: function (data) {
console.log('error');
}
});
});
$("body")
.on("click", '#inclusion', function (event) {
console.log('inclusion click')
})
});
I'm trying to store some geometry in a PostGIS DB which is created using Leaflet Draw.
The following answer only covers the first part: how to transform the drawn shape into GeoJSON, i.e.:
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType
var layer = e.layer;
// Do whatever else you need to. (save to db, add to map etc)
drawnItems.addLayer(layer);
//Export to DB (source: https://stackoverflow.com/a/24019108/3976696)
var shape = layer.toGeoJSON()
shape_for_db = JSON.stringify(shape);
For example, shape_for_db contains:
{
"type": "Feature",
"properties": {},
"geometry": {
"type":"Polygon",
"coordinates":[[[-0.217073,51.918784],[-0.361362,51.101904],[-0.96918,53.4925],[-0.217073,51.018784]]]
}
}
However, I can't find any solution to successfully insert the geometry in the DB.
So far, based on this, I've tried the following:
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
url: "/en/api/geomtable/",
data: JSON.stringify({"description":"this is a test", "geom":shape_for_db}),
success : function(result) {
console.log(result);
}
});
This returns a 400 Bad Request with the following error:
Unable to convert to python object: Invalid geometry pointer returned
from "OGR_G_CreateGeometryFromJson"."
What should I make of this error? Should I parse the GeoJSON first or something?
UPDATE:
I narrowed a bit the problem, but still haven't succeeded to store GeoJSON in a PostGIS geometry column.
First, I figured out how to do it via SQL:
INSERT INTO citydb.cityobject (gmlid, objectclass_id, envelope)
VALUES
(
'This is a test insert',
23,
ST_SetSRID(ST_GeomFromGeoJSON
(
'{
"type":"Polygon",
"coordinates":[
[7.814375,52.743552],
[12.9375,51.886624],
[7.375,52.520452]
]
}'
),2056)
)
Next, I confirmed that the Ajax above successfully posts non-geometry data to PostgreSQL (i.e. when I remove "geom":shape_for_db from the posted geojson), and fails as soon as I include the geometry (i.e. I get 400 Bad request).
Therefore, I suppose I have to setup my serializer or something in Django to do the equivalent of ST_SetSRID(ST_GeomFromGeoJSON(...)).
I found that the equivalent in Django should be GEOSGeometry, but I am quite unsure on how/where to set this up.
Could anyone provide some guidance on how to set up this
"geojson-to-geometry" conversion?
And more generally, should I really be doing this conversion in the Django Rest Framework, or are there compelling reasons to do it in the Javascript part, or even directly in the PostgreSQL database (e.g. a function triggered when a geojson is written in the geometry column)?
Currently, my Django/DRF setup is as follows:
views.py
#Viewsets and serializers based on https://www.django-rest-framework.org/tutorial/quickstart/
class CityobjectViewSet(viewsets.ModelViewSet):
"""
API endpoint that allows Cityobject information to be viewed or edited.
"""
lookup_field = 'id'
queryset = Cityobject.objects.all()
serializer_class = CityobjectSerializer
# filter_backends = [DjangoFilterBackend] #allows Django-ORM filters in URL
filter_fields = ('id','gmlid','name',)
urls.py
router = routers.DefaultRouter()
router.register(r'cityobject', views.CityobjectViewSet, 'cityobject')
urlpatterns = [
path('', include(router.urls)),
path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]
serializers.py
class CityobjectSerializer(GeoFeatureModelSerializer):
class Meta:
model = Cityobject
#Provide only relevant fields for frontend
fields = (
"objectclass",
"gmlid",
"name",
"description",
"envelope",
"creation_date",
"xml_source"
)
geo_field = 'envelope'
I use DataTables with serverSide render.
<script>
$(document).ready( function () {
$('#myTable').DataTable({
"processing": true,
"serverSide": true,
"ajax": "{% url 'core:persons_json' %}",
"columns": [
{"data": "full_name"},
{"data": "email"},
]
});
});
</script>
In my views.py i have:
def persons_json(request):
persons = Person.objects.all()
data = [item.to_dict_json() for item in persons]
page = 1
per_page = 10
res = {
'data': data,
'page': page,
'per_page': per_page,
'total': math.ceil(persons.count() / per_page)
}
return JsonResponse(res)
But still he still returns all the persons. And I want to avoid loading a lot of data.
But when i define, for example:
def persons_json(request):
length = int(request.GET.get('length'))
persons = Person.objects.all()[:length]
data = [item.to_dict_json() for item in persons]
page = 1
per_page = 10
res = {
'data': data,
'page': page,
'per_page': per_page,
'total': math.ceil(persons.count() / per_page)
}
return JsonResponse(res)
length = int(request.GET.get('length')) is parameter send by serverSide:
http://localhost:8000/person/json/?draw=1&columns%5B0%5D%5Bdata%5D=full_name&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=email&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1568072064631
Note that we have: start=0&length=10.
My question is as follows: when I use this second option. The pagination of other items does not appear in DataTables, ie
I wanted it here
but only one page appears.
Does anyone know how I do to return all pages, and I go clicking each to advance the pages?
I resolve. DataTable send start and length. And API need return recordsTotal and recordsFiltered.
https://github.com/rg3915/django-datatables-experiment/issues/1
I'm working on Django project where I have an app which has a page with a drop down and a chart that is generated from data (which is queried from the database and passed into an API url). I'm using class based views and APIView and have a get method which is creating a response to pass some Json data into a url. I have the following class in my views.py set up and working.
views.py
class ChartData(APIView):
authentication_classes = []
permission_classes = []
def get(self, request, format=None):
#generated through code
data = {
"labels": all_times,
"default": all_data,
}
return Response(data)
In order have access to this data, I have my url set as:
url(r'^display/api/chart/data/$', views.ChartData.as_view()),
This data from the API is used to generate a ChartJS graph in my template html of this app. The chart is set up so that it seeks the Json data from the url display/api/chart/data/ and uses Ajax to populate itself. Here is how the chart is generated:
<script>
{% block jquery %}
var endpoint = 'display/api/chart/data/'
var defaultData = []
var defaultLabels = [];
$.ajax({
method: "GET",
url: endpoint,
success: function(data){
defaultLabels = data.labels
defaultData = data.default
console.log(data)
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: defaultLabels,
datasets: [{
label: '# Measurable',
data: defaultData,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
},
error: function(error_data){
console.log("error")
console.log(error_data)
}
})
{% endblock %}
</script>
I also have another method in the same views file as follows:
views.py
def DropdownDisplay(request):
items= #query from database
if (request.method == 'POST' and request.is_ajax()):
print(request.POST)
return render(request, 'DisplayData/Display.html',{'dropdown':items})
This method is used to generate a dropdown in the page. The url for this is set up in the same urls.py file as follows:
url(r'^graph/', views.DropdownDisplay, name='Display-Dropdown')
Note: they are in the same views.py and urls.py file, I just separated them in this post for formatting purposes.
Now, I'm running into an issue. When I go to /display, the graph works, but the drop down does not. When I go to /display/graph, the drop down works but the graph does not. I can tell it is because in my urls.py, I have separate urls for each class and method, so they only work under their respective url.
However, I would like to combine them so that both the generation of the graph, and the population of the dropdown, work under one url, which will be /display.
How can I go about achieving this?
If you want them to be a part of the same page, both the functionalities should be inside a form under one view. If not, there should not be one single url for two separate functionalities. Your question is a bit ambiguous. If you can clearly state the functionality, would be helpful.