We Keep Coding

Footnotes at the bottom of Datatables

My table looks like the following:
And basically I just want a row below the table indicating what the small red 1 and 2 means on their respective rows. I cannot find anything online to do with comments or footnotes in datatables. And I have tried to use the tfoot tag and append it to that but it looks awful (which I assume is datatables not agreeing with that method). Anyone know a solution for this?
HTML:
<table id="'.$id.'" class="table table-bordered dt-responsive" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<thead>
<tr>'.$tableHeadings.'</tr>
</thead>
<tbody>
'.$tableContent.'>
</tbody>
<tfoot>
<td>A note here explaining something important.</td>
</tfoot>
</table>
Javascript:
$(function() {
let table;
table = $('#table_preview').DataTable({
"pageLength": 25,
"processing": true,
"ajax": {
"url": '/assets/ajax/table_ajax_handler.php',
"type": "POST",
"data": { action: "getPesticidesForTable" }
},
"columns": [
{ "data": "crop" },
{ "data": "diseases" },
{ "data": "chemical" },
{ "data": "product" },
{ "data": "rate" },
{ "data": "max_no" },
{ "data": "hi" },
{ "data": "mrl" },
{ "data": "pcs_no" },
{ "data": "supplier" }
],
"searchCols": [
{ "search": '<?=$crop?>' || null },
{ "search": '<?=$disease?>' || null }
],
"columnDefs" : [
{
"targets": [0],
"visible": false,
"searchable": true
},
{
"targets": [1],
"visible": false,
"searchable": true
}
],
"order": [[ 2, "asc" ]],
"rowsGroup": [2, 4, 5, 6, 7, 8, 9]
});
});

You can include a <tfoot> section in the HTML, and then use a colspan to allow the text to extend beyond the first column.
For example, assuming a table with 6 columns:
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<td colspan="2">A note here explaining something important.</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
This looks like the following:
If your text might expand the full width of the footer, then you can use this:
<tfoot>
<tr>
<td colspan="6">A very much longer note here explaining something extremely important.</td>
</tr>
</tfoot>
The number of cells in the footer (also accounting for any colspans) must match the number of cells in a row.
Background note - there are some limitations to using colspans in DataTables. See complex headers for more information.

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

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>

jquery dataTable filter/search not working

I am new to jquery and I have used the jqueryData Table, I am facing problem in during search,
Search is working for first two columns (ex., if I search using 'QE5855' or 3453457 its working fine),
But its not searching for the third column (ex., if I enter 'United' or 'united states' table is not getting sorted) , Please help me.
<table id="agentDetails">
<tr style="">
<th width="22%">User Id</th>
<th width="20%">Parent Id</th>
<th width="35%">Country</th>
</tr>
<%
for(UserDataModel getEachEmpDetails:phoneIdSiteMappingList){
%>
<tr>
<td> <div><%=getEachEmpDetails.getUserUid %> </div> </td> // data is like 'QE5855'
<td><div><%=getEachEmpDetails.getParentUid %> </div> </td> //data is like '3453457'
<td><div><%=getEachEmpDetails.getCountry %> </div> </td>// data is like 'United States'
</tr>
<%
}
<%
<script type="text/javascript">
$( document ).ready(function() {
var table = $("#agentDetails").DataTable({
"bSort": false,
"iDisplayLength": 10 ,
"sPaginationType": "full_numbers",
"bSearchable":true,
"bPaginate": true,
"bFilter": true,
"sDom": '<"top"fip>',
"bStateSave": false,
"oLanguage": {
"sInfo": "Showing _START_ to _END_ of _TOTAL_ messages",
"sInfoEmpty": "Showing 0 to 0 of 0 messages",
"sEmptyTable": " ",
"sSearch": "&nbsp&nbsp&nbsp",
"oPaginate": {
"sPrevious": "<",
"sNext": ">",
"sFirst":"",
"sLast":""
},
dom: 'T<"clear">lfrtip',
tableTools: {
"sRowSelect": "single"
}
}
});
});
<script>

I'm not sure which version of Datatable are you using but I hope this helps. I should to say that I didn't test it, so the example is just the main idea where I think the problem is.
On your JS code you can indicate the source from you want to retrieve the data on the table, in this case I'm using C# so I use "Url.Action". You should to indicate that in sAjaxSource. Example is something like this...
var oTable;
$(function() {
oTable = $('#agentDetails')
.dataTable({
"bServerSide": true,
"bProcessing": true,
"bSort": true,
"sAjaxSource": "#Url.Action("Method")",
"sPaginationType": "full_numbers",
"bSearchable":true,
"bFilter": true,
"sDom": '<"top"fip>',
"bInfo": true,
"bLengthChange": false,
"aoColumns": [
{ "mData": "UserId" },
{ "mData": "ParentId", "width": "22%", "bSortable": true},
{ "mData": "Country", "width": "35%" },
],
});
On aoColumns "mData" means the way than you al mapping the date that are you getting of your method so you should exactly the name of the var that contains that value in your model. After that you don't need to use a for clause and the datatable should to be able to handled the searching and filter for it self.
Example
<table id="agentDetails" >
<thead>
<tr>
<th>User Id</th>
<th>Parent Id</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

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