Ajax returns output for server side processing but datatable fails to render the results
Ajax returns output for server side processing but datatable fails to render the results
tamimi
Posts: 1Questions: 1Answers: 0
Hi,
I'm using the DataTable using server side processing. Ajax is returning data which is a valid JSON output, but for some reason the results are not rendered back in my html page. I am using django and have the following view:
class DataListJson(BaseDatatableView):
model = FA_ADR_Analysis
columns=['period','addition','depreciation', 'retirement_cost','retirement_reserve']
order_columns = ['period']
max_display_length = 100
def get_queryset(self, qs):
qs = serializers.serialize("json", FA_ADR_Analysis.objects.all())
return qs
And this is my url configuration:
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.index, name='index'),
url(r'^index/$', views.index, name='index'),
url(r'^tables/data/$', views.OrderListJson.as_view(), name='data_list_json'),
]
And finally this is my template with the script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Data Tables</title>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="../../static/bootstrap/css/bootstrap.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="../../static/plugins/datatables/dataTables.bootstrap.css">
<!-- jQuery 2.2.3 -->
<script src="../../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../../static/bootstrap/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="../../static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../static/plugins/datatables/dataTables.bootstrap.min.js"></script>
</head>
<body>
<table id="example1">
<thead>
<tr>
<th>Period</th>
<th>Addition</th>
<th>Depreciation</th>
<th>Retirement (Cost)</th>
<th>Retirement (Reserve)</th>
</tr>
</thead>
<tbody>
<tr><td>Loading...</td></tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$("#example1").dataTable({
"processing": true,
"serverSide": true,
"ajax": "{% url 'data_list_json' %}"
});
});
</script>
</body>
</html>
I am not sure what I am doing wrong, am I missing something?. I am not using any complicated scripting for ajax options, but the results are not rendered in html. The html only gives JSON output result as follows and not properly rendered in a table:
{"recordsTotal": 13, "result": "ok", "recordsFiltered": 13, "data": [["Jan-2016", 1102506605.01, 508939192.74, 14876477.64, 12145627.82], ["Feb-2016", 235024400.16, 500184433.33, 139024160.85, 123176920.29], ["Mar-2016", 1174463066.74, 527700392.63, 170855913.35, 109757689.14], ["Q1-2016", 2511994071.91, 1536824018.7, 324756551.84, 245080237.25], ["Apr-2016", 490549886.16, 512277931.62, 3676692.43, 2522446.0], ["May-2016", 826672658.92, 523335957.89, 213062532.68, 74755341.12], ["Jun-2016", 1080345054.66, 570150093.14, 6780003.89, 6539646.38], ["Q2-2016", 2397567599.74, 1605763982.65, 223519229.0, 83817433.5], ["Jul-2016", 356009037.2, 518901293.61, 58538518.02, 47443137.7], ["Aug-2016", 487689784.01, 525348964.41, 114226210.04, 104855285.77]], "draw": 0}
Any suggestions as to what I am missing here?
Thanks.