cambio de tipo de tabla, filtro de busqueda, paginación

parent 19a83976
......@@ -181,10 +181,6 @@
{% block modal1 %}{% endblock %}
<!-- MODAL 1 -->
<!-- jQuery 3 -->
<script src="{% static 'catalog/adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{% static 'catalog/adminlte/bower_components/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'catalog/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
......
......@@ -13,7 +13,7 @@
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<!-- <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>-->
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="{% static 'catalog/js/openLayers4.js' %}"></script>
<script src="{% static 'catalog/js/sidtMap.js' %}"></script>
{% endblock %}
......
......@@ -10,26 +10,26 @@ function refresh() {
url: 'Reload',
success: function (data) {
$.each(data, function (key, val) {
console.log(key + " = " + val.purchase_id + "" + val.progress)
console.log(key + " = purchase_id: " + val.purchase_id + ", val_progress: " + val.progress);
if (val.progress != 100) {
$('#progress_bar' + val.purchase_id + '').attr("aria-valuenow", val.progress);
$('#progress_bar' + val.purchase_id + '').attr('style', 'width:' + val.progress + '%');
document.getElementById('progess_value' + val.purchase_id).innerHTML = val.progress + ' %';
$('#progress_bar' + val.purchase_id + '').attr("class", "progress-bar progress-bar-warning progress-bar-striped active");
$('#view_report' + val.purchase_id + '').attr('disabled', 'false');
$('#action_buttons' + val.purchase_id + '').attr("class", "hidden");
$('#main_progess' + val.purchase_id + '').removeClass("hidden");
$('#main_progess' + val.purchase_id + '').attr("class", "progress");
$('#progress_bar' + val.purchase_id).attr("aria-valuenow", val.progress);
$('#progress_bar' + val.purchase_id).attr('style', 'width:' + val.progress + '%');
//document.getElementById('progess_value' + val.purchase_id).innerHTML = val.progress + ' %';
$('#progress_bar' + val.purchase_id).attr("class", "progress-bar progress-bar-warning progress-bar-striped active");
$('#view_report' + val.purchase_id).attr('disabled', 'false');
$('#action_buttons' + val.purchase_id).attr("class", "hidden");
$('#main_progess' + val.purchase_id).removeClass("hidden");
$('#main_progess' + val.purchase_id).attr("class", "progress");
}
else {
$('#progress_bar' + val.purchase_id + '').attr("class", "progress-bar progress-bar-success progress-bar-striped");
$('#progress_bar' + val.purchase_id + '').attr("aria-valuenow", val.progress);
$('#progress_bar' + val.purchase_id + '').attr('style', 'width:' + val.progress + '%');
document.getElementById('progess_value' + val.purchase_id).innerHTML = val.progress + ' %';
$('#view_report' + val.purchase_id + '').removeAttr("disabled");
$('#view_report' + val.purchase_id + '').attr("href", "../reports/T15QZD_sclData/" + val.purchase_id);
$('#main_progess' + val.purchase_id + '').attr("class", "hidden");
$('#action_buttons' + val.purchase_id + '').removeClass("hidden");
//$('#progress_bar' + val.purchase_id).attr("class", "progress-bar progress-bar-success progress-bar-striped");
//$('#progress_bar' + val.purchase_id).attr("aria-valuenow", val.progress);
//$('#progress_bar' + val.purchase_id).attr('style', 'width:' + val.progress + '%');
//document.getElementById('progess_value' + val.purchase_id).innerHTML = val.progress + ' %';
$('#view_report' + val.purchase_id).removeAttr("disabled");
$('#view_report' + val.purchase_id).attr("href", "../reports/T15QZD_sclData/" + val.purchase_id);
$('#main_progess' + val.purchase_id).attr("class", "hidden");
$('#action_buttons' + val.purchase_id).removeClass("hidden");
}
});
}
......@@ -42,6 +42,58 @@ $(function () {
int = setInterval("refresh()", 1000);
});
$(document).ready(function () {
$('#example').DataTable
({
language:
{
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate":
{
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria":
{
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
responsive:
{
details:
{
type: 'column',
target: 'tr'
}
},
columnDefs:
[{
className: 'control',
orderable: false,
targets: 0
}],
order: [1, 'asc']
});
});
$(function () {
$('#reportPage').show();
});
\ No newline at end of file
});
{% extends "base_top.html" %}
{% load staticfiles %}
{% block headMedia %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
{% endblock %}
{% block messages %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
......@@ -106,7 +110,7 @@
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</a>
</li>
</ul>
</div>
......@@ -115,7 +119,6 @@
{% block user %}
{% include "user_button.html" %}
{% endblock %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
......@@ -126,8 +129,8 @@
<div class="panel panel-default">
<div class="panel-heading">Reports</div>
<div class="panel-body" id="mytable">
<table data-toggle="table" class="table table-hover table-bordered">
<table data-toggle="table" id="example" class="table table-striped table-bordered"
style="width:100%">
<thead>
<th>Process</th>
<th>Purchase date</th>
......@@ -147,36 +150,23 @@
<!--td>{{product.clouds}} %</td-->
<td>{{ product.size }}</td>
<td class="text-center">
<div class="progress" id="main_progess{{ product.purchase_id }}"
{% if product.progress == 100 %} class="hidden" {% endif %}>
<div class="progress {% if product.progress == 100 %} hidden {% endif %}"
id="main_progess{{ product.purchase_id }}">
<div id="progress_bar{{ product.purchase_id }}" role="progressbar"
aria-valuenow="{{ product.progress }}"
{% if product.progress == 100 %}
class="progress-bar progress-bar-success progress-bar-striped"
{% else %}
class="progress-bar progress-bar-warning progress-bar-striped active"
{% endif %}
aria-valuemin="0"
aria-valuemax="100" style="width:{{ product.progress }}%">
class="progress-bar progress-bar-warning progress-bar-striped active"
aria-valuemin="0" aria-valuemax="100"
style="width:{{ product.progress }}%">
<p class="text-center" style="color: #0a0a0a"
id="progess_value{{ product.purchase_id }}">
{% if product.progress == 100 %}
100 %
{% else %}
{{ product.progress }} %
{% endif %}
</p>
</div>
</div>
<div id="action_buttons{{ product.purchase_id }}" {% if product.progress != 100 %}
class="hidden" {% endif %}>
<a id="view_report{{ product.purchase_id }}" title="View Report"
{% if product.progress == 100 %}
href="#"
{% else %}
href="#"
disabled
{% endif %} class="btn btn-success">
href="../reports/T15QZD_sclData/{{ product.purchase_id }}"
class="btn btn-success">
<i class="fa fa-eye"></i>
</a>
<a title="Download zip" {% if product.progress == 100 %}
......@@ -193,39 +183,16 @@
<i class="fa fa-file-text"></i>
</a-->
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<ul class="pagination">
{% if productList.has_previous %}
<li><a href="?page={{ productList.previous_page_number }}">&laquo;</a></li>
{% else %}
<li class="disabled"><span>&laquo;</span></li>
{% endif %}
{% for i in productList.paginator.page_range %}
{% if productList.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li><a href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if productList.has_next %}
<li><a href="?page={{ productList.next_page_number }}">&raquo;</a></li>
{% else %}
<li class="disabled"><span>&raquo;</span></li>
{% endif %}
<li class="disabled">
<span>Page {{ productList.number }} of {{ productList.paginator.num_pages }}.</span></li>
</ul>
</div>
</div>
</section>
<!-- /.content -->
</div>
<!-- Footer -->
<footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
<!-- Footer Elements -->
......@@ -238,7 +205,6 @@
<a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
</div>
<!-- Copyright -->
</footer>
<!-- /.Footer -->
<!-- Modals -->
......@@ -264,55 +230,6 @@
<!-- /.modals -->
{% endblock %}
{% block scripts %}
<!--script src="{% static 'reports/js/scripts.js' %}"></script-->
<script>
function openmodal(info) {
info2 = info.split(";");
$("#myModal").modal();
$("#log_info").append(info2);
}
function refresh() {
$.ajax({
dataType: "json",
url: 'Reload',
success: function (data) {
$.each(data, function (key, val) {
console.log(key + " = " + val.purchase_id + "" + val.progress)
if (val.progress != 100) {
$('#progress_bar' + val.purchase_id).attr("aria-valuenow", val.progress);
$('#progress_bar' + val.purchase_id).attr('style', 'width:' + val.progress + '%');
document.getElementById('progess_value' + val.purchase_id).innerHTML = val.progress + ' %';
$('#progress_bar' + val.purchase_id).attr("class", "progress-bar progress-bar-warning progress-bar-striped active");
$('#view_report' + val.purchase_id).attr('disabled', 'false');
$('#action_buttons' + val.purchase_id).attr("class", "hidden");
$('#main_progess' + val.purchase_id).removeClass("hidden");
$('#main_progess' + val.purchase_id).attr("class", "progress");
}
else {
$('#progress_bar' + val.purchase_id).attr("class", "progress-bar progress-bar-success progress-bar-striped");
$('#progress_bar' + val.purchase_id).attr("aria-valuenow", val.progress);
$('#progress_bar' + val.purchase_id).attr('style', 'width:' + val.progress + '%');
document.getElementById('progess_value' + val.purchase_id).innerHTML = val.progress + ' %';
$('#view_report' + val.purchase_id).removeAttr("disabled");
$('#view_report' + val.purchase_id).attr("href", "../reports/T15QZD_sclData/" + val.purchase_id);
$('#main_progess' + val.purchase_id).attr("class", "hidden");
$('#action_buttons' + val.purchase_id).removeClass("hidden");
}
});
}
});
};
$(function () {
var int;
refresh();
int = setInterval("refresh()", 1000);
});
$(function () {
$('#reportPage').show();
});
</script>
{% block scripts %}
<script src="{% static 'reports/js/scripts.js' %}"></script>
{% endblock %}
\ No newline at end of file
......@@ -133,9 +133,9 @@ def Reports(request):
##############################################
# paginacion #
##############################################
paginator = Paginator(productList, 10) # Show 25 contacts per page
page = request.GET.get('page')
productList = paginator.get_page(page)
#paginator = Paginator(productList, 3) # Show 25 contacts per page
#page = request.GET.get('page')
#productList = paginator.get_page(page)
return render(request, 'Reports.html', {"productList": productList})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment