Problem - Pagination, Sort and Filter not displayed
Problem - Pagination, Sort and Filter not displayed
simon.ruffieux
Posts: 0Questions: 2Answers: 0
Hello,
I am using django 1.5.0 and bootstrap3 to develop a website using pyCharm.
I want to use the beauty of datatables and x-editables
I notably want to use filter, pagination and sorting capabilities of datables
I used the example provided here as a basis:
http://jsfiddle.net/y3ba611q/2/
However, when I load the page in my browser, I see the table but no editables fields and no pagination/filter/sorting on the table
I suspect I have a problem with the version of jquery I am using ... but I am not sure.
Anyone can guess the problem ?
- views.py
class NodeView(generic.ListView):
model = Node
template_name = "emulTake/node.html"
context_object_name = "node_list"
def get_queryset(self):
"""Return all the existing nodes"""
print 'Number of returned <node> objects: ' + str(len(Node.objects.all()))
return Node.objects.all()
- base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EmulTAKE - {% block page_title %}{% endblock page_title %}</title>
<!-- BOOTSTRAP -->
<!-- Latest compiled and minified bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Block for additional stylesheets -->
{% block head_css %}{% endblock head_css %}
<!-- Latest compiled and minified Jquery -->
<script src="//code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified bootstrap JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap.min.js"></script>
<!-- Block for additional javascripts -->
{% block head_js %}
{% endblock head_js %}
</head>
<body>
<div class="bs-example">
<nav role="navigation" class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">EmulTAKE</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/admin/">Admin</a></li>
<li><a href="/emulTake/home/">Home</a></li>
<li><a href="/emulTake/node/">Nodes</a></li>
<li><a href="/emulTake/profile/">Profile</a></li>
<li><a href="/emulTake/scenario/">Scenario</a></li>
<li><a href="/emulTake/scenariorun/">ScenarioRun</a></li>
<li><a href="/emulTake/statistics/">Statistics</a></li>
</ul>
</div>
</nav>
</div>
<footer class="navbar-inverse navbar-fixed-bottom">
<div class="container pull-right">
<span class="navbar-text text-center">EmulTAKE - Developed by Simon Ruffieux (HESSO -2017)</span>
</div>
</footer>
<div class='container'>
{% block content %}{% endblock content %}
</div>
<script src={% static 'base.js' %}></script>
{% block footer_js %}{% endblock footer_js %}
</body>
</html>
- node.html
{% extends "emulTake/base.html" %}
{% block page_title %}Nodes{% endblock page_title %}
{% load staticfiles %}
{% block head_js %}
<!-- x-editable related scripts -->
<script src= {% static 'node.js' %} ></script>
{% endblock head_js %}
{% block content %}
<p>A sample table with X-editable<p>
<hr>
<table id="nodes_table" class="table table-striped table-bordered" summary="Nodes">
<thead>
<tr>
<th>Node name</th>
<th>Description</th>
<tr>
</thead>
<tbody>
{% for node in node_list %}
<tr>
<td data-order={{ node.name}}><a href="javascript:;" class="editable" data-type="text" data-pk={{ node.id }} data-url="post/" data-mode="popup" data-title="Node name:">{{ node.name}}</a></td>
<td>{{ node.description }}</td>
</tr>
{% endfor %}
</tbody>
</table>
- node.js
$(document).ready(
function() {
var table = $('#nodes_table').DataTable({
order: [[ 1, 'asc' ]],
drawCallback: function(settings){
var api = this.api();
$('.editable', api.table().body())
.editable()
.off('hidden')
.on('hidden', function(e, reason) {
if(reason === 'save') {
$(this).closest('td').attr('data-order', $(this).text());
table.row($(this).closest('tr')).invalidate().draw(false);
}
});
}
});
}
);
This discussion has been closed.