I started using datatables for my tables.
I now have a table with customers.
The first row is the table header. The second row is for a button to add a new customer.
The rest of the rows is the list of customers.
I want datatables to sort everything but not the "new customer" row. How to lock this row / exclude it from sorting?
Tried this:
<table class="muitable" border="0" cellpadding="0" cellspacing="3" id="customertable">
<thead>
<tr>
<th>
</th>
<th>
</th>
<th class="muitable bluehover hand" >
Name
</th>
<th class="muitable bluehover hand" >
Created
</th>
<th class="muitable bluehover hand" >
Status
</th>
</tr>
<tr>
<th width="16">
</th>
<th class="muitable hovernextcell" onclick="newcustomer()">
<img src="/common/images/plus.png" width="16" height="16" class="hand">
</th>
<th class="muitable bluecell">
New customer
</th>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
--contents--
</tbody>
</table>
The problem that arises now is that the "sorting buttons" are all over the place. When there is a value in the cell on the second row, this becomes the button, if theres not, it uses the first row for making a sorting button.
How to tell datatables to leave the second th row alone and just use the first row as headers?
You can put the "Add Customer" button in the header. Something like this:
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
<tr>
<th colspan="3">
<button>Add Customer</button>
</th>
</tr>
</thead>
Now dataTables will not sort the row.
jsFiddle: http://jsfiddle.net/Fd3ED/
Fixed it by by using two header rows and using the option http://datatables.net/ref#bSortCellsTop
Related
I am generating a html table serverside with Java and sending it as a JSON to the client. So my response is a plain text looking like this:
<table class="table"></table><thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Username</th> <th scope="col">Score</th> </tr> </thead><tbody> <tr> <th scope="row"> 1 </th> <td>Marvin</td> <td>3.0</td> </tr> <tr> <th scope="row"> 2 </th> <td>testerich</td> <td>3.0</td> </tr></tbody>
My jQuery Script looks like this
if(reply.type === "highscores") {
var el = reply.value.replace(/\s+/g,' ').trim();
console.log(el);
$('.score-table').empty();
$('.score-table').html(el);
}
the console.log outputs the plain text quoted above.
Now the expected behavior is that the table will be displayed in the div with the class "score-table" but instead its just showing the following:
# Username Score 1 Marvin 3.0 2 testerich 3.0
So it basicly stripped al the html tags off the string? Im searching for hours now but did not find a solution for this.
The problem is your html response, not jQuery or js. Look at the first row of your html:
<table class="table"></table>
This doesn't make any sense. It needs to look like this:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> 1 </th>
<td>Marvin</td>
<td>3.0</td>
</tr>
<tr>
<th scope="row"> 2 </th>
<td>testerich</td>
<td>3.0</td>
</tr>
</tbody>
</table>
You have closed the Table right after you opened it..
<table class="table"></table>
update your html to this:
<table class="table"><thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Username</th> <th scope="col">Score</th> </tr> </thead><tbody> <tr> <th scope="row"> 1 </th> <td>Marvin</td> <td>3.0</td> </tr> <tr> <th scope="row"> 2 </th> <td>testerich</td> <td>3.0</td> </tr></tbody></table>
I have implemented a responsive table with the help of footable jquery library. Now i have placed input tags, select box in it. Footable js removes all these tags and make it an empty <td>.
<table id="accordion-example-1" class="table" data-paging="true" data-filtering="false" data-sorting="false">
<thead>
<tr>
<th></th>
<th data-breakpoints="xs">Date Created</th>
<th>Source</th>
<th>Type</th>
<th data-breakpoints="xs">Status</th>
<th data-breakpoints="xs sm"> </th>
<th data-breakpoints="xs sm md" > </th>
<th data-breakpoints="xs sm md"> </th>
</tr>
</thead>
<tbody>
<tr data-expanded="true">
<td></td>
<td>6/11/16</td>
<td>Mr. Cooper - Request Info</td>
<td>Buying</td>
<td>
<select class="nobrdr">
<option>Offer</option>
</select>
</td>
<td><input type="text" class="nobrdr" placeholder="Value"/></td>
<td><input type="text" class="nobrdr" placeholder="Date" /></td>
<td><button class="nobrdr m-l-1" type="button" ><b>+ Add</b></button><br>Forms/Docs</td>
</tr>
</tbody>
</table>
jquery function :
$(function($){
$('#accordion-example-1,#accordion-example-2').footable({
});
});
You need to change the data type of the column(s) where the form elements are to "html", otherwise FooTable assumes the column contains only text and formats it as such - i.e. it will strip out all HTML markup from the cell contents, and not just form elements.
For example in your case:
<th data-type="html" data-breakpoints="xs">Status</th>
will tell it to respect HTML markup within any cells in the Status column.
The possible column types supported are "text", "number", "html" and "date". "text" is the default if no type is specified.
For more detailed discussion I suggest you read the guide at http://fooplugins.github.io/FooTable/docs/getting-started.html and find the "Column options" section.
I have quite big table with many columns. Many columns have attribute "ng-show". Also i have created a functionality which hides or displays some table columns (with "ng-show").
When i trying to apply table columns visibility change ir takes 2-3 seconds for angular to update the table. Is it possible to add loading spinner on the table while it happens?
Simplified table structure:
<table class="classesList" id="tableId">
<thead>
<tr>
<th ng-show="tableColumns[0].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[1].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[2].show" >
<span>Header1</span>
</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-show="tableColumns[0].show">
<span>Data1</span>
</td>
<td ng-show="tableColumns[1].show">
<span>Data2</span>
</td>
<td ng-show="tableColumns[2].show">
<span>Data3</span>
</td>
...
</tr>
</tbody>
I have multiple column headers that spans of multiple column and I would like to find the correct header number/count for the columns. Also some of the table data have rowspan and colspan.
I want to be able to click any cell or table data and get its left and top headers.
So if I click the with "D9:LH1-TH4(H4a)" I should get:
Left Header is: LH1, Top Header1 is TH4 and Top Header 2 is H4a
And if I click the with "D3:LH2-TH2(H2b-H4a)" I should get:
Left Header is LH2, Top Header 1 is TH2 and Top Header 2 is H2b
Example:
<table width="200" border="1" style="background-color:#000; color:#FFF">
<tr>
<th scope="col"> </th>
<th colspan="2" scope="col"> TH1 </th>
<th colspan="4" scope="col"> TH2 </th>
<th colspan="6" scope="col"> TH4 </th>
</tr>
<tr>
<th scope="col"> </th>
<th scope="col"> H1a </th>
<th scope="col">H1b</th>
<th scope="col"> H2a</th>
<th scope="col">H2b</th>
<th scope="col">H2c</th>
<th scope="col">H2d</th>
<th colspan="6" scope="col"> H4a </th>
</tr>
<tr>
<th rowspan="3" scope="row"><span>LH1</span></th>
<td colspan="2" rowspan="3">D1:LH1-TH1(H1a-H1b)</td>
<td colspan="3" rowspan="2">D2:LH1-TH2(H2a-H2c)</td>
<td rowspan="3">D5:LH1-TH2(H2d)</td>
<td rowspan="3">D6:LH1-TH4(H2a-H2c)</td>
<td colspan="2">D7:LH1-TH4(H4a)</td>
<td>D8:LH1-TH4(H4a)</td>
<td rowspan="3">D13:LH1-TH4(H4a)</td>
<td rowspan="3">D14:LH1-TH4(H4a)</td>
</tr>
<tr>
<td colspan="3">D9:LH1-TH4(H4a)</td>
</tr>
<tr>
<td colspan="2">D3:LH1-TH2(H2a-H2b)</td>
<td>D4:LH1-TH2(H2c)</td>
<td>D10:LH1-TH4(H4a)</td>
<td>D11:LH1-TH4(H4a)</td>
<td>D12:LH11-TH4(H4a)</td>
</tr>
<tr>
<th scope="row"><span>LH2</span></th>
<td colspan="2" >D1:LH2-TH1(H1a-H1b)</td>
<td colspan="3">D2:LH2-TH2(H2a-H2c)</td>
<td colspan="5">D3:LH2-TH2(H2b-H4a)</td>
<td>D4:LH2-TH4(H4a)</td>
<td>D5:LH2-TH4(H4a)</td>
</tr>
</table>
Please see this link
That was annoyingly tricky.
you can find your headers by using the parent offsets.
got it working in this fiddle
http://jsfiddle.net/work4liberty/fk6sy/14/
$('td').on('click', function() {
var text = $(this).text().split(':')[1],
LH = text.split('-')[0],
TH = text.split('-')[1].split('(')[0],
TH2 = text.split('-')[1].split('(')[1];
console.log('Left header is '+LH+', Top header 1 is '+TH+' and Top header 2 is '+TH2)
});
FIDDLE
I have a simple JQ task to complete and I can't find an answer. I have some generated HTML :-
<p align= center >
<table cellspacing=0 border=1>
<caption align=bottom class=captiondataframe></caption>
<tr><td>
<table border=0 class=tablecorporate>
<tbody>
<tr class= firstline >
<th> </th>
<th>WEEK </th>
<th>PERIOD </th>
<th>ILPROD </th>
<th>CNME </th>
<th>QTY </th>
<th>SP </th>
<th>REV </th>
<th>COST </th>
<th>VA </th>
<th>VAP</th>
</tr>
I need to remove the <tr><td> elements on line 4 using JQuery. I had thought about using $(tr:first).remove() but I suspect this will remove the wrong elements on subsequent page loads.
Any ideas?