i need to display no results in table like this:
But i got only this :
my table code is:
{this.state.listAllJobSeekers.length > 0 ?
<tbody>
{this.state.listAllJobSeekers.map((JobSeeker,indx)=>
<tr key={indx}>
<td></td>
<td></td>
</tr>
)}
</tbody> :
<tbody className="noResult">
<td>No Results Found</td>
</tbody>
}
if data appears it will show, but if there is no data i need to show table with no rows found
You would need to keep state of the loading state of your request.
As long as that request is loading you can use a different Array to be used to display the rows.
Something like this maybe:
{isLoading ?
new Array(10).fill("").map((item, index) => (
<tr key={index}>
<td></td>
<td></td>
</tr>
)):
this.state.listAllJobSeekers.map((item, index) => (
<tr key={index}>
<td></td>
<td></td>
</tr>))}
In order to always have a nice fixed height of the table, you would need to add empty rows to your listAllJobSeekers as long as there are less than 10 in there
The No rows found text can be placed within the table container with position: absolute; and then centered, relative to the table.
The empty table can be simulated with a set of empty data (in your case, 10 rows with empty cell data).
Related
So I have a weird situation were I have a table footer that I only need to repeat once so I decided to just add the "footer" trs to the end of the tbody so it would only appear once at the end of the table and look like a footer without the repeating on each printed page.
<table>
<tbody>
#foreach(var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</tbody>
</table>
This was fine until Model.Items had enough rows that it pushed the second row of the footer onto the next page when I need to keep the two footer rows together.
I've also tried using the actual tfoot tag like so with a page-break-inside:avoid style.
<table>
<tbody>
#foreach (var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
</tbody>
<tfoot style="page-break-inside:avoid;">
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</tfoot>
</table>
This kept the footer together but its now repeating on each page instead of once. Someone on another Stack Overflow question suggested using the following style on the tfoot to stop it repeating which worked, but now it ignores the page-break-inside:avoid style.
<tfoot style="display: table-row-group"></tfoot>
Does anyone know how to get a footer to appear once and avoid breaking over multiple printed pages?
I got it working but I had to apply a few styles to make it looks like one table. I put the original footer HTML into a tr > td > table like so:
<table>
<tbody>
#foreach (var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
<tr style="page-break-inside:avoid;">
<td colspan="2">
<table>
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
This allowed the footer to stay together while only appearing once at the end of the page.
I'm trying to create a table in Angular with a dynamic number of columns and rows. I've found this easy to accomplish using the HTML table element by doing something like this:
<table class="html-table">
<tr class="headers">
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th *ngIf="columns == 4">Species</th>
</tr>
<tr>
<td>Ryan</td>
<td>30</td>
<td>M</td>
<td *ngIf="columns == 4">Human</td>
</tr>
</table>
In this example there might be some button that toggles the value of columns between 3 and 4.
Every explanation I have looked at online involves changing CSS variables, which seems like a somewhat hacky way to accomplish something that should be simple. Is there some way I can specify that something should be a new column in CSS grid rather than that having to specify the number of columns in grid-template-columns?
In Angular you can use ng-repeat to have a dynamic table
A typical example could be
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat="data in datas">
<td title="Title_Of_First_Variable">{{data.variable1}}</td>
<td title="Title_Of_Second_Variable">{{data.variable2}}</td>
<td title="Title_Of_Third_Variable">{{data.variable3}}</td>
...
</tr>
</table>
Of course with your controller you should pass your dynamic data into the correct $scope, in this case should be $scope.datas (usually an object)...maybe something like this, using NodeJS:
$http.post('route_of_your_method')
.success(function (result) {
$scope.datas = result;
})
.error(function (err) {
...
});
I explained fastly but i hope this is enough
why Header1 and Header2 not exists in all page in print landscape
https://fiddle.jshell.net/6mvucked/
seems height header is limit. if more than a value to be not show in all page
why ?
ٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍ
Your javascript will append 100 rows to only those containers whose id is "test".
So if you want the same to happen with the tbody of header, then simply write
<tbody id="test">
in the one in the header.
But in that case, it will only print 100 rows for the header tbody and not the other second tbody, as Javascript will append 100 rows to the 1st tag with id="test".
So if you need to append 100 or x number of rows to both or many tbody, then give them separate ids and hence write separate functions for them in javascript.
Like this:
<table>
<teahd>
<tr>
<td>ok , no problem, but show only in first page and not repeat</td>
<td>
<table>
<tbody id="test-one">
<tr><td>header not be shown if this code(table) here</td></tr>
</tbody>
</table>
</td>
</tr>
</teahd>
<tbody id="test-two">
</tbody>
<tfoot>
<tr>
<td>no problem</td>
</tr>
</tfoot>
</table>
And the javascript functions like:
for(var i=1;i<=100; i++)
$('#test-one').append('<tr><td colspan="2">row '+i+'</td></tr>');
$('#test-two').append('<tr><td colspan="2">row '+i+'</td></tr>');
I am using the HTML Table Class of CodeIgniter, and attempting to create a table template. The example given in the documentation is the following:
$tmpl = array (
'table_open' => '<table border="0" cellpadding="4" cellspacing="0">',
'heading_row_start' => '<tr>',
'heading_row_end' => '</tr>',
'heading_cell_start' => '<th>',
'heading_cell_end' => '</th>',
'row_start' => '<tr>',
'row_end' => '</tr>',
'cell_start' => '<td>',
'cell_end' => '</td>',
'row_alt_start' => '<tr>',
'row_alt_end' => '</tr>',
'cell_alt_start' => '<td>',
'cell_alt_end' => '</td>',
'table_close' => '</table>'
);
$this->table->set_template($tmpl);
When I apply this template to my query, this is the resulting HTML:
<table data-hide-table="false" data-orientation="vertical" class="chart">
<thead>
<tr>
<th></th><th>Rate per SF</th></tr>
</thead>
<tbody>
<tr>
<td>2008</td><td>48</td></tr>
<tr>
<td>2009</td><td>32</td></tr>
<tr>
<td>2010</td><td>32</td></tr>
<tr>
<td>2011</td><td>32</td></tr>
<tr>
<td>2012</td><td>40</td></tr>
<tr>
<td>2013</td><td>41</td></tr>
</tbody>
</table>
The problem with this example is that each row contains two data elements (<td></td><td></td>), instead of one header element and one data element (<th></th><td></td>).
How can I change the template so that my resulting table will have one header element and one data element (<th></th><td></td>) on each row like this:
<table data-hide-table="false" data-orientation="vertical" class="chart">
<thead>
<tr>
<th></th><th>Rate per SF</th></tr>
</thead>
<tbody>
<tr>
<th>2008</th><td>48</td></tr>
<tr>
<th>2009</th><td>32</td></tr>
<tr>
<th>2010</th><td>32</td></tr>
<tr>
<th>2011</th><td>32</td></tr>
<tr>
<th>2012</th><td>40</td></tr>
<tr>
<th>2013</th><td>41</td></tr>
</tbody>
</table>
Thanks.
The answer is no you can't change template like this but yes you can somewhere achieve this kind of functionality
If you see the http://ellislab.com/codeigniter/user-guide/libraries/table.html there is a option to add a callable function so I suggest you are creating a table make some flag if you are using that table is generating than create a helper function and add that to the table function than before generating table set a flag to determine the first cell may be using cookie. Than from helper for every 1, 3....(2n+1) add some custom html tag or style. Than after generating the table remove all the flags.
I have a table structure as below:
<table>
<tr id="tr1">
<td></td>
<td></td>
</tr>
<tr id="tr2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr3">
<td></td>
<td></td>
</tr>
</table>
Now it has 2 columns each in first and last row . And 4 columns in 2nd row. Now if i want to add one more column to the last row correspondent to the 4th column in 2nd row , i knw that i should append one empty td to last row and then add that column. But this empty td joining is not possible in all the cases . So how to add columns randomly and manage the structure of table?? Can i get any help??
is this what you want?
$(document).ready(function(){
addCol("tr3", 4);
});
function addCol(rowid, coldes){
var tr = $("#" + rowid + " td");
var trctr = tr.length;
troffset = coldes - trctr;
alert(troffset);
for(var i = 1; i <= troffset; i++){
tr.parent().append("<td></td>");
}
}
http://jsfiddle.net/djb78/1/
You can't do that. You must merge some cells and remove their borders.
rowspan and colspan attributes will help
Handling HTML tables manually (adding columns etc.) is quite problematic, but there are some libraries for tables / data presentation that may help you.
Datatables
http://www.datatables.net/
Flexigrid
http://www.flexigrid.info/
SlickGrid
https://github.com/mleibman/SlickGrid
jqGrid
http://www.trirand.com/blog/
dgrid and DojoX Data Grids
http://dojotoolkit.org/features/desktop.php