I am trying to print Datatable in Django Template. I am using Django 1.7 and using metro style CSS. If I try to return output as JSON from view , it just prints JSON output without any HTML formatting. If I return non JSON output from view it prints HTML and Datatable with heading but no values and the f12 debugger tool in IE gives a JSON error. My objective is to print a basic Datatable without any customization, I am using ServerSide ajax processing to pull data from Database(model), I have tried using sAjaxsource as well in Javascript. Here is my template :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="/static/fnsbuild/metro/docs/css/metro-bootstrap.css" rel="stylesheet" />
<link href="/static/fnsbuild/metro/docs/css/metro-bootstrap-responsive.css" rel="stylesheet" />
<link href="/static/fnsbuild/metro/docs/css/iconFont.css" rel="stylesheet" />
<link href="/static/fnsbuild/metro/docs/css/docs.css" rel="stylesheet" />
<link href="CSS/Override.css" rel="stylesheet" />
<script type="text/javascript" src="/static/fnsbuild/metro/docs/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/fnsbuild/metro/docs/js/jquery/jquery.dataTables.js"></script>
<script type="text/javascript" src="/static/fnsbuild/metro/docs/js/jquery/jquery.widget.min.js"></script>
<script type="text/javascript" src="/static/fnsbuild/metro/docs/js/jquery/jquery.dataTables.min.js"></script>
<script src="/static/fnsbuild/metro/docs/js/metro.min.js"></script>
<script src="/static/fnsbuild/metro/docs/js/load-metro.js"></script>
<script src="/static/fnsbuild/metro/docs/js/docs.js"></script>
<title>Metro UI CSS : Simple responsive css framework</title>
</head>
<body class="metro">
<div class="container">
<table class="table striped hovered dataTable" id="example">
<thead>
<tr>
<th class="text-left">Engineer</th>
<th class="text-left">Site_Code</th>
<th class="text-left">NSSA</th>
<th class="text-left">Region</th>
<th class="text-left">GFSD</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var oTable=$('#example').DataTable( {
"aaSorting": [[ 2, "asc" ]],
"bprocessing": true
"bServerSide": true,
"ajax": "{% url 'api' %}",
}
);
});
</script>
</div>
Here is my View :
from django_datatables_view.base_datatable_view import BaseDatatableView
class MyAjaxView(BaseDatatableView):
template_name = 'fnsbuild/table_test.html'
model = OspfNssa
columns = ['id', 'site_code', 'nssa', 'region', 'gfsd']
def render_column(self, row, column):
return super(MyAjaxView, self).render_column(row, column)
URL.py
url(r'^fnsbuild/table_test/$', fnsbuild.views.MyAjaxView.as_view(), name="api"),
Instead of Printing Datatable and values, it just prints JSON Output
{"recordsTotal": 79, "recordsFiltered": 79, "draw": 0, "data": [[56, "by2", "0.0.3.187", "West NA", 1111], [57, "sn3", "0.0.1.24", "Central NA", 1111], [58, "cpq01", "0.0.12.39", "South America", 1111], [59, "hk2", "0.0.4.178", "Asia", 1111], [60, "co1", "0.0.3.32", "West NA", 1111], [61, "bl4", "0.0.1.169", "East NA", 1111], [62, "co2", "0.0.3.37", "West NA", 1111], [63, "kaw", "0.0.4.76", "Asia", 1111], [64, "ch1", "0.0.0.201", "Central NA", 1111], [65, "bn3", "0.0.0.203", "East NA", 1111]], "result": "ok"}
I have tried almost everything suggested on Various forums, Almost given up. I am new to Django so I might be missing something silly. Please suggest.
From django-datatables-view BaseDatatableView documentation:
django-datatables-view simplifies handling of sorting, filtering and creating JSON output
Therefore your view produces JSON, which it would be expected if this would be used within an AJAX request.
If you need something different, you should either make MyAjaxView not inherit from BaseDatatableView, or construct another view that does something sensible with an ajax request.
Related
I'm sending the data from a views function to a template as a table and trying to use datatables to turn a table into a more functional table, so I can order elements based on the different columns...
The table by itself appears... But it's only a html structured table, not a dynamic table, where it could be ordered by the columns.
I was following: https://datatables.net/manual/
So far I found advises:
-- Check the integrity of the table (so it has a head tag and body tags)- I have it
--all tags must be closed - they are closed
-- use the Javascript function, like so:
$(document).ready( function () {
$('#table_id').DataTable();
} );
I have no idea what else could be wrong...
I have to mention... I would like to avoid saving data to a database, just would like to take data from views and post it to the table in a template... That's why I choose datatables over django_tables2... Because it seems datatables have a way just render tables from data...
My code:
views.py:
...
for Loop:
...
data_list.append({'ref':ref[k], 'ref_num':ref_num[k], 'ref_pr':ref_pr[k]})
k=k+1
context={
data_list,
}
return render(request, 'objects.html', context=context)
The page renders, so no faults in urls...
html page:
{% extends "base_generic.html" %}
{% load static %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
{% endblock %}
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
{% block content %}
<div>
<table id='table_id' class="display">
<thead>
<tr>
<th>ref</th>
<th>ref_num</th>
<th>ref_pr</th>
</tr>
</thead>
<tbody>
{%for data in data_list%}
<tr>
<td>{{data.ref}}</td>
<td>{{data.ref_num}}</td>
<td>{{data.ref_pr}}</td>
</tr>
{%endfor%}
</tbody>
</table>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
<script>
$(document).ready( function () {
$('#table_id').dataTable();
} );
</script>
{% endblock %}
As far as I'm aware the general principle is to set all scripts down the page, so they load last in the sequence, so the page will be load faster. But I tried to set scripts in all places where it's possible, up the page and in the general page. It didn't work for me. Also as it could be seen from the code, I'm trying to use CDN code, referring to the servers for datatables.
Also may be it doesn't work because I'm using for loop to fill data for the table? But I think I saw the for loop somewhere in the tutorial for the datatables? What should I try, do extra or fix here? If I need to post extra code, please let me know. Thank you.
May be it has to be modified further? But in the manual it was said, that after setting up scripts the table should be initialized...
You just need to load jQuery as well, see this snippet:
<script src="https://code.jquery.com/jquery-3.5.1.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
<table id='table_id' class="display">
<thead>
<tr>
<th>ref</th>
<th>ref_num</th>
<th>ref_pr</th>
</tr>
</thead>
<tbody>
<tr>
<td>ref1</td>
<td>ref_num1</td>
<td>2</td>
</tr>
<tr>
<td>ref2</td>
<td>ref_num2</td>
<td>1</td>
</tr>
</tbody>
</table>
<script>
$(document).ready( function () {
$('#table_id').dataTable();
} );
</script>
Good Morning,
I am trying to handle two events on a single GeoChart,but i am not getting result ,
Only One Event was handling at a time .
The following code is.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
options['dataMode'] = 'regions';
var container = document.getElementById('regions_div');
var geomap = new google.visualization.GeoMap(container);
google.visualization.events.addListener(geomap, 'select', sampleselectevent);
function sampleselectevent() {alert('I am an sampel event'); }
geomap.draw(data, options);
google.visualization.events.addListener(geomap, 'drawingDone', showcmpltd);
function showcmpltd() {alert('Data collection is completed to dispaly chart'); }
};
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Please Help me
Thanks in advance.
I want to create a list which dinamically grows after an event (take a shoot) I mean adding each picture on real time to the list, this is my method...
//Invoke the camera capture UI for snapping a photo
function imageCapture() {
...
//Creates the array, datalist and the namespace for making this data public
if (dataArray == null) { dataArray = new Array(); }
dataArray[captureCount] = { title: capturedItem.name, id: "img" + captureCount, picture: photoBlobUrl };
var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = { itemList: dataList };
WinJS.Namespace.define("DataExample", publicMembers);
}
And this is the HTML page which loads the content
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>eCamera</title>
<!-- Referencias de WinJS -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- Referencias de eCamera2 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body >
<div id="content">
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div style="width: 150px; height: 100px;">
<!-- Displays the "picture" field. -->
<img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: title; src: picture" />
<div>
<!-- Displays the "title" field. -->
<h4 data-win-bind="innerText: title"></h4>
<!-- Displays the "id" field. -->
<h6 data-win-bind="innerText: id"></h6>
</div>
</div>
</div>
<div id="basicListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : DataExample.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate'),
itemsDraggable: true,
itemsReorderable: true }"></div>
</div>
</body>
</html>
If I load all the content in a fixed dataArray at first it works perfect, but dinamically adding elements and setting it all each time I take a picture so far doesn't work, how to make it work???
thanks in advance for the support
The app should not create new list each time. Use the WinJS.Binding.List.push method to append or splice can be used to insert. Since the list is observable, UI will autoupdate on changes (delete/add) to the list.
I have jQuery Datepicker on my page. When I am selecting value its not working at the same time its added # on URL. I am not understanding this problem. I have done it as follow,
$("#AsOfDate").datepicker({
minDate: new Date(1900, 01, 01),
maxDate: new Date(),
changeMonth: true,
changeYear: true,
});
Anyone having idea about it.
Try this
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$("#AsOfDate").datepicker({
dateFormat: 'yy-mm-dd',
yearRange: '1900:2012',
monthRange: '01:12',
minDate: new Date('1900/01/01'),
maxDate: '+30Y,
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="AsOfDate" /></p>
</body>
</html>
make sure jQuery and Jquery Ui are loading correctly, try loading it from the CDN.
This question already has answers here:
Can I use multiple versions of jQuery on the same page?
(8 answers)
Closed 9 years ago.
I was wondering if someone could tell me if it is possible to run multiple versions of jquery in one html file? i.e.
I have 6 divs each dive contains a different jquery plugin. The first plugin runs on the latest jquery. The second powered by an older version and so forth.
I tried to implement all of these into one html, but as soon as I implement script 2 underneath, script 1, then #1 doesnt work anymore, but #2 does. As soon as I implement #3 underneath #2, then #3 works and everything above breaks.
Is there a specific way to do this? I have tried applying the noConflict code, but then the script which I assign it to, stops working. Unless I did it wrong.
I have though about using if statements to say, if var=plugin 1 gets clicked, the cancel all other jquery and only play jquery for that particular plugin. And so forth for all the other plugins. But I am not sure if this will work.
I have also thought about using a seperate $(document).ready(){}; for each plugin, but again not sure if this will work.
Is there anyone who knows how I can solve this problem? I have been battling this beast for the past 3 days & nights adn will for ever be in your debt.
ps:I didn't supply any code cause it's just so much, and a little all over the place. I can if you would like me to.
Thanks
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src="jquery191.js"></script>
<!-- easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- liteAccordion js -->
<script src="js/liteaccordion.jquery.js"></script>
<script src="js/datepicker.js"></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<!-- liteAccordion css -->
<link href="css/liteaccordion.css" rel="stylesheet" />
<!-- liteAccordion js -->
<script type="text/javascript">
$(document).ready(function() {
$('#div1').liteAccordion({
onTriggerSlide : function() {
this.find('figcaption').fadeOut();
},
onSlideAnimComplete : function() {
this.find('figcaption').fadeIn();
},
autoPlay : true,
pauseOnHover : true,
theme : 'stitch',
rounded : true,
enumerateSlides : true
}).find('figcaption:first').show();
<!-- date picker js -->
$('#trip input#leavedate, #trip input#returndate').datepicker({ dateFormat: 'D, M d, yy', showOn: 'button', buttonImage: 'calendar.gif', buttonImageOnly: true }); // format: Thurs, Jan 31, 2008, only show when the user clicks the calendar
});
</script>
// datepicker
<link rel="stylesheet" href="ui.datepicker.css"/>
<style type="text/css">
body { font-family: verdana, arial, sans-serif; color: white; font-size: 0.8em; }
#trip{ background-color: black; width: 500px;}
#trip fieldset { border-width: 1px; width: 470px; }
#trip .fields { padding: 25px; margin-bottom: 20px; }
#trip div { clear: both; }
#trip label { float: left; width: 165px; }
#trip input { float: left; width: 200px; }
#trip .ui-datepicker-trigger { float: left; width: 16px; }
</style>
// datepicker
<script src="jq.js"></script>
<script type="text/javascript">
var jQuery_1_2_6 = $.noConflict(true);
</script>
<script language="JavaScript" src="jq.date.js"></script>
<script language="JavaScript">
</script>
// Style switch
<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="styleswitch.js"></script>
<script src="/mint/?js" type="text/javascript"></script>
</head>
<body>
<div id="div1">
<ol>
<li>
<h2><span>Slide One</span></h2>
<div><p><img src="img-one/1.jpg">HELLO HELLOHELLOHELLOHELLO</p></div>
</li>
<li>
<h2><span>Slide Two</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Three</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Four</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Five</span></h2>
<div></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
<br><br>
<!-- Date Picker -->
<div id="div2">
<form id="trip" action="#" >
<fieldset>
<legend>Trip Length</legend>
<div class="fields">
<div><label for="leavedate">Departure Date:</label> <input type="text" id="leavedate" name="leavedate"/></div>
<div><label for="returndate">Return Date:</label> <input type="text" id="returndate" name="returndate"/></div>
</div>
</fieldset>
</form>
</div>
<br><br><br><br>
<!-- Style Switcher -->
<div>
<h1>Stylesheet switcher using jQuery</h1>
<p>This is a simple example of my stylesheet switcher which is very simple thanks to the power of jQuery.</p>
<p><strong>Update 25/08/2006:</strong> Updated to work with persistant stylesheets and new version of jQuery (r226 from SVN) [thanks Andrea]</p>
<p><strong>Update 20/08/2006:</strong> Updated to work with new version of jQuery (r200 from SVN) ["*=style" replaced with "=*style*"]</p>
<p>
Currently active stylesheet:
<span id="st1">styles1</span>
<span id="st2">styles2</span>
<span id="st3">styles3</span>
</p>
<p>Choose a different stylesheet:</p>
<ul>
<li>styles1</li>
<li>styles2</li>
<li>styles3</li>
</ul>
<p>Please view source to see how it works or see the full article about this script for more information. You can download the relevant Javascript here: styleswitch.js, jquery.js</p>
</div>
<!-- FOUR -->
<div>
</div>
</body>
</html>
It should be pretty simple:
<script type='text/javascript' src='js/jquery.1.0.0.js'></script>
<script type='text/jvascript'>
var $jq1 = jQuery.noConflict();
</script>
<script type='text/javascript' src='js/jquery.2.0.0.js'></script>
<script type='text/jvascript'>
var $jq2 = jQuery.noConflict();
</script>
<script type='text/javascript' src='js/jquery.3.0.0.js'></script>
<script type='text/jvascript'>
$(document).ready(function() {
console.log('constructed with jQuery 3.0.0');
});
</script>
You however must make sure the right script is in the right scope, usualy you do something like:
$('#id').plugin();
this must be, for example:
$jq1('#id').plugin();
Here is an example of changing the jQuery namespace. You can have the older version run on a different namespace to avoid conflict and confusion.