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.
Related
Using Javascript (with JQuery), I would like to delete all rows in a table except the header row.
This seems like a simple thing because I see quite a few posts on StackOverFlow about this and a lot of solutions provided and accepted. But, none of them seem to work for me. Please refer to my code below:
function delTable() {
console.log("Delete all rows, but the header");
// Option-A
// $('#TableA tbody tr').remove();
// Option-B
// Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
// $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();
// Option-C
$('#TableA tbody').empty();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body onLoad="delTable();">
<table id="TableA">
<th>
<tr>
<td>Col A</td>
<td>Col B</td>
</tr>
</th>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
Does any one know what I am doing wrong? Thanks.
-Karthik
Just update your th to thead and you good to go, see below:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body onLoad="delTable()">
<table id="TableA">
<thead>
<tr>
<td>Col A</td>
<td>Col B</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
JS:
function delTable() {
console.log("Delete all rows, but the header");
// Option-A
// $('#TableA tbody tr').remove();
// Option-B
// Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
// $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();
// Option-C
$('#TableA tbody').empty();
}
Working fiddle:
https://jsfiddle.net/pvfkxdby/1/
You need to replace th with thead and use $('#TableA tbody').find("tr") as follows:
function delTable() {
console.log("Delete all rows, but the header");
$('#TableA tbody').find("tr").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body onLoad="delTable();">
<table id="TableA">
<thead>
<tr>
<td>Col A</td>
<td>Col B</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
This worked for me. You set apart your header with <th> instead of <thead> and then you had <td> in your header instead of <th>.
$(document).ready(() => {
$("#delete").click(() => {
$("#TableA tbody tr").remove()
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="TableA">
<thead>
<tr>
<th>Col A</th>
<th>Col B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<button id="delete">delete</button>
By inspecting your HTML in my Google Chrome I can see that the rows were rearranged so that even the first line is inside <tbody> tag. Therefore the whole table is removed. You can fix this simply by wrapping the first row in <thead> tag or use different approach which does not use <tbody> tag.
That would be a simple one-liner:
function delTable() {
console.log("Delete all rows, but the header");
$('#TableA').find("tr:not(:first)").remove(); // Code to remove all rows in table except the header row
}
What the given code does is identify the rows in the table 'TableA' that is not the first row using the command: $('#TableA').find("tr:not(:first)") and subsequently remove the rows using the .remove() command.
mytable.php
<table id="tableid">
<thead>
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
Hello Guys, Can anyone help me how to convert my code to the Datatables? Sorry Guys for this question I try to convert but it didn't work. I'm a beginner and still learning how to use tables
Script
$(document).ready(function() {
$('#example').DataTable();
} );
HTML
<table id="example" class="display" style="width:100%">
<tr>
......
</tr>
</table>
In addition to the above code, the following Javascript library files are loaded for use in this example:
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
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
I have an editable table in which we can add, delete and edit rows. How can I sort them by storing them dynamically without a database just for static sake
You could try a plugin like https://datatables.net/ which could have this and more features. However you could always try some code like this:
var tbl = $("table#yourtblID");
var rows = $("tr", tbl);
rows.sort(conditionFunction);
$("tr", tbl).remove();
In order to use the above code, you can need to create a conditionFunction. Lets say you would like to sort based on a column called id with all its td tags having the class tid
function conditionFunction(a,b){
return $("td", a).text()-$("td", b).text();
}
To know more about these condition functions refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
There is tablesorter jquery plugin available for sorting your table.
Demo : https://jsfiddle.net/Prakash_Thete/q8sh28dh/.
Here is the sample code for the same
HTML :
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
JS :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/jquery.tablesorter.js"></script>
$(document).ready(function() {
$("#myTable").tablesorter();
});
For info on plugin please visit http://tablesorter.com/docs/
So I'm trying to create a fadeOut effect of a with class "delete" parent tr element.
Here is my jsfiddle, where you can check it live - http://jsfiddle.net/syTXZ/
and code is here -
HTML -
<table border="1px solid black">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Parent</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>test222</td>
<td>test2</td>
<td>Edit Category</td>
<td>Delete Category</td>
</tr>
<tr>
<td>1</td>
<td>te1t22</td>
<td>tes1t</td>
<td>Edit Category</td>
<td>Delete Category</td>
</tr>
<tr>
<td>3</td>
<td>test2</td>
<td>test</td>
<td>Edit Category</td>
<td>Delete Category</td>
</tr>
</tbody>
</table>
and js -
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
}
but it's not working, any clues? I tried also parent() instead of parents(), but it also didn't work.
Updated with fix: jsFiddle
You were missing );
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
}
Should be
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
});
$("body").delegate("a.delete","click",function() {
$(this).parent().parent().fadeOut(300);
});
Demo
It should be
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
});