'Have a datatable that is populated on the page and wish to edit the datatable dynamically
Like the question states. The datatable is in Django. I know that Ajax is used to refresh portions of the page dynamically. The trouble is our mysql database was created such that the columns for the database aren't populated with a JSON response. I realize that JSON is used to populate the table dynamically. Currently, it's being done statically. I would like to be able to edit inline.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="./static/api/rep_home.css">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.colVis.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<meta charset=utf-8 />
<title>REP Data</title>
</head>
<body>
{% block content %}
{% block search_input %}
{% endblock %}
<form method='POST'>
<div class='container'>
<div class='row '>
{% csrf_token %}
{% for field in form %}
<div class = 'row'>
<div style="margin: 6px" class='col'>
<b>{{ field.label_tag }}</b> {{ field }}
</div>
</div>
{% endfor %}
<div class='row'>
<div class = 'col'>
<button type='submit' class='btn btn-primary' name='filter' style="margin: 5px">Filter</button>
<button type='submit' class='btn btn-danger' name='reset' style="margin: 5px">Reset Filters</button>
</div>
</div>
</div>
</div>
<div class = 'container-fluid'>
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th scope="col">
<input id='check-all' type='checkbox' checked='checked'>
</th>
<th scope="col">REP Name</th>
{% for characteristic in characteristics %}
<th scope="col" id="col-{{ forloop.counter }}">{{ characteristic }}</th>
{% endfor %}
</tr>
</thead>
{% regroup data by rep as data_list %}
<tbody>
{% for rep in data_list %}
<tr class="{% cycle 'rep1' 'rep2' %}">
<td scope="row">
<input type='checkbox' class='select-rep' name='boxes' checked='checked' value='{{ rep.grouper.id }}'>
</td>
<td scope="row">
<a href='/rep/{{rep.grouper.id}}'>{{ rep.grouper }}</a>
</td>
{% for input in rep.list %}
<td scope="row">{{ input.value }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</form>
{% endblock %}
<div class = 'container'>
<div class="button-box col">
<a class="btn btn-secondary" role="button" href="create_characteristic/">Create Characteristic</a>
<a class="btn btn-secondary" role="button" href="delete_characteristic/">Delete Characteristic</a>
<a class="btn btn-secondary" role="button" href="/admin/api/choice/">Choices</a>
</div>
</div>
<br>
<div class = 'container'>
<div class = 'row'>
<div class = 'col'>
<h3> Instructions</h3>
<button class="btn btn-secondary" role="button" id = "editInstructions" >Edit</button>
</div>
</div>
<br>
<textarea id = "instructionBox" name = "instructionBox" form = "saveForm" style="width:600px;height:300px;" disabled = "">{{instructions}}</textarea>
<form id = "saveForm" name = "saveForm" method = "post">
<button name = "saveInstructions" id = "saveInstructions" hidden = "true" class="btn btn-secondary">Save</button>
<button type = "button" name = "cancelInstructions" id = "cancelInstructions" hidden = "true" class="btn btn-secondary">Cancel</button>
{% csrf_token %}
</form>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'colvis'
],
"paging": false,
"scrollY": '50vh',
"scrollX": true
});
var table = $('#example').DataTable()
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
var column = table.column('#' + $(this).attr('data-column') );
column.visible( ! column.visible() );
} );
$('form').submit(function () {
if ($.validator && !$(this).valid()) return;
var form = $(this);
$(this).find('input[type="submit"], button[type="submit"]').each(function (index) {
$(this).clone(false).removeAttr('id').prop('disabled', true).insertBefore($(this));
$(this).hide();
form.prepend($(this));
});
});
} );
$('#check-all').click(function() {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$('#editInstructions').click(function() {
$('#editInstructions').prop('disabled', true);
$('#saveInstructions').prop('hidden', false);
$('#cancelInstructions').prop('hidden', false);
$('#instructionBox').prop('disabled', false);
});
$('#cancelInstructions').click(function() {
$('#editInstructions').prop('disabled', false);
$('#saveInstructions').prop('hidden', true);
$('#cancelInstructions').prop('hidden', true);
$('#instructionBox').prop('disabled', true);
});
$('#saveInstructions').click(function() {
$('#editInstructions').prop('disabled', false);
$('#saveInstructions').prop('hidden', true);
$('#cancelInstructions').prop('hidden', true);
});
</script>
</body>
</html>
This is the page that loads the datatable. The datatable is called #example. The columns are created by iterating through characteristics. The views.py file sends the characteristics and data information through to this file. The data is grouped and then displayed with an inner for loop in the datatable. data has type of Django querySet. I would imagine its just a case of moving the for loops from the html to the javascript portion but don't know how to go about it appropriately.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|