I am working on displaying a table that lists things based on what state was selected in HighMaps during drill down:
Code Snippet:
switch (e.point.name) {
case 'California':
$('#table').html('');
break;
case 'Virginia':
$('#table').html('');
break;
default:
$('#table').html('');
break;
}
<div id="table"></div>
The table is dynamically generated by taking data from DB for each state using PHP. Table structure looks like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title text-center">Company List - State</h3>
</div>
<table class="table table-hover" id="dev-table">
<thead>
<tr>
<th>Company Name</th>
<th>County</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>Company 1</td>
<td>Test County</td>
<td>Company details.</td>
</tr>
<tr>
<td>Company 2</td>
<td>Test County</td>
<td>Company details.</td>
</tr>
<td>Company 3</td>
<td>Test County</td>
<td>Company details.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
The generated table output that does inside .html('') looks like this:
$('#table').html('<div class="container"> <div class="row"><div class="col-md-12"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title text-center">Company List - California</h3></div><table class="table table-hover" id="dev-table"><thead><tr><th>Company Name</th><th>County</th><th>Details</th></tr></thead><tbody><tr><td>Company 1</td><td>Test County</td><td>Company details are available to ACMA members only.</td></tr><tr><td>Company 2</td><td>Test County</td><td>Company details are available to ACMA members only.</td></tr><td>Company 3</td><td>Test County</td><td>Company details.</td></tr></tbody></table></div></div></div></div>');
Everything works well when the list of companies is small. Once The number of companies per state gets bigger and the generated table code becomes longer things stop working. I tested it out. If I take the part of generated code that is too long and delete half of it then everything starts working again.
Is there a limit on how many characters can go inside .html(); ? Is there a more efficient way to display these tables?
What about using the append function within some specific selector like the one you are using currently $("#table").append(); check the link mentioned below:
http://api.jquery.com/append/
Related
I am seeing strange behavior between a vue component and inline template.
Example #1: Inline Template
This is working as expected. The vue component is unchanged as per example #2 below, the only difference is i've copied the template content into the tag as an inline template.
See: https://jsfiddle.net/pobffmnv/
<div class="panel panel-primary">
<div class="panel-heading">Current Clients</div>
<table class="table table-hover">
<thead>
<tr>
<th>Client Name</th>
<th style="text-align: center;">No. Projects</th>
<th style="text-align: center;">Time (7 days)</th>
<th style="text-align: center;">Edit</th>
</tr>
</thead>
<tbody>
<clientlistitem inline-template>
<tr>
<td>Test</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn small btn-primary">Edit</button>
</div>
</td>
</tr>
</clientlistitem>
</tbody>
</table>
</div>
This correctly shows the following:
Example #2: Not inline
The following is my Vue template. Below is the change to the code to remove the inline template.
See: https://jsfiddle.net/Ld47hoy2/
<template>
<tr>
<td>Test</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn small btn-primary">
Edit
</button>
</div>
</td>
</tr>
</template>
<script>
export default {
}
</script>
Updated page code:
<div class="panel panel-primary">
<div class="panel-heading">Current Clients</div>
<table class="table table-hover">
<thead>
<tr>
<th>Client Name</th>
<th style="text-align: center;">No. Projects</th>
<th style="text-align: center;">Time (7 days)</th>
<th style="text-align: center;">Edit</th>
</tr>
</thead>
<tbody>
<clientlistitem></clientlistitem>
</tbody>
</table>
</div>
However, with the above, the following is displayed:
Looking at the source code of the output of the page, it appears to have put the rendered code BEFORE my table...? I am expecting this to be between the <tbody></tbody> tags..
Any reason why Vue would output the code to that location instead of the one expected?
The issue here is that with in DOM templates the templates are first rendered by the browser and HTML tables only allow certain kinds of elements inside. That being the case, the component clientlistitem is first rendered outside the table, then Vue compiles the template which results in the component in the wrong place.
To fix that, use the is special attribute.
<tbody>
<tr is="clientlistitem"></tr>
</tbody>
The browser will accept this and render the tr in the correct place, but Vue will interpret it as your component.
Here is your fiddle updated.
I im build a ASP.Net MVC 4 Application and i need to use two tables.
Example:
The first table i have the products that is in my database, when i click on the green button, the item need to be inside the table down, i can choose any item that i want and when i finish, i click on Save to register that "Sell", but i cant do that.
My question:
How can i get the item values from the first table using a button and pass to the controller?
Can i just put on the other table using JavaScript and when i finish i send to the controller?
I Just want pass data from table 1 to table 2!
My code:
Table 1
<!--Table to display registered products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var product in Model)
{
<tr>
<td>#Html.DisplayFor(model => product.idProduct)</td>
<td>#Html.DisplayFor(model => product.nameProduct)</td>
<td><p>R$#Html.DisplayFor(model => product.pricesaleProduct)</p></td>
<td><input type="text" class="form-control bfh-number" value="1"></td>
<!--Here i want get values to put on other table Or send to a controller-->
<td>
<a class="btn btn-success"><span class="glyphicon glyphicon-plus"> Adicionar</span></a>
</td>
</tr>
}
}
</tbody>
</table>
Table 2:
<!--Table to display selected products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
You want to create your bottom table as a Partial View and then AJAX to load it when the button is clicked... There are many examples, exactly like this:
http://www.binaryintellect.net/articles/218ca630-ba50-48fe-af6e-6f754b5894aa.aspx
I have an HTML table which is built in the following way:-
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Party</th> <th>Name</th> <th>Chamber</th> <th>District</th> <th>State</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|filter:search|itemsPerPage:10">
<td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{user.fullname}}</td>
<td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
<td> <button type="button" class="btn btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
Is it possible to create this table from javascript and in the HTML I just create a div and append the created table from javascript into this div. I tried placing the above content in a javascript variable and do an append but it did not work out. Is there a way to do this?? I think it did not work out may be because of the Angular JS variables. Correct me if I am wrong. I am pretty new to this.
In AngularJS use <div ng-bind-html="html-var"></div> and save the html-code in $scope.html-var.
For that you need to include <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>
"DataTables warning: table id=dataTables-example- Requested unknown parameter '0' for row 1."
I know there are a lot of similar answers available on google, but most of them uses JSON and well, I don't. I know parameter '0' is referring to the event ID, can anyone enlighten me on where to change?
I have a class named "TrialEvent", a servlet named "EventRetrieveServlet" and Session Bean.
The below are the codes in my jsp.
<form method="get" action="EventRetrieveServlet">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover"
id="dataTables-example">
<thead>
<tr>
<th>Event Ref.</th>
<th>Image</th>
<th>Date</th>
<th>Start</th>
<th>End</th>
<th>Target Percentage (%)</th>
<th>View Coordinate</th>
</tr>
</thead>
<tbody>
<c:forEach var="rEvent" items="${eventList}" varStatus="i">
<tr>
<td>${rEvent.getIdtrialevent()}</td>
<td><img
src='displayImage?image=${rEvent.getTrialImage().getImageURL()}'
height=80px, width=100px></td>
<td>${rEvent.getDate()}</td>
<td>${rEvent.getStart()}</td>
<td>${rEvent.getEnd()}</td>
<td>${rEvent.getTargetperc()}</td>
<td><a href="javascript:void(0)"
onclick="ShowNewPage(${rEvent.getAreacoords().getCoordsID()})"><img
src="assets/img/view.png" height=20px width=20px></a></td>
<tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</form>
Here's my javascript
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
$(document).ready(function() {
$('#dataTables-example').dataTable(
);
});
</script>
I'm trying to get paging to work, but i suspect this error is preventing the paging from working.
You are not closing correctly the <tr> tag before </c:forEach>.
I am working on an application.
The requirement is I have a table and each row is populated via ng-repeat from json data.
While clicking on each row the row has to expand and there would be an nested table and clicking on any row on nested table will expand that row and there would be another nested table.
Till now I am not even able to get the first nested table to open while clicking on row.
Ideally I prefer the each nested view to have a separate html template, but for simplicity I am trying with normal collapsible div.
Here is my code.
<div class="col col-md-12 col-sm-12 col-xs-12">
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>ID</th>
<th>Status</th>
<th>Name</th>
<th>Description</th>
<th>Size</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#endpoints" data-ng-repeat="data in datafromservice">
<td>{{data.id}}</td>
<td>{{data.status}}</td>
<td>{{data.name}}</td>
<td>{{data.description}}</td>
<td>{{data.size}}</td>
<td>{{data.level}}</td>
<!-- edit button -->
<td class="edit"><i class="glyphicon glyphicon-pencil"></i>
</td>
<!-- button button -->
<td class="delete"><i class="glyphicon glyphicon-trash"></i>
</td>
</tr>
</tbody>
<div class="collapse" id="endpoints">
<p>Hello world</p>
</div>
</table>
</div>
I must be missing something very obvious, and I am not able to figure out.