jquery grid and javascript best practice - javascript

Im new to jquery and need some help.
I have written a table that act like a grid with help from jquery.
When a user click on Name column the user will be redirected to the details page.
Now I want to know if I can do this in a better way?
And should the JS code be in the page or in a separated JS file?
Here is the code.
<table id="grid">
<thead>
<tr>
<th data-field="name">Namn</th>
<th data-field="location">Ort</th>
<th data-field="phone">Telefon</th>
<th data-field="buildinmonth">Bygga inom</th>
<th data-field="houselot">Har tomt</th>
<th data-field="created">Skapad</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td><span id="open" data-id="#item.Id">#item.Name</span></td>
<td>#item.Location</td>
<td>#item.Phone</td>
<td>#item.BuildInMonth</td>
<td>#item.HouseLot</td>
<td>#String.Format("{0:d}", item.CreatedDate)</td>
</tr>
}
</tbody>
</table>
<script>
$("#grid").kendoGrid({
scrollable: false,
sortable: true
});
$("#grid #open").click(function () {
window.location.replace("/lead/details/" + $(this).data("id"));
});
</script>

In this scenario, dont need to use any jquery click event, when the html table is loading that time we can give a <a> tag like,
<td>#item.Name</span></td>

When a user click on Name column the user will be redirected to the details page. Now I want to know if I can do this in a better way?
This seems ok. The only thing I feel can be adde to this is on hover of the Name column, you can show a tooltip of "Show more details" or something more intuitive.
And should the JS code be in the page or in a separated JS file?
Yes I always prefer to have all my JS code in a seperate file. The advantage of doing so is that you can minify the JS code later on.

Related

How to open another page in pop up modal on click of hyperlink

I have a page one.html that contains a hyperlink
<a href="#">Open second page<a/>
When this link is clicked I want to open second.html in a pop up modal.
My second page contains a simple table which I want to show, like:
<html>
<div class="table-responsive-md">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>adidas</td>
<td>one of the top sport brand.</td>
</tr>
</tbody>
</table>
</div>
</html>
If the content you want to display is on an other site the only way is to use iframes. So you would have your modal with the iframe inside it pointing to the external source and being set invisible. When clicking on the link, a Javascript Eventlistener would set the modal visible (i.e. manipulate CSS display). The href attribut of the link is empty.
But using iframes ist kind a out of date. Instead modern Web Apps use Rest Endpoints to request the data in a format like json, parse it and render the data within your App.

Getting Sorting Order of Table

I want to save the sorting order of the table and when refreshed it should sort on the saved status.
I am using the Tablesorter jquery plugin for sorting of table
I used javascript to store them in the localstorage but it is storing entire table
javascript Code :
$("#videoTable").on("sortEnd", function SaveSortOrder() {
var table_layout = $('#videoTable')[0].innerHTML;
localStorage.setItem("tableLayout",table_layout);
});
HTML Code:
<table class="table sortable" id="videoTable">
<thead>
<tr valign="middle">
<th data-sort="name" class="tooltipPoint col-lg-4" style="text-align:left;">Name <i class="fa fa-sort" aria-hidden="true"></i></th>
<th data-sort="name" class="tooltipPoint text-center" nowrap>Status <i class="fa fa-sort" aria-hidden="true"></i></th>
<th class="unclickable text-center">Action</th>
</tr>
</thead>
<tbody>
The body will be generated dynamically.
</tbody>
</table>
Is there any way to retrieve only the headers or only the column (Index of the column in a table) we are sorting so that I can modify the class based on the result.
Sorry for bad English. Thanks in advance.
Sort column. Save only what column how sorted (dont know how to get current sort from tablesorter)
On page load check if any sort is saved in local storage.
If so, apply it with sortList.
You should consider new data may be added. Thats why your solution is not right.
I am not sure if I understood your question correctly, but if you want to add a class to the column that was sorted you could manage that at the table header level, something along the lines of this:
jQuery("#videoTable th.tooltipPoint").on("click",function(){
jQuery("#videoTable th.tooltipPoint").removeClass("sorted");
jQuery(this).addClass("sorted");
});

Applying css to the table row dynamically created with Vue.js

