How can I add a action button in each row and show more detail about the row
How can I add a action button in each row and show more detail about the row
bibalani
Posts: 14Questions: 3Answers: 0
I want to add an action button in each row and after hitting the button go to other page and showing more detail about the row.
my code is not working and not showing the button for each row. I much appreciate if anyone help me fix the code.
.html
<!DOCTYPE html>
{% extends 'my_app/base.html' %}
{% block head %}
<title>Search Order</title>
{% endblock %}
{% block body_block %}
<div class="form-group">
<form id="search_order_form" data-url="{% url 'my_app:search_order' %}">
{% for field in search_order_form %}
<label class="order-label" for="{{ field.auto_id }}">{{ field.label }}</label>
{{ field }}
{% endfor %}
{% csrf_token %}
<br>
<input class="btn btn-block" type="submit" value="Search Order" name="search_order_submit" style="width:600px">
</form>
<br>
</div>
<table id="search_order_info" class="display" style="width:100%">
<thead>
<tr>
<th>Order Sequence</th>
<th>Order Date</th>
<th>Source Warehouse</th>
<th>Destination Warehouse</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br><br>
{% endblock %}
.js
$(document).ready(function(){
$('#search_order_form').submit(function(e){
e.preventDefault();
var serializedData = $(this).serialize();
var url = document.querySelector('#search_order_form').dataset.url
$.ajax({
type: 'POST',
url: url,
data: serializedData,
success: function(response){
$("#search_order_info").show();
$("#search_order_info_detail").show();
$('#search_order_form').trigger('reset');
// alert(response['ser_search_order_result'])
// alert(response['ser_search_order_result'].length)
for (var i=0; i<response['ser_search_order_result'].length;i++){
var fields = response['ser_search_order_result'][i];
// alert(ser_search_order_result)
$('#search_order_info tbody').append(
`<tr>
<td>${fields["sequence"]||""}</td>
<td>${fields["order_date"]||""}</td>
<td>${fields["source"]||""}</td>
<td>${fields["destination"]||""}</td>
</tr>`
)
$('#search_order_info').DataTable( {
"ajax": "data/arrays.txt",
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Click!</button>"
} ]
} );
$('#search_order_info').DataTable();
}
},
});
});
});
Replies
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin