I'm trying to loop through an array in order to print some column headers dynamically. I see that the array values are inserted into the HTML code, but I'm unable to sort my table whenever I click on one of the column headers.
Strange thing is: when I replace the {{ colHeader }} variable with plaintext html the tablesorter is functioning normally. So does anyone know what I'm doing wrong, and how to fix it?
<script type="text/javascript">
$scope.colHeaders = {
'id' ,
'name' ,
'symbol',
};
$scope.sortType = 'id'; // specifies column to sort
</script>
<table class="table">
<thead>
<tr>
<th ng-repeat="colHeader in colHeaders">
<a href="#" ng-click="sortType = '{{ colHeader }}'">
column header
</a>
</th>
</tr>
</thead>
</table>
Using inline functions in html templates is a bad idea.
Try using a function from your controller like this: <th ng-repeat="colHeader in colHeaders" ng-click="sortBy(colHeader)">
Here is a working plunker: https://plnkr.co/edit/NTgjVpKoKhrjyP1YuN2n
Related
Premise:
I'm playing around with knockout and have been trying to display a populated array variable through and html table.
Problem:
The problem is that I don't know how to display the "last_name" property in the variable array shown below.
JSON FILE + HTML FILE:
//JSON FILE
$(function()
{
console.log('Ready');
ko.applyBindings(new myvm());
}
function myvm()
{
var self = this;
//cust contains the data mentioned at the bottom
self.customers = cust;
}
//HTML FILE
<table class= "table" id="kocustomertable" border= "1">
<tr>
<th>Last name</th>
</tr>
<tbody data-bind = 'customers'>
<tr>
<td data-bind = 'text: last_name'></td>
</tr>
</tbody>
</table>
SAMPLE CONTENT OF DATA INSIDE VARIABLE "CUST"
[
{"id":1,"first_name":"Tracey","last_name":"Jansson","email":"tjansson0#discuz.net","gender":"Female","ip_address":"167.88.183.95","birthdate":"1999-08-25T17:24:23Z","website":"http://hello.com","city":"Medellín","credits":7471}
]
It looks like the data-bind on your <tbody> is missing a binding.
Your have referenced the your view model customers property in your HTML but you haven't told knockout how to bind it to the view. If you add a foreach binding, you should see that you get a table row per customer. For example, you could replace your opening <tbody> with:
<tbody data-bind='foreach: customers'>
Hope this helps. Take a look at the knockout documentation on foreach for more info.
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");
});
I am facing issue in Datatable sScroll Property.
I have defined the datatable in my html file like below
<table id="datatable" class="vrptTable">
<thead>
<tr>
<th> column1</th>
<th>Column 2</th>
</tr>
</thead>
</table>
and I am populating this datatable in my js file as below :
var options = new DataTableOptions($table, {
"sAjaxSource" : ajaxSource,
"sAjaxDataProp" : "aaData",
"sScrollY":"200px"
}).getOptions();
$("#table").dataTable(options)
;
The problem is it's creating the vertical scroll bar but i can see 2 tables in HTML DOM. First one contains only header information and second datatable contains empty header and my data.
Can anyone please help.
This is absolutely normal behavior of jQuery DataTables. See this official example, there are two tables - one for the header, another one for the body.
From the the controller I am passing a json encoded object to my view. In the view i have used bootstrap table to display the data. However in the table it show No matching records found. Please help.
here is my controller
enter image description here
here is my view
enter image description here
I guess your model is roommaster. To get Eloquent model to json use
$roommaster->toJson()
because json_encode($roommaster) needs $roommaster to be an array and in your case is an object
Have you checked the source code of the page the table is on to see if the code is outputting JSON to data-url?
If it is, I think the issue isn't with the PHP code but the table itself. Try adding this to the blade template and getting rid of data-url from your table.
Code for table:
<table class="table table-hover" data-click-to-select="true">
<thead>
<tr>
<th data-field="id" data-checkbox="true">ID</th>
<th data-field="roomname">Room name</th>
<th data-field="Desc">Description</th>
<th data-field="price">Price</th>
</tr>
</thead>
</table>
Code to populate table with data:
<script>
var $table = $('.table.table-hover');
$(function () {
var data = {!! $roomname !!};
$table.bootstrapTable({data: data});
});
</script>
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.