So I have table, where rows are created dynamically using v-for:
<table>
<tr><th class='name'>Name</th><th>Surname</th></tr>
<tr v-for='data in datas'><td class='name'>#{{data.name}}</td><td>#{{data.surname}}</td></tr>
</table>
And then, using jQuery, I want to hide the column with class 'name', but when I make
$('.name').hide();
Only header disappears. I suppose it's because the row is made dynamically, but how could I handle this?
I've tried:
making each() function on all elements with this class,
writing script like .css('display','none'), not hide()
but it didn't help. Strange, but alert() in each() fires each time it should, but hide() ignores added elements
More concrete data:
the table itself:
<table class="striped bordered responsive">
<thead>
<tr><th class="stat-table-creatives" colspan="2">Creative info</th><th>Impressions</th><th>Clicks</th><th>CTR</th><th>CPC</th><th>Price per unit</th><th>Sum</th><th class="stat-table-date">Date</th></tr>
</thead>
<tbody>
<tr v-for="stat in stats"><td class="stat-table-creatives">#{{ stat.creativeTitle }}</td><td class="stat-table-creatives">#{{ stat.creativeType }}</td><td>#{{ stat.impressions }}</td><td>#{{ stat.clicks }}</td><td>#{{ stat.ctr }}</td><td>#{{ stat.cpc }}</td><td>#{{ stat.client_price }}</td><td>#{{ stat.sum }}</td><td class="stat-table-date">#{{ stat.date }}</td></tr>
</tbody>
</table>
function called on button click
getJsonForStats: function(filters){
if((filters[0]=='creative')||(filters[1]=='creative')){
$('.stat-table-creatives').show();
} else {
$('.stat-table-creatives').hide();
}
if((filters[0]=='date')||(filters[1]=='date')){
$('.stat-table-date').show();
} else {
$('.stat-table-date').hide();
}
});
The function is called from another function, which is called on v-on:click
jQuery works just fine with Vue dynamically created table. Check this fiddle: https://jsfiddle.net/crabbly/9o69f2yr/
I believe the problem will be on how your application is loading, your filters, etc.
Depending on how you are trying to access the table rows, you may want to make sure that DOM is completely updated before querying it. You can use Vue's nextTick (http://vuejs.org/api/#Vue-nextTick).
Inside your Vue method, before you try to hide the rows, in your example, calling getJsonForStats method, you can do
this.$nextTick(function() {
//DOM updated and ready to rock and roll
this.getJsonForStats(..your filter params...);
}
suppose it's because you use the same class for <th> and <td>
try <th class="name-th"> and then $(".name-th").hide(); $(".name").hide();
maybe it will help
UPD:
I don't know.. this code is working perfectly:
<table id="tab" border='1'>
<tr><th class='name'>Name</th><th>Surname</th></tr>
<tr><td class='name'>n</td><td>s</td></tr>
</table>
<input id="click" type="button" value="Hide" />
js:
$(document).ready(function(){
$("#click").click(function(){
$("#tab").find(".name").hide();
});
});

Sorting table rows in jsp using jquery

I want to drag and drop the rows of table. I am using jquery sorter for this.
It is allowing me to drag the row but its not placing it on desired location. if i leave the row its returning back to its original location.
jsp
<table cellpadding="5" cellspacing="5" id="diagnosis_list">
<thead>
<tr>
<th>id</th>
<th>Demand id</th>
<th>itemCode</th>
</tr>
</thead>
<c:forEach var="Demand" items="${Demand}">
<tbody>
<tr id="tr<%=count%>">
<td class="sorter"></td>
<td>${Demand.id}</td>
<td>${Demand.demandId}</td>
<td>${Demand.itemCode}</td>
</tr>
</tbody>
<%
count = count + 1;
%>
</c:forEach>
</table>
Javascript
$(document).ready(function() {
$("#diagnosis_list tbody").sortable();
$("#diagnosis_list tbody").disableSelection();
});
I really dont know where i am going wrong. I was referring jquery website for this. Does any know the answer. Would really appreciate the help.
You should move the
<c:forEach var="Demand" items="${Demand}">
inside the < body > tag.
As you have it, it creates multiple < body > tags for the table and the sortable extension cannot handle it.

Stripes: In jsp page html table pagination

I'm using stripes java framework. I have jsp page:
<table id="mlTable" style="">
<col width="200">
<col width="250">
<thead>
<tr>
<th align="center"><p>Name</p></th>
<th align="center"><p>Address</p></th>
</tr>
</thead>
<c:forEach items="${actionBean.mLocations}" var="ml">
<tr>
<td><p>${ml.name}</p></td>
<td><p>${ml.address}</p></td>
</tr>
</c:forEach>
</table>
In my actionbean I'm returning list:
public List<Location> getmLocations() {
mLocations = wrapperBean.getLocations();
return mLocations;
}
What I want is pagination because list is very long. And pagination must be asynchronous without reloading the page. Because I have also search field and that value must stay in field. And I don't want use DISPLAYTAG because I'm adding some custom classes to table. What can I do? please help
You could use a Javascript library such as List.js to paginate a HTML table client-side. This avoids refreshing the page, but if the amount of data is truly staggering, it may cause performance issues, since you're always downloading the whole thing (but only once per loading the page itself).

Categories