I have this simple html table
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyName</td>
<td onclick="delete()">X</td>
<td onclick="update()">U</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#mytable').DataTable();
});
</script>
If i open this on the browser i get
"Cannot read property 'mData' of undefined".
I don't undestand where is the problem.. I am following the official example: https://datatables.net/examples/basic_init/complex_header.html
Thank you all!
your html have unmatched number of columns, notice the first row of your header has colspan while the second row doesn't.
what you can do is to provide a rowspan.
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
here's a link to the datatables example of complex headers. https://datatables.net/examples/basic_init/complex_header.html
Related
I have a scenario where I am filling my data table based on data received over a websocket. So I guess the best approach would be to create an empty table in html and then add the data via the API.
So say I want my final table to appear something like:
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">Tiger Nixon</td>
<td class="position">System Architect</td>
<td class="office">Edinburgh</td>
<td class="age">61</td>
<td class="start-date">2011/04/25</td>
<td class="salary">$320,800</td>
</tr>
<tr>
<td class="name">Garrett Winters</td>
<td class="position">Accountant</td>
<td class="office">Tokyo</td>
<td class="age">63</td>
<td class="start-date">2011/07/25</td>
<td class="salary">$170,750</td>
</tr>
</tbody>
</table>
When dynamically loading my table I would only define the first part:
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
And then call row.add() in my javascript as the data is received.
But how do I set the default classes for my column cells this way?
When you use row.add(), the return value is the newly created (but not yet displayed) row.
You can use this value to iterate over the cells in the row, where class names can be added. Finally you can draw the row, so it is displayed.
The following shows the basic approach, where we have a pre-defined array of the class names you want to handle:
$(document).ready(function() {
var classNames = [ 'name', 'position' ];
var table = $('#example').DataTable();
var row = table.row.add( ['Quinn Flynn', 'Accountant'] );
var i = 0;
row.cells().every( function () {
var node = this.node();
$( node ).addClass( classNames[i++] );
} );
row.draw();
});
That final section of code from row creation to the row draw would be placed in a function, in your case.
This produces an HTML body as follows:
<tbody>
<tr role="row" class="odd">
<td class="name sorting_1">Quinn Flynn</td>
<td class="position">Accountant</td>
</tr>
</tbody>
Say I have the following table:
<table>
<thead>
<th>ID</th>
<th colspan="2">Full Name</th>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Rasmus</td>
<td>Lerdorf</td>
</tr>
</tbody>
</table>
The first and last names are in two separate cells for formatting and readability reasons. By default, datatables ignores the colspan'd Full Name header cell, and won't make it toggle the sorting.
Is there a way to force datatables to explicitly make either of the columns in the table body sortable? For example, I want to sort by the last name only.
I searched, but only found several year old hacks and workarounds (e.g. creating empty columns etc.)
DataTables support rowspan and colspan in table header but only if there is one th cell for each column.
For example
<table>
<thead>
<tr>
<th rowspan="2">ID</th>
<th colspan="2">Full Name</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Rasmus</td>
<td>Lerdorf</td>
</tr>
</tbody>
</table>
I want create a one <table> where multiple custom elements can have multiple <tr> components.
I tried using containerless, but element get rendered outside of <table>.
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<order-line repeat.for="line of lines" line.to-view="line" containerless></order-line>
</tbody>
</table>
And custom element looks like
<template>
<tr>
<td>${line.position}</td>
<td>${line.name}</td>
</tr>
<tr if.to-view="detailsVisible">
<td colspan="2">${line.complicatedDescription}</td>
</tr>
</template>
How I can get a table row with details as another <tr> element within one aurelia CustomElement?
This is a limitation of the html spec. A <table> element cannot contain elements other than <tbody>, <tr>, etc.
You can use as-element to overcome this limitation:
<tr as-element="order-line" repeat.for="line of lines" line.to-view="line" containerless></tr>
This tells the template compiler that this <tr> is in fact an order-line custom element and to process it as such. At the same time, it "fools" the browser into thinking that this is just an ordinary <tr>
<table> can contain multiple <tbody> elements, this will allow to wrap multiple <tr> elements inside custom element with <tbody>.
/* custom element */
<template>
<tbody>
<tr>
<td>${line.position}</td>
<td>${line.name}</td>
</tr>
<tr if.to-view="detailsVisible">
<td colspan="2">${line.complicatedDescription}</td>
</tr>
</tbody>
</template>
Use as custom element inside
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
</tr>
</thead>
<order-line repeat.for="line of lines" line.to-view="line"></order-line>
</table>
I am trying to right align the values, but those are not aligning properly to the end of the column.
Example code:
<table id="demoTable1" cellspacing="0" cellpadding="0" border="1">
<thead>
<tr>
<th style="text-align:right; width:23%"><bean:message key="label.amount"/></th>
</tr>
</thead>
<tbody >
<c:forEach items="${demoForm.amount}" var="amt" >
<tr>
<td dntitle="myAmt" style="text-align:right; width:23%">
<util:myCurrency name="amt" property="amtList" currProperty="curCode"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
And the Output looks like this:
How can I fix this?
Having a semantics issue. I have a basic table with a standard header and footer. Each row contains an order, beneath each row I need to display another table, that will contain a break down of costs relating to that order. Additionally, these inner tables will be displayed with a jQuery accordion to hide and show when required (but I'm just concentrating on the HTML for now)
How can I semantically approach this in HTML?
<table>
<thead>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</thead>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</thead>
<tbody>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tbody>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Here's a fiddle: http://jsfiddle.net/yuW7f/ - The problem here is that the row containing the inner table, is totally unrelated to the order row
If you are looking for a parent element you can use to group related rows, you can use <tbody> elements. A table can have multiple <tbody> elements:
<table>
<thead>
<tr>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<tr>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Whether or not that makes your code more semantically correct is debatable. You could also give your rows classes to indicate whether the row is a summary row or a detail row, or attributes to indicate relationships to other rows. Semantically, it seems fine as it is to me.
By the way, you are missing some <tr> elements. A <tbody>, <thead>, or <tfoot> element does not replace a <tr> element.