We Keep Coding

How to add a button in data table flask

i got problem with add botton in boostrap datatable. Im now in flask (python), js please give me some tips or solution i will be very gratefull.
i want do something like this.
I try return botton with jsonify data. I try change js for it. But cant found right solution.
For fill date in table js code.
Html code
<div class="row-90">
<table class="table display" id="calEvents">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">GROUP</th>
<th scope="col">WEEKDAY</th>
<th scope="col">DATE</th>
<th scope="col">TICKER</th>
<th scope="col">EVENT</th>
<th scope="col">READX</th>
<th scope="col">ACTION</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">ID</th>
<th scope="col">GROUP</th>
<th scope="col">WEEKDAY</th>
<th scope="col">DATE</th>
<th scope="col">TICKER</th>
<th scope="col">EVENT</th>
<th scope="col">READX</th>
<th scope="col">ACTION</th>
</tr>
</tfoot>
</table>
</div>
js code
$('#calEvents').DataTable( {
'columnDefs': [
{
targets: 2, render: function(data1){ return moment(data1).format('dddd')},
}, //data-toggle="modal" data-target="#exampleModal"
{ targets: 3, render: function(data2){ return moment(data2).format('YYYY-MM-DD')}},
]
} );
Please help me. (this code without bootton code, because for now idk there place it(no one solution not working so...). Please not to judge me.

You can use the defaultContent attribute in DataTable to add additional buttons at in your table. (Reference)
$('#calEvents').DataTable( {
"processing": true,
"serverSide": false,
"order": [[ 3, "asc" ]],
"ajax": "/api/v1/calendar/get",
'columnDefs': [
{
targets: 2, render: function(data1){ return moment(data1).format('dddd')},
defaultContent: '<button class="btn-view" type="button">Edit</button>'
+ '<button class="btn-delete" type="button">Delete</button>'
},
{ targets: 3, render: function(data2){ return moment(data2).format('YYYY-MM-DD')}},
]
} );

Getting error "property 'style' of undefined" when delete a full column of datatable dynamically using javascript

This is my html code for table.
<table class="table table-striped table-bordered dt-responsive nowrap" id="log-details">
<thead>
<tr>
<th>User Name</th>
<th>Status</th>
<th>Date</th>
<th>time</th>
<th>TaskName</th>
<th>Location</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This my javascript Code:
function dataTableManipulate(mainArray){
table = $("#log-details").DataTable({
data: mainArray,
"searching": true,
"info": false,
"lengthChange":false,
"columnDefs": [{
"targets": [5],
render : function (data, type, row) {
return '<button class="btn btn-primary btn-xs " id = "btnShow">Show Map</button>';
}
}]
});
$('#tbl_details_length').after($('.datepic-top'));
}
$("#activitylog").click(function(){
tableData = generalMainArray
$('#log-details').dataTable().fnDestroy();
$('table tr').find('td:eq(4),th:eq(4)').remove();
dataTableManipulate(tableData);
});
Note: activitylog is a button.
I want to remove TaskName column from Datatable on activitylog button click.Any one help me for delete that column from datatable

DataTables warning: table id=example - Requested unknown parameter '1' for row 1, column 1

Getting error "DataTables warning: table id=example - Requested unknown parameter '1' for row 1, column 1. For more information about this error, please see http://datatables.net/tn/4" while loading the data from ajax api call the json received from the back end is as below
[{"CustomerName":"Dinesh","product":"23234","perticulars":"wrwer","AddressOfCustomer":"wrew`","ContactNumbers":"jhkjhb"}, {"CustomerName":"dd","product":"dfsdfs","perticulars":"fsdfs","AddressOfCustomer":"sdfsdf","ContactNumbers":"fsfsf"}, {"CustomerName":"Pratik","product":"toothbrush","perticulars":"6 inch","AddressOfCustomer":"shreedhama white rose","ContactNumbers":"9949634396"}]
Snippet of HTML div tag for which table data is being populated is as below.
<table id="example" class="display" align="center" vertical-align="middle"; cellspacing="0" width="100%">
<thead>
<tr>
<th>Customer Name</th>
<th>Product</th>
<th>Perticulars</th>
<th>Address of customer.</th>
<th>Contact number</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Customer Name</th>
<th>Product</th>
<th>Perticulars</th>
<th>Address of customer.</th>
<th>Contact number</th>
</tr>
</tfoot>
</table>
Below is the ajax call I am doing and in success function trying to populate data from the json
$.ajax({
url:'AddQuotation',
type:'get',
success:function(data){
alert(data);
var resultTable = $('#example').DataTable({
"columns": [
{ data: "CustomerName" },
{ data: "product" },
{ data: "perticulars" },
{ data: "AddressOfCustomer" },
{ data: "ContactNumbers" }
],
"destroy": true,
"dom": 'lrtip'
} );
resultTable.rows.add(data1).draw();
dataSet = data;
},
error:function(){
alert('error');
}
});

You need to have data object that includes your array of objects.
{"data": [{"CustomerName":"Dinesh","product":"23234","perticulars":"wrwer","AddressOfCustomer":"wrew`","ContactNumbers":"jhkjhb"}, {"CustomerName":"dd","product":"dfsdfs","perticulars":"fsdfs","AddressOfCustomer":"sdfsdf","ContactNumbers":"fsfsf"}, {"CustomerName":"Pratik","product":"toothbrush","perticulars":"6 inch","AddressOfCustomer":"shreedhama white rose","ContactNumbers":"9949634396"}]}
A working DEMO.

In my case I just changed the following in my code and the error
DataTables warning: table id=bootstrap-data-table2 - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4
was gone:
From:
<tbody>
#foreach (var item in Model.HRMS_Tbl_ExpenseClaimModelList)
{
<tr>
#if (item.Approved == "1")
{
<td>#item.Date</td>
<td>#item.Date</td>
<td>#item.Type</td>
<td>#item.Amount</td>
}
</tr>
}
</tbody>
To:
<tbody>
#foreach (var item in Model.HRMS_Tbl_ExpenseClaimModelList)
{
if (item.Approved == "1")
{
<tr>
<td>#item.Date</td>
<td>#item.Date</td>
<td>#item.Type</td>
<td>#item.Amount</td>
</tr>
}
}
</tbody>

Filter columns with DataTables Buttons based on attribute value

I have a custom button above my DataTables. When pressed I want it to filter the first column on a attribute value since this column cells only contain images (flags of countries/regions).
My table looks like this:
<table id="example">
<thead>
<tr>
<th>Region</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td data-order="United States"><img src="img/region_usa.png"></td>
<td>George</td>
<td>Washington</td>
</tr>
<tr>
<td data-order="Europe"><img src="img/region_eur.png"></td>
<td>Michael</td>
<td>Ferguson</td>
</tr>
<tr>
<td data-order="Japan"><img src="img/region_jap.png"></td>
<td>Yuka</td>
<td>Sakamari</td>
</tr>
</tbody>
</table>
This is my initilization:
$('#example').DataTable({
buttons: [
{
text: "Filter: USA",
action: function(e, dt, node, config){
dt.column(0).search("United States").draw();
}
}
]
})
However this doesn't do anything unfortunately. What am I doing wrong?
I used Buttons collection, Buttons.action and column.search() as reference.

Remember import datatTables.buttons.js
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
change your attr data-order by data-search (check HTML5 attr https://datatables.net/examples/advanced_init/html5-data-attributes.html)
...
<td data-search="United States"><img src="img/region_usa.png"></td>
...
and indicate the dom.
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
{
text: "Filter: United States",
action: function(e, dt, node, config){
dt.column(0).search("United States").draw();
}
}
]
})
});
Result : https://jsfiddle.net/cmedina/7kfmyw6x/63/

