I'm using Bootstrap Table to sort some columns. One column has an article title that links to the article itself. I obviously want to be able to sort by title, but it's sorting by the content of the cell as seen in the source code (the link and the title) rather than the visible text (the title.)
<table class="table table-bordered table-striped table-hover table-sortable">
<thead>
<th data-sortable="true">Title</th>
<th>Description</th>
<th data-sortable="true">Posted</th>
</thead>
<tbody>
<tr>
<td data-sortable="true">Article C</td>
<td data-sortable="true">This is description 1</td>
<td data-sortable="true">9/26/2019</td>
</tr>
<tr>
<td data-sortable="true">Article A</td>
<td data-sortable="true">This is description 2</td>
<td data-sortable="true">4/27/2018</td>
</tr>
<tr>
<td data-sortable="true">Article B</td>
<td data-sortable="true">This is description 3</td>
<td data-sortable="true">8/26/2017</td>
</tr>
</tbody>
</table>
In the example it loads as C, A, B. After hitting the sort button I'd expect it to be A, B, C but it sorts as C, B, A (corresponding to 1, 2, 3 in the links.)
Fiddle: https://jsfiddle.net/melisunde/edkz6cv2/11/
Is there a way to have Bootstrap Table ignore the link? This doesn't appear to be addressed in the site's examples. Thanks!
Related
I'm trying to make a single row with one single column occupy entire space of a row, and no a single column space:
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td>ONE LINE</td> #THIS ONE I WANT TO OCCUPY SPACE OF 4 TDs
</tr>
</tbody>
</table>
I already tried it:
<td style="width:100%">ONE LINE</td>
and
<tr style="width:100%">
<td>ONE LINE</td>
</tr>
You can use the colspan attribute
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td colspan="4">ONE LINE</td>
</tr>
</tbody>
</table>
I have problem with my table JqMobile style is not working when I uploaded to the server I want datat be horizontal not broken.
http://jsfiddle.net/Tbu9U/
html
<table data-role="table" id="productOrders" data-mode="reflow" class="ui-table ui-table-reflow">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Price</th>
<th>Qty.</th>
<th>Ext.</th>
</tr>
</thead>
<tbody>
<tr>
<td><b class="ui-table-cell-label">Code</b></td>
<td><b class="ui-table-cell-label">Name</b></td>
<td><b class="ui-table-cell-label">Price</b></td>
<td><b class="ui-table-cell-label">Qty.</b></td>
<td><b class="ui-table-cell-label">Ext.</b></td>
</tr>
<tr>
<td>uj7uu</td>
<td>games</td>
<td class="dollars">$70</td>
<td>3</td>
<td>$210</td>
</tr>
</tbody>
</table>
Here is your fiddle updated: http://jsfiddle.net/ezanker/Tbu9U/1/
The only change was on the table markup, remove the class ui-table-reflow and instead add ui-responsive:
<table data-role="table" id="productOrders" data-mode="reflow" class="ui-table ui-responsive">
I have a table with 9 columns, and under column 8, I want to print that column's total (which I have stored in a variable). How do I align the text so that it appears under column 8?
I currently have the total in a h5 tag, but if that prevents the alignment, I'm willing to change it.
<table> ...stuff
</table>
<h5>TOTAL!</h5> <---- this should appear under column 8 of the table
The best route would be to have it in the table itself however if that isn't an option, align your h5 by using javascript. Get the x offset of column 8 and apply that value to your h5. If you can provide a more full example of your markup I can provide an example.
Edit:
Since you didn't provide markup I created an example. You should be able to apply the gist of it to your code.
html
<table>
<thead>
<tr>
<td>head 1</td>
<td>head 2</td>
<td id="totalcol">head 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
</tr>
</tbody>
</table>
<p id="total">Some total</p>
js
var left = $('#totalcol').offset().left;
$("#total").css("margin-left",left);
http://jsfiddle.net/H62wV/
Assuming all columns are of equal width:
.p9 { /* p9 for 9 column table of equal width */
width: 11%;
}
h5 {
margin-left: 88%; /* 11 x 8 */
}
<table>
<tr>
<td class="p9">
...
</td>
</tr>
</table>
<h5>TOTAL!</h5>
Is your table an actual HTML table or CSS divs behaving like a table?
I believe that if you are going the table way, you should take it till the end.
To show a third column total, I would do:
<TABLE>
<THEAD>
<TR>
<td>head 1</td>
<td>head 2</td>
<td>head 3</td>
</tr>
</THEAD>
<TFOOT>
<TR>
<td></td> <<-- notice the empty cells
<td></td>
<td>TOTAL</td>
</tr>
</TFOOT>
<TBODY>
<TR>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
</tr>
</TBODY>
</TABLE>
This way the alignment is automatic.
(Notice that the footer recomended position is before the body)
For a sturdy guid I have to write an XHTML fragment that is a table of 3 rows. The first row has two elements 1 and 2. The second row has two elements 3 and 4. The final row has one element that spans both columns and contains the value 5. How would you do the last sentence(the final row)?
<table border="1">
<tr>
<td>1, 2</td>
</tr>
<tr>
<td>3,4</td>
</tr>
<tr>
<span><td>5</td></span>
</tr>
</table>
I think you wish to use the colspan attribute. Assuming that you want 1 and 2 in the first row to be in 2 different columns (Your code doesn't do this), what you need is something like this:
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan = "2">5</td>
</tr>
</table>
If you do not understand this, please ask me again in the comments.
<table border="1">
<tr>
<td>1, 2</td>
</tr>
<tr>
<td>3,4</td>
</tr>
<tr>
<td colspan="2">5</td>
</tr>
</table>
your code has only one column for 1,2 and 3,4 so your last row value cannot span to two columns. For that you have to modify it a bit
<tr>
<td>1 </td><td> 2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
<tr>
<td colspan="2">5</td>
</tr>
I'm trying to create a simple banded grid view in XHTML Strict with CSS. For an example see this picture of a devExpress GridView. The main issue is how to create a table where each entry consists of multiple rows. Of course, something like
<table>
<tr><td>
<table>
<tr>
<td width=100>Item 1, cell 1</td>
<td width=200>Item 1, cell 2</td>
</tr><tr>
<td width=300>Item 1, cell 3</td>
</tr><tr>
<td width=150>Item 1, cell 4</td>
<td width=150>Item 1, cell 5</td>
</td></tr>
<tr><td>
<table>
<tr>
<td width=100>Item 2, cell 1</td>
<td width=200>Item 2, cell 2</td>
</tr><tr>
<td width=300>Item 2, cell 3</td>
</tr><tr>
<td width=150>Item 2, cell 4</td>
<td width=150>Item 2, cell 5</td>
</td></tr>
</table>
However, this 'smells'. Same goes for using a lot of colspans. Are there any other options?
You could also nest tables:
<table>
<tr><td><!----- row 1 -->
little icon
</td><td>
<table>
<tr><td>Band 1</td><td>some data</td></tr>
<tr><td>Band 2</td><td>some other data</td></tr>
</table>
</td></tr>
<tr><td><!----- row 2 -->
...
</td></tr>
</table>
You could probably write your own way of outputting the table (either as a method in the codebehind, or as a custom controller), with a DataTable-object or something like that as input. Don't think the standard gridview-controller is able to do what you want it to.