I am hitting a controller and passing back an array which i loop through and then pass into a datatable.
When i first pass data into the datatable, for some reason it is adding a blank row, although if i then clear the table, and add exactly the same data, it doesn't.
I'm not doing anything fancy, just a really basic DT.
for (i = 0; i < data.length; i++) {
$('#workcarriedouttable').dataTable().fnAddData([
data[i].DateStarted,
data[i].TimeStarted,
data[i].DateEnded,
data[i].TimeEnded,
data[i].WorkDetails,
data[i].WorkCost
]);
}
I have stepped through my code and the array does not contain any blank records, so i assume this is happening only when the DT is first initialized.
Which is simply
$('#workcarriedouttable').dataTable()
Table structur
<table id="workcarriedouttable" class="display">
<thead>
<tr>
<th style="width:30px;">Date Start</th>
<th style="width:30px;">Time Start</th>
<th style="width:30px;">Date End</th>
<th style="width:30px;">Time End</th>
<th style="width:240px;">Details</th>
<th style="width:30px;">Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Anyone know of a fix for this?
Related
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
}
]
Can anyone help me learn how to convert an HTML table into a dynamic Javascript table using the for loop? This is an example I found in my book and wanted to see how I could go about doing this.
Heading There is sections of the table that need to have the rows combined and he columns combined. I have been struggling with this for some time. Any help would be appreciated. I did not include the CSS portion of the code only the table.
<html>
<body>
<table class="table">
<tr>
<th colspan= "3" class= "MH">Conversion Tables</th>
</tr>
<tr>
<th rowspan="3" class="heading1">Meters to
<br />Feet</th>
<td>1 meter</td>
<td>3.28 feet</td>
</tr>
<tr class="difrow">
<td>50 meters</td>
<td>164.04 feet</td>
</tr>
<tr>
<td>100 meters</td>
<td>328.08 feet</td>
</tr>
<tr class="difrow">
<th rowspan="3" class="heading1">Kilometers to
<br />Miles</th>
<td>1 kilometer</td>
<td>0.62 miles</td>
</tr>
<tr>
<td>50 kilometers</td>
<td>31.07 miles</td>
</tr>
<tr class="difrow">
<td>100 kilometers</td>
<td>62.14 miles</td>
</tr>
</table>
</body>
</html>
you can add id attribute to table tag then call a javascript method on page load:
<table class="table" id="tableId">
function createRows(){
var items = "<tr><td></td></tr>...";
document.getElementById("tableId").innerHTML = items;
}
in javascript method you can use for to generate table rows.
I have been learning about DOMs lately and have been stuck on a problem for days. For some reason, I cannot change the contents of a html table. I have been looking at w3 schools HTML and using DOM to change the table element.
Here is the code for the table :
<div id="courseSummaryContainer" class="tab">
<table cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
<thead><tr>
<th>Name</th>
<th>Description</th>
<th>Date of entry</th>
<th>Rating</th>
<th>Grade</th>
<th>Submission entry type</th>
</tr></thead>
<tbody>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
<td>Final</td>
</tr>
<tr class="row-odd">
<td>Alabama</td>
<td>Regional area health</td>
<td>201606</td>
<td>0100</td>
<td>7</td>
<td>Final</td>
</tr>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
<td>Final</td>
</tr>
</tbody>
</table>
</div>
What I have been trying to do is change the names of the states and their values. To do so, I have been trying to access the <td> element.
To change the contents, I tried the following:
Say for example want to change "Illinois" to "Georgia" I tried the following
document.getElementById("table.summaryTable.courseSummary.smallFontTable").rows[2].cells;
x[1].innerHTML = "Georgia";
I am not sure what I am doing wrong however the console keeps giving errors all the time stating the values are null.
Can somebody please offer their guidance?
Use document#querySelector. In this case a simple selector can be .row-even > td:first-child because you only have one .row-even.
How can you be more specific?
If you've got multiple .row-even, by using tbody > tr:nth-child(1) > td:first-child.
If you have multiple tables with .row-even, you can add the id of the container #courseSummaryContainer .row-even > td:first-child or the class of the table .courseSummary .row-even > td:first-child.
var td = document.querySelector('.row-even > td:first-child');
td.innerText = 'Georgia';
<div id="courseSummaryContainer" class="tab">
<table cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
<thead><tr>
<th>Name</th>
<th>Description</th>
<th>Date of entry</th>
<th>Rating</th>
<th>Grade</th>
<th>Submission entry type</th>
</tr></thead>
<tbody>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
<td>Final</td>
</tr>
<tr class="row-odd">
<td>Alabama</td>
<td>Regional area health</td>
<td>201606</td>
<td>0100</td>
<td>7</td>
<td>Final</td>
</tr>
</tbody>
</table>
</div>
You are not getting the right element in the DOM, if you are going to use the function: "getElementById", you need to pass it the id of the element that you want to have, like:
html:
<div id="courseSummaryContainer" class="tab">
<table id="myTable" cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
//... Table content
</table>
</div>
js:
document.getElementById("myTable").rows[2].cells;
I'm using #Mottie's excellent fork of Tablesorter and would like to be able to filter table column(s) with external links.
It isn't strictly necessary, but I'd like to make multiple clicks toggle the filter on and off. Alternatively, I could always add an All Records link that resets the column(s).
I don't need to combine filters in a single column. In other words, the data wouldn't be both January and October.
I found a table sort with external link demo, but that one sorts, not filters, and it doesn't toggle.
I also found a table filter with buttons demo which is pretty close. However, as I mentioned, I'd really like links instead, would like to have the links toggle if possible, and don't need the filters to combine.
Thanks in advance.
This was actually a lot easier than I thought. Here's a working demo that came directly from Mottie's demo code above. I replaced the buttons with links, renamed the associated class so it made more sense and replaced the class on the JavaScript function to match the one on the links.
Fair warning: I don't claim to know everything, so my modifications could have very silly errors.
$('.link-filter').click(function() {
var filters = $('table').find('input.tablesorter-filter'),
col = $(this).data('filter-column'),
txt = $(this).data('filter-text');
// filters.val('');
filters.eq(col).val(txt).trigger('search', false);
});
The filters in the various columns combine, but I only need a single column filter at the moment, so that's not really an issue for me.
Country:<br>
All Countries |
Netherlands |
Belgium |
Germany
<br /><br />
<table id="festivaloverzichttable" class="tablesorter">
<thead>
<tr>
<th width="17%" data-placeholder="Search...">Event</th>
<th width="18%" data-placeholder="Search...">Date</th>
<th width="9%" data-placeholder="Search...">Duration</th>
<th width="12%" data-placeholder="Search...">Place</th>
<th width="10%" data-placeholder="Search...">Country</th>
<th data-placeholder="Zoek...">Genre(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Event 1</td>
<td data-date="06-02">TBA</td>
<td>2</td>
<td>Oisterwijk</td>
<td>Netherlands</td>
<td>Hardstyle</td>
</tr>
<tr>
<td>Event 2</td>
<td data-date="10-11">11 October t/m 13 October</td>
<td>3</td>
<td>Volkel</td>
<td>Netherlands</td>
<td>Pop, Rock, Urban, Electronic</td>
</tr>
<tr>
<td>Event 3</td>
<td data-date="06-02">TBA</td>
<td>1</td>
<td>Amsterdam</td>
<td>Netherlands</td>
<td>Electronic</td>
</tr>
<tr>
<td>Event 4</td>
<td data-date="09-01">TBA</td>
<td>1</td>
<td>Utrecht</td>
<td>Netherlands</td>
<td>Electronic, Urban</td>
</tr>
<tr>
<td>Event 5</td>
<td data-date="07-06">6 July - 7 July</td>
<td>2</td>
<td>Beek en Donk</td>
<td>Netherlands</td>
<td>Electronic, Hardstyle</td>
</tr>
...
</tbody>
</table>
Javascript
$("#festivaloverzichttable").tablesorter({
sortList: [[0, 0]],
widgets: ['zebra', 'filter', 'saveSort'],
widgetOptions: {
filter_reset: 'button.reset'
}
});
$('.link-filter').click(function() {
var filters = $('table').find('input.tablesorter-filter'),
col = $(this).data('filter-column'),
txt = $(this).data('filter-text');
// filters.val('');
filters.eq(col).val(txt).trigger('search', false);
});
This is the first table on the page by the way. I want to be able to change the value of the td elements by referencing their position.
So, if I could state the 3rd td element in a specific table>tr pathway that would be great. And then to replace the text value. The text itself repeats a lot so I can't do a search for specific text values.
Also some of the td values are blank <td> </td>. And I would like to replace the blank table values as well. The tr class names are identical.
<table><tbody>
<tr class="table-header"><td colspan="4"><h3>First</h3></td></tr>
<tr class="table-header">
<th class="col">Number</th>
<th class="col">Name</th>
<th class="col">Quantity</th>
<th class="col">Type</th>
</tr>
<tr class="left-bottom-border">
<td>element 1</td>
<td>element3</td>
<td>element2</td>
<td>element3</td>
</tr>
<tr class="left-bottom-border">
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr class="left-bottom-border">
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>blank</td>
</tr>
<tr class="left-bottom-border">
<td>I don't</td>
<td>think this matters</td>
<td>but I'm going to replace</td>
<td>all of the data</td>
</tr>
<tr class="table-header"><td colspan="4"><h3>Second Table</h3></td></tr>
<tr class="table-header">
<th class="col">Number</th>
<th class="col">Name</th>
<th class="col">Quantity</th>
<th class="col">Type</th>
</tr>
<tr class="left-bottom-border">
<td>More</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr class="left-bottom-border">
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr class="table-header"><td colspan="4"><h3>Third Table</h3></td></tr>
<tr class="table-header">
<th class="col">Number</th>
<th class="col">Name</th>
<th class="col">Quantity</th>
<th class="col">Type</th>
</tr>
<tr class="left-bottom-border">
<td>element 1</td>
<td>element3</td>
<td>element2</td>
<td>element3</td>
</tr>
<tr class="left-bottom-border">
<td>so more elements</td>
<td>yada</td>
<td>yada</td>
<td>ya</td>
</tr>
<tr class="left-bottom-border">
<td>x</td>
<td>y</td>
<td>z</td>
<td>aa</td>
</tr>
</tbody></table>
Use document.querySelector()Doc to get the table, then use the .rowsDoc and .cellsDoc properties to get a particular <td> (or <th>) cell.
For example, for the code shown in the question, this will change the third row, first column ("element 1"):
var fstTable = document.querySelector ("body > table:nth-of-type(1)");
fstTable.rows[2].cells[0].textContent = "*changed*";
You can see this code in action at jsFiddle.
To find and replace blank cells, you could use the :empty selector with querySelectorAll -- except that this works poorly in practice due to stray whitespace.
The more robust alternative is to actually check the content of the cells. Like so:
var fstTable = document.querySelector ("body > table:nth-of-type(1)");
/*-- This only works when there is no stray whitespace:
var emptyCells = fstTable.querySelectorAll ("td:empty");
*/
var emptyCells = fstTable.querySelectorAll ("td");
for (var J = emptyCells.length - 1; J >= 0; --J) {
if (emptyCells[J].textContent.trim () == "") {
emptyCells[J].textContent = "*was blank*";
}
}
.trim() removes leading and trailing whitespace.
this javascript code let's you replace the content of a TD by it's index where 0 is the first element.
var tbl=document.getElementsByTagName("table")[0]; //get the first TABLE
var trs=tbl.getElementsByTagName('tr'); //get all TR's in that table
var replaceTD=function(TRindex,TDindex,value){
trs[TRindex].getElementsByTagName('td')[TDindex].innerHTML=value; // replaced with innerText
};
to change the second TD of the first TR that is not a title (so the third)
your indexes will be TRindex=2 cause it starts from 0 ...
and the TDindex=1
and the function you will call is :
replaceTD(2,1,'WHATEVER');