In one of my projects I am using datatables. This is one column structure in my table which is causing an error:
<th>
<table class="table table-bordered table-condesed">
<thead>
<tr>
<th colspan="7" class="text-center">Day Run</th>
</tr>
</thead>
<tbody>
<tr>
<td>M</td>
<td>T</td>
<td>W</td>
<td>T</td>
<td>F</td>
<td>S</td>
<td>S</td>
</tr>
</tbody>
</table>
</th>
Also this is the respective column:
<td>
<table class="table table-bordered">
<tbody>
<tr>
<td tabindex="0">N</td>
<td>N</td>
<td>N</td>
<td>N</td>
<td>N</td>
<td>N</td>
<td>Y</td>
</tr>
</tbody>
</table>
</td>
I don't know why but this is throwing an error when initialized. This is the error I am facing.
Uncaught TypeError: Cannot read property 'mData' of undefined
I don't see anything wrong here. Any idea why its does not work?
Here is the live demo Demo
This is because you are initializing datatable by using class like:
$('.table').dataTable({searching: false, paging: false, responsive: true});
and the column definition are different for both the table, I think this is the issue.
Do one thing, provide different id to both the table and initiate datatable with those id's
Related
Is there a way to sort a table with multiple rowspans? I was trying a plugin in this jsFiddle, but it seems age does not get sorted correctly. Is there a way to sort an HTML table with rowspans? I need to have this table sorted with rowspan.
HTML
<table cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>28</td>
<td rowspan="2" style="vertical-align:middle">AAA</td>
</tr>
<tr class="expand-child">
<td>John</td>
<td>33</td>
</tr>
<tr>
<td>Clark</td>
<td>18</td>
<td>BBB</td>
</tr>
<tr>
<td>Bruce</td>
<td>22</td>
<td>CCC</td>
</tr>
</tbody>
</table>
JS
$('table').tablesorter();
It doesn't like your "expand-child" class. If you remove that, then it seems to sort just fine. What is that class doing?
Use Data-tables, it has all functionality: https://datatables.net/
$('.tablesorter').DataTable( {
"columnDefs": [ {
"targets": [ 0, 2 ],
"orderable": false
} ]
});
I am using sorttable to sort my columns in table.
Now I have a table as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)
I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>
my .html code:
<table id="unique_id_table">
<tr>
<th>Base Url</th>
<th>Statistics Ur</th>
<th>Options</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
my js code:
$(document).ready(function () {
$('#unique_id_table').DataTable({
});
})
Error
Uncaught TypeError: Cannot read property 'mData' of undefined
Why?
I copied it from another of my page, where everything worked
The first thing you should know how to do is how to Google something. An error like that makes it very easy to find people with the same issue.
According to this: http://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined
You are missing the thead and tbody tags. It seems they are required.
<table id="unique_id_table">
<thead>
<tr>
<th>Base Url</th>
<th>Statistics Ur</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
And from the official documentation with the same prerequisites.
I have table:
HTML
<table id="mydata">
<thead>
<tr>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
<th>Data 4</th>
</tr>
</thead>
<tbody>
<tr class="main">
<td class="data_1">A</td>
<td class="data_2">B</td>
<td class="data_3">C</td>
<td class="data_4">D</td>
</tr>
</tbody>
</table>
When i'm using dataTable to sort with jquery:
JavaScript
jQuery('#mydata').dataTable({
"sDom": " ",
"bPaginate": false,
"bInfo": false,
'bFilter':false,
"aoColumns": [
null,
null,
null,
null
]
});
It's worked.
But, when i add child rows for main:
HTML
<table id="mydata">
<thead>
<tr>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
<th>Data 4</th>
</tr>
</thead>
<tbody>
<tr class="main">
<td class="data_1">A</td>
<td class="data_2">B</td>
<td class="data_3">C</td>
<td class="data_4">D</td>
</tr>
<tr class="detail-header">
<td><strong>A1</strong></td>
<td><strong>B1</strong></td>
<td><strong>C1</strong></td>
<td><strong>D1</strong></td>
</tr>
<tr class="detail">
<td><strong>A2</strong></td>
<td><strong>B2</strong></td>
<td><strong>C2</strong></td>
<td><strong>D2</strong></td>
</tr>
<tr class="control">
<td colspan="2">Show details</td>
<td colspan="2">Hide details</td>
</tr>
</tbody>
</table>
In that html: detail-header, detail and control are childs of main and they show when click to Show details, it's should ignore when sort but i seem they also sort by dataTable so i received error:
Uncaught TypeError: Cannot read property 'className' of undefined
dataTables does not accept colspans in <tbody>. Place the last row (the row with links) in a <tfoot> instead :
<tfoot>
<tr class="control">
<td colspan="2">Show details</td>
<td colspan="2">Hide details</td>
</tr>
</tfoot>
demo -> http://jsfiddle.net/71zcn578/
I'm trying to implement Footable, a JQuery plugin used to make tables responsive. There is an add-on for Footable to add pagination. [Demo]
And (http://fooplugins.com/footable/demos/paging.htm) for using the pagination add-on. I tried following this demo but my pagination came up as a vertical un-ordered list. The buttons are functional but unsightly. Here is a link images which i can not post here because my repuation is not high enough.
Here is my code for the table:
<table class="table table-hover" ng-show='form.length>0' data-page-navigation=".pagination">
<thead>
<th ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'" >{{formAttr.attributes.name}}<br/>({{formAttr.type}})</th>
<th>Submission Time</th>
</thead>
<tbody>
<tr ng-repeat="(key, response) in formResponses">
<td ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'">{{$parent.response.results[formAttr.att_id]}}</td>
<td>{{response.submission_time}}</td>
</tr>
</tbody>
<tfoot class="">
<tr>
<td colspan="5">
<div class="pagination pagination-centered"></div>
</td>
</tr>
</tfoot>
</table>
Your footer should look something like this:
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="5" class="text-center">
<ul class="pagination">
</ul>
</td>
</tr>
</tfoot>
You can tell, that's different that what it says in the demo. This link showed me the difference https://github.com/bradvin/FooTable/issues/136.
Here's a plunk to demonstrate the issue: http://plnkr.co/edit/8Yyk8NN8rsqdXtrvJDOM
You need to add both attribute for pagination:
data-page-navigation=".pagination" data-page-size="2" into table tag
(If not placing the pagination in the table footer) Don't use a CSS class for table-to-pagination relationships. Use CSS ID instead.
Consider the following...
BAD - Example using CSS class to relate pagination object to table:
<table id="table1" class="footable" data-page-navigation=".pagination" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div class="pagination hide-if-no-paging"></div>
<table id="table2" class="footable" data-page-navigation=".pagination" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div class="pagination hide-if-no-paging"></div>
The footable javascript code will see two pagination objects. Which will be used by table1 and which will be used by table2 is not deterministic. This throws the footable javascript into a tizzy.
Rather than use CSS classes, be more specific by using a CSS ID instead.
GOOD - Example using CSS ID to relate pagination object to table:
<table id="table1" class="footable" data-page-navigation="#pagination1" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div id="pagination1" class="pagination hide-if-no-paging"></div>
<table id="table2" class="footable" data-page-navigation="#pagination2" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div id="pagination2" class="pagination hide-if-no-paging"></div>
Javascript Example:
$(document).ready(function () {
$(".footable").footable();
});