I have the following html code for table:
<table id="employeeDetails" class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Country</th>
<th>Team</th>
</tr>
</thead>
</table>
And the following code for dataTable initialization:
$('#employeeDetailsTable').dataTable({
"processing":true,
"ajax" : {
"url" : '/fetchSearchResults',
"type" : 'POST'
}
}
});
I read in many places on the internet that sorting feature and search box in datatable is not provided if colspan is used. Even after not using colspan I'm not getting these features in my datatable. What can be the possible reason for this?
Related
So I want to add a class to my table rows except the header but I can't figure out how to do it. Does somebody know how i can do this?
this is my table:
<table id="table" class="hidden table table-bordered table-striped table-hover">
<thead>
<tr>
<th data-field="variant">Variant</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
and this is currently where i add the data and want to add the classes to the rows
$('#table').bootstrapTable({
data: returnValue
});
look at the bootstrap table documentation and use the row style properties,
I'm not familiar with that plugin but I guess it should be something like this
$('#table').bootstrapTable({
data: returnValue,
rowStyle : function(row, index) {
return {
classes: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"}
};
}
});
read the docs here http://bootstrap-table.wenzhixin.net.cn/documentation/
1st : add tbody tag in html table
2nd : simple add the class for you tbody tr only like this
$('#table tbody tr').addClass("newclass");
HTML :
<table id="table" class="hidden table table-bordered table-striped table-hover">
<thead>
<tr>
<th data-field="variant">Variant</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody> //tbody added here
<tr>
....
</tr>
</tbody>
</table>
In jquery
$('#table tbody tr').addClass("newclass");
I have a below table code. I would like to get the table row value which has class as"highlight", below is the code which i tried but i am getting null. Please someone help.
table name = itemtable; table rows will be loaded dynamically using jquery.
<table cellspacing="0" cellpadding="0" id="itemtable" class="t1" border="1px">
<thead>
<tr>
<th> SLno</th>
<th>Item code</th>
<th>Item name</th>
<th>Received qty</th>
<th>Insp Date</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</thead>
<tbody></tbody>
</table>
using below code to highlight the row using class ".highlight" when user db click on itemtable row.
$(document).on("dblclick", "#itemtable tr", function (e) {
//high light the table row
$('#itemtable tr').not(this).removeClass('highlight');
$(this).toggleClass('highlight');
});
now i am trying to get one of the value say first , which has class as highlight( ie row which is selected) in another flow of program (after highlight).
var selectedrow = $('#itemtable tr.highlight');
var slno = $(this).closest("tr").find('td:eq(2)').text();
Like this?
var selectedRow = $('#itemtable tr.highlight');
var slno = selectedRow.find('td:eq(2)').text();
Below code is working.
var selectedrow = $('.highlight');
var slno = selectedrow.closest("tr").find('td:eq(0)').text();
It totally depends on the ajax response. It would be better if you had share the ajax code. Though try with below code:
<table id="itemtable">
<thead>
<tr>
<th>SLno</th>
<th>Item code</th>
<th>Item name</th>
<th>Received qty</th>
<th>Insp Date</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
...Your ajax response will append here...
</tbody>
</table>
JQuery Code:
$(document).ready(function(){
setTimeout(function(){
$('table#itemtable').find('tr.highlight').each(function(i, v){
$(v).find('td').each(function(v1){
console.log($(this).text());
});
});
}, 4000);
});
Let me know if it works for you. I have added a fiddle.
I'm currently trying to fill dynamically a table with content retrieved from a JSON Object.
Here is the table:
<table id="datatable_tabletools" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">ID</th>
<th data-class="expand">Nom</th>
<th data-hide="phone">Commentaires</th>
<th data-hide="phone,tablet">Date</th>
<th data-hide="phone,tablet">Attachements</th>
<th data-hide="phone,tablet">Actions</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
I have multiple interesting features in the table such as a search option, a filter, sort, export as PDF, etc,....those features are working properly if I'm including static content such as:
<tr>
<td>33</td>
<td>Bevis</td>
<td>1-955-717-0835</td>
<td>Est Ac Inc.</td>
<td>7424</td>
<td>Ichtegem</td>
</tr>
but as soon as I retrieve data table content from My JSON object, I'm not able to use those features anymore, sort doesn't work, search neither.
Here is the JavaScript I'm using:
$(document).ready(function() {
$.get('getAllDocuments', function(responseJson) {
if (responseJson != null) {
var table1 = $("#table");
$.each(responseJson, function(key, value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['id']);
rowNew.children().eq(1).text(value['nom']);
rowNew.children().eq(2).text(value['commentaire']);
rowNew.children().eq(3).text(value['date']);
rowNew.children().eq(4).text(value['id']);
rowNew.children().eq(5).html("Voir Supprimer");
rowNew.appendTo(table1);
});
}
});
});
My table is filled correctly, but not all the functions associated. any idea on how I can fill my table with JSON content in a proper way?
I think you can use ajax option of DataTables like:
var table = $('#example').DataTable( {
ajax: 'data.json'
});
P.S. here is the documentation
So I've been messing around with Datatables.js but I can't seem to populate it with results. So I have a Java servlet that returns the following JSON:
[{"fileName":"report (1).xlsx","fileSize":"82 KB","fileDate":"07/13/2016 15:19:43"},{"fileName":"report (2).xlsx","fileSize":"11 KB","fileDate":"07/07/2016 11:35:47"},{"fileName":"report (3).xlsx","fileSize":"11 KB","fileDate":"07/07/2016 11:35:47"},{"fileName":"report (4).xlsx","fileSize":"9 KB","fileDate":"07/13/2016 15:20:54"}]
My HTML looks likes:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>Date</th>
</tr>
</thead>
</table>
My JS looks like:
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"processing": true,
"ajax": {
"url": "/TR3Application/FileViewerServlet",
"dataSrc": "",
"type": "GET"
}
} );
});
When I just call AJAX and log what it returns, I'm getting the exact same JSON response from the servlet. But the Datatables don't seem to populate anything. What am I doing wrong?
You need to let dataTables knows the columns - Json mapping.
<tr>
<th data-data="fileName">Name</th>
<th data-data="fileSize">Size</th>
<th data-data="fileDate">Date</th>
</tr>
so, I am using datatables along with jQuery, and am a bit stumped as to why this is not working. My HTML looks like this:
<table id="surnamePrimaryPartitionTable" border=1 class="display partitionDisplay">
<caption>Partitions</caption>
<thead>
<tr style="background-color: #afeeee;">
<th>Partition</th>
<th>CPU %</th>
<th>Search Count</th>
<th>Person Count</th>
<th>Disk Space</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I have several tables, each of which follows a similar format, and each of which uses the partitionDisplay class (really just a class that I use so that I can select all the tables later using jQuery).
So, the problem arises when I try to destroy the datatables. Here is what I have:
function DeletePartitionInformation(data) {
jQuery(".partitionDisplay").each(function(){
jQuery(this).dataTable().fnDestroy();
});
jQuery("table tbody").each(function() {
jQuery(this).html("");
})
}
This code seems to work correctly for the first table, but throws an exception and doesn't work on any subsequent tables. The javascript error message I am getting is the following:
Uncaught TypeError: Cannot read property 'asSorting' of undefined
A quick Google search on this error says that it generally arises from having elements nested in a tag. This does not appear to be the problem, however. I will post the code for the other three tables to demonstrate this:
<table id="surnamePrimarySubpartitionTable" border=1 class="display partitionDisplay">
<caption>SubPartitions</caption>
<thead>
<tr style="background-color: #afeeee;">
<th>Partition</th>
<th>SubPartition</th>
<th>CPU %</th>
<th>Search Count</th>
<th>Person Count</th>
<th>Disk Space</th>
<th>Begin</th>
<th>End</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="givenNullSurnamePartitionTable" border=1 class="display partitionDisplay">
<caption>Partitions</caption>
<thead>
<tr style="background-color: #98fb98;">
<th>Partition</th>
<th>CPU %</th>
<th>Search Count</th>
<th>Person Count</th>
<th>Disk Space</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="givenNullSurnameSubpartitionTable" border=1 class="display partitionDisplay">
<caption>SubPartitions</caption>
<thead>
<tr style="background-color: #98fb98;">
<th>Partition</th>
<th>SubPartition</th>
<th>CPU %</th>
<th>Search Count</th>
<th>Person Count</th>
<th>Disk Space</th>
<th>Begin</th>
<th>End</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
One final note: I am actually able to get the behavior I want if I use the below code. Obviously I would prefer not to, however, since I'd really like to loop over the elements rather than hard-code the element id's in.
function DeletePartitionInformation(data) {
jQuery("#surnamePrimarySubpartitionTable").dataTable().fnDestroy();
jQuery("#surnamePrimaryPartitionTable").dataTable().fnDestroy();
jQuery("#givenNullSurnameSubpartitionTable").dataTable().fnDestroy();
jQuery("#givenNullSurnamePartitionTable").dataTable().fnDestroy();
jQuery("table tbody").each(function() {
jQuery(this).html("");
})
}
Uncaught TypeError: Cannot read property 'asSorting' of undefined
This seems to suggest it may be trying to destroy dataTables that weren't created.
The static fnTables should give you an Array of only the <table> elements with a dataTable:
var tables = $.fn.dataTable.fnTables(true);
$(tables).each(function () {
$(this).dataTable().fnDestroy();
});