I have a table of records and the user can click on a name to show more detailed information about that certain record. I have it set up with a tag but each time the link is clicked it only shows up on the top of the page or the very first row. Is there a way to get it to show under each name when it is click. Here is the code I have...
<table width="75%" border="1">
<tr>
<th>Student Name</th>
</tr>
<cfoutput query="Q">
<tr>
<td>#Q.sln#, #Q.sfn#</td>
</tr>
<tr>
<td><cfdiv id="detail"></cfdiv></td>
</tr>
</cfoutput>
</table>
Since you are in a loop <cfoutput query="Q"> you will need to make detail a unique identifier. As you have it written every iteration of your loop has the same id. Maybe just add the current row number to make it unique.
<table width="75%" border="1">
<tr>
<th>Student Name</th>
</tr>
<cfoutput query="Q">
<tr>
<td>#Q.sln#, #Q.sfn#</td>
</tr>
<tr>
<td><cfdiv id="detail#Q.CurrentRow#"></cfdiv></td>
</tr>
</cfoutput>
</table>
Related
I have below html code
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
The above data loads fine on page. 2 Headers with Month and Savings and two rows of data that i recieve from backend.
The problem occurs when i dont get any data from backend and i want to display error message on the first row. I am doing it as follows
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<td> No data to show because the request to load user info failed</td>
</table>
As you can see, i want to show error message <td> No data to show because the request to load user info failed on the first row. The problem is this data is getting wrapped up in the first column itself whereas i want this error message to spread across Month and Savings column.
Can anyone help me on how to achieve this ?
You still need to add tbody and tr, and you can use the colspan attribute on the td element to "merge" the columns. For example, colspan="2" makes a cell span two columns.
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">No data to show because the request to load user info failed</td>
</tr>
</tbody>
</table>
I have the following HTML table:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>Component data 1</td>
<td>Component data 2</td>
</tr>
</table>
I want to add a component inside of the second that will contain the last 2 < td > tags so it will look something like this:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<some-data></some-data>
</tr>
</table>
The template of the some-data component will include the 2 < td > tags that the table needs, but doing this will break the table layout and will not look as it should.
Is there a way to achieve this?
what i understand from your question is you want to show dynamic data based on some input or database, you'll need PHP if only need to show input. database like mysql if want to fetch data.
I'm using a plugin called tablesorter. I'm trying to sort a table with rowspan rows. However, it does not sort all columns correctly. Here's the jsFiddle.
<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();
The age column does not sort properly, how do I make it so that all the columns sort properly?
The problem (visually, not technically) is that you have a marked John as a child of Peter. So, only the numbers 28, 18 and 22 are considered for sorting. 33 is never considered for sorting at all.
Changing the first two rows as follows seems to solve the problem
<tr>
<td>Peter</td>
<td>28</td>
<td>AAA</td>
</tr>
<tr>
<td>John</td>
<td>33</td>
</tr>
From the looks of your HTML and your sorting requirement, doesn't look like you need the rowspan or the expand-child class. Maybe you confused rowspan with having same values for 2 rows?
do you want initial sorting?
sort by age
$('table').tablesorter({sortList: [[1,0]]});
sort by first name and age
$('table').tablesorter({sortList: [[0,0], [1,0]]});
applying datatable on each table using id but it only triggers for one table and give error in console.
"Uncaught TypeError: Cannot set property 'nTf' of undefined" while i need to display it on every table .
Using class cannot be applied because each table has different td's count .
for instance i have two tables with id's table1 & table2 and calling datatable as
$('#table1').DataTable();
$('#table2').DataTable();
Please advise any help would be appreciated
my first table is
<table id="table1">
<thead>
<tr>
<th>No.s</th>
<th>Title</th>
<th>project</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>test project</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3"></th>
</tr>
</tfoot>
</table>
My second table is
<table id="table2">
<thead>
<tr>
<th>No.s</th>
<th>Title</th>
<th>Task</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>test task</td>
<td>Edit</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4"></th>
</tr>
</tfoot>
</table>
Using class cannot be applied because each table has different td's count
There is nothing to do when we use datatable for mutiple tables it works only for the tables which have same count of td's and can be applied using the both table's same class
Live Demo
i just had this problem and it turned out to be one too many tds in the tfoot. Check your rows and columns for extras, unclosed tags etc.
i'm using jquery and the jquery plugin "tablesorter" (http://tablesorter.com/docs/) to sort a table.
now I have the difficult, that I have following html (an other way is impossible):
<table class="tablesorter">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Bob</td>
<td>24</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>James</td>
<td>33</td>
</tr>
</table>
<table>
<tr>
<td>5</td>
<td>PJ</td>
<td>28</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Sue</td>
<td>39</td>
</tr>
</table>
In every table is one line. Now I want to sort this many tables as it is one table.
Is there any solution for this problem?
I've found an attempt here: http://jsfiddle.net/Mottie/8cg4f/31/
But there are ony two tables and the script only sort the data from one table.
Target the tables you want to pillage, drill down to the <tr>s, move them to where they need to be, climb back up to the (now empty) <table>s, throw them away. jsFiddle
$('table:not(.tablesorter)').find('tr').appendTo('.tablesorter')
.end().end().remove();
EDIT: as per comment I have simulated "spacing between <tr>s" by using padding on the <td>s jsFiddle.
If you have other requirements for the final page, just let me know what you'd like to end up with and I can help create a solution that will yield valid html which displays consistently for all your users.
Try something like this:
var $table = $(".tablesorter");
$table.nextAll("table").children().appendTo($table).end().remove();
$table.tablesorter();