How to add a button in data table flask - javascript

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')}},
]
} );

Related

How to display table with 2 headers using DataTables plugin?

I want to display similar table like W3.
Code:
$('table_1').DataTable({
ajax:'ajax_table_1.php',
paging:false,
});
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_1">
<caption>Delivery slots:</caption>
<tr>
<td></td>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
<tr>
<th scope="row">Morning</th>
<td>Closed</td>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<th scope="row">Evening</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
</tr>
</table>
HTML shows my goal which I want to achieve.
How to set up my data array that it should look like to implemented table with 2 headers to fill all table data with ajax call?

You can simply render your columns in order to achieve that check here for the docs
a short snippet to show what you can do is:
"columnDefs": [
{
"createdCell": function (td, cellData, rowData, row, col) {
$(td).attr("scope", "row");
}
"targets": 0 //this is your column number, just change it if you need another column
}
]

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

How to add extra field in datatable which is not database

I am trying to add edit and delete button in data table.
I have html
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Theater name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Theater name</th>
<th>Action</th>
</tr>
</tfoot>
</table>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres' ); ?>"
});
});
I tried adding column in thead and tbody but it is giving me alert saying
DataTables warning: table id=example - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4
Server returning data
{"draw":0,"recordsTotal":57,"recordsFiltered":57,"data":[["Tiger","Nixon"],["Garrett","Winters"],["Ashton","Cox"],["Cedric","Kelly"],["Airi","Satou"],["Brielle","Williamson"],["Herrod","Chandler"],["Rhona","Davidson"],["Colleen","Hurst"],["Sonya","Frost"],["Jena","Gaines"],["Quinn","Flynn"],["Charde","Marshall"],["Haley","Kennedy"],["Tatyana","Fitzpatrick"],["Michael","Silva"],["Paul","Byrd"],["Gloria","Little"],["Bradley","Greer"],["Dai","Rios"],["Jenette","Caldwell"],["Yuri","Berry"],["Caesar","Vance"],["Doris","Wilder"],["Angelica","Ramos"],["Gavin","Joyce"],["Jennifer","Chang"],["Brenden","Wagner"],["Fiona","Green"],["Shou","Itou"],["Michelle","House"],["Suki","Burks"],["Prescott","Bartlett"],["Gavin","Cortez"],["Martena","Mccray"],["Unity","Butler"],["Howard","Hatfield"],["Hope","Fuentes"],["Vivian","Harrell"],["Timothy","Mooney"],["Jackson","Bradshaw"],["Olivia","Liang"],["Bruno","Nash"],["Sakura","Yamamoto"],["Thor","Walton"],["Finn","Camacho"],["Serge","Baldwin"],["Zenaida","Frank"],["Zorita","Serrano"],["Jennifer","Acosta"],["Cara","Stevens"],["Hermione","Butler"],["Lael","Greer"],["Jonas","Alexander"],["Shad","Decker"],["Michael","Bruce"],["Donna","Snider"]]}
Can anyone help me solve this issue

You just need to add its HTML in your DataTable definition
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres' ); ?>",
"columns": [
{
"targets": -1,
"data": null,
"orderable": false,
"defaultContent": [
"<i class='glyphicon glyphicon-edit'></i>"+
"<i class='glyphicon glyphicon-trash'></i>"]
}
]
} );
DEMO : https://jsfiddle.net/Prakash_Thete/evfchh7q/
Change your table definition as below(Added one more header as you are sending data for two columns + edit button column).
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Theater name</th>
<th>One more header</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Theater name</th>
<th>One more header</th>
<th>Action</th>
</tr>
</tfoot>
</table>

Generating diff view using ng-repeat

I have a json containing revision/history info of modified entity which holds its old and new values. Diff is generated with https://github.com/benjamine/jsondiffpatch and I've done additional parsing myself to form final json format to be rendered.
Example data:
[
{
"createdBy": "admin#localhost",
"modifiedAt": 1445113889873,
"left": [
{
"Status": "Open"
}
],
"right": [
{
"Status": "In Progress"
}
]
},
{
"createdBy": "admin#localhost",
"modifiedAt": 1445114315786,
"left": [
{
"Description": "hello"
},
{
"Assignee": "Uncle Bob (test#test)"
}
],
"right": [
{
"Description": "bye"
},
{
"Assignee": "Willy Wonka (willy#hello)"
}
]
}
]
I am looking a nice way to form a table for this where for each revision I get separately left and right columns and values on separate rows. Probably tired, but I can't figure out how would ng-repeat work for this:
<div ng-repeat="(key, value) in vm.revisions | orderBy:'-modifiedAt'">
<table class="table">
<thead>
<tr>
<th width="20%">Field</th>
<th width="40%">Old Value</th>
<th width="40%">New Value</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
I am hoping for result like this:
Thanks in advance!

If I am right about data format:
<div ng-repeat="revision in vm.revisions | orderBy:'-modifiedAt'">
<table class="table">
<thead>
<tr>
<th width="20%">Field</th>
<th width="40%">Old Value</th>
<th width="40%">New Value</th>
</tr>
</thead>
<tbody ng-repeat="(index, left) in revision.left">
<tr ng-repeat="(field, leftValue) in left">
<td>{{field}}</td>
<td>{{leftValue}}</td>
<td>{{revision.right[index][field]}}</td>
</tr>
</tbody>
</table>
</div>
See it on jsfiddle: http://jsfiddle.net/q6zqgfr8/

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

Categories