How can I make my dynamic JSP table scrollable and sortable in ascending and descending order?

I want to display data from a database in a JSP table dynamically. I'd like to make my table scrollable, sortable (ascending and descending), searchable and paginatable.
See this link for example; you'll find a table with sortable columns, search functionality and paginating.
I would like to achieve something similar to that datatable.
The JSP page looks like this
<html>
<body>
<div class="container" style="overflow:scroll;
height:250px;width:100%;overflow:auto">
<TABLE id="example" class="table table-striped">
<thead>
<TR valign=top class="header">
<TH bgcolor="#008000">ATM Site No</TH>
<TH bgcolor="#008000">ATM Location</TH>
<TH bgcolor="#008000">LHO</TH>
<TH bgcolor="#008000">Cash</TH>
<TH bgcolor="#008000">Non Cash</TH>
<TH bgcolor="#008000">Revenue</TH>
<TH bgcolor="#008000">Up Time</TH>
<TH bgcolor="#008000">Up Time Date</TH>
</TR>
</thead>
<s:iterator value="uptimeBeans">
<tbody>
<TR valign=top>
<TD><s:property value="ATM_Site_No"/></TD>
<TD><s:property value="ATM_Location"/></TD>
<TD><s:property value="LHO"/></TD>
<TD><s:property value="Cash"/></TD>
<TD><s:property value="Non Cash"/></TD>
<TD><s:property value="Revenue"/></TD>
<TD><s:property value="Up Time"/></TD>
<TD><s:property value="Up Time Date"/></TD>
</TR>
</tbody>
</s:iterator>
</TABLE>
</div>
</body>
</html>

You just need to call this script for using datable after adding jquery and datatable js :-
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": 200,
"scrollX": true,
"order": [[ 1, "desc" ]]
} );
} );
Here, 1 is column no. needed to sort , you can change it as per need.
Refer datatable intialization
datatable sorting
datatable scrolling

Use this script for dynamic sorting in datatable.
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
please refer this URL for dynamic sorting in datatable:
https://datatables.net/examples/basic_init/table_sorting.html