I have some json data I get from my server that has a date field formatted like "StartDateTime":"2014-09-04T18:14:26Z"
i create a table as follows:
<table class="table table-condensed table-bordered table-striped table-hover responsive">
<tr><th>Title</th><th>Start Date</th></tr>
<tr ng-repeat="eachEvent in Events | orderBy:StartDateTime">
<td><span>{{eachEvent.Title}}</span></td>
<td><span>{{eachEvent.StartDateTime|date:'short'}}</span></td>
</tr>
</table>
the events are not ordered correctly by the start date. My question is what do I need to do to get this date to sort correctly. Fyi, not included in my example is clicking on the column to sort by date and reverse it. When I do this the dates are sorted correctly. So what I need is the initial sort to be done correctly.
here is a plunker example
You are simply missing quotes around StartDateTime. The following works in your example.
<tr ng-repeat="eachEvent in Events | orderBy:'StartDateTime'">
Related
Hello guys I hope you can help me, I'm using bootstrap table to order the data from json query, specially this source example and I'm using chrome:
<link href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<table
id="table"
data-toggle="table"
data-flat="true"
data-search="true"
data-url="http://127.0.0.0:8000/hello">
<thead>
<tr>
<th data-field="field.name" data-sortable="true">Name</th>
<th data-field="field.count" data-sortable="true">Stargazers</th>
<th data-field="field.count.forks" data-sortable="true">Forks</th>
<th data-field="field.description" data-sortable="true">Description</th>
</tr>
</thead>
</table>
This works fine, the problem is that If I try to re order data that previously I edit the dome with a for it shows again the data in the json object and order the row.
I think, for some reason I need to append data to the json object the server responses, the issue is that I can not see where is or which is the variable name where boostap table storage this information, I can see the json in the network option "in chrome" but I need to get the name variable to append more data.
It would help me a lot to know how to get this, any idea ?
I am using bootstrap-table to show tables in my page and I use TableExport.js , FileSaver.js and .xlsx.core.min.js libraries in order to save the table in .xlslx format.
The problem is that the below column in excel is shown in general format, causing the values to be displayed like 1,00582E+11, while the right value is 100582012421.
I tried data-tableexport-msonumberformat="\#" to force export process to treat this column as a text, but the result didn't change. I also read this similar question and I create a CSS class
.text{
mso-number-format:"\#";/*force text*/
}
but neither this solution worked for me..
<table id="mytable" class="table table-hover"
...
data-url="myfile.json"
...
>
<thead>
<tr>
...
<th data-field="productId" data-tableexport-msonumberformat="\#">Product</th>
...
</tr>
</thead>
</table>
Use into td the class tableexport-string
<td class="tableexport-string">{{$Rep->deviceName}}</td>
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");
});
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>
My program uploads an excel file and reads it out except in reverse order. It's an Array of Objects and I cant seem to get ng:repeat to spit out the objects in reverse order.
here is what the excel spread sheet looks like
here is the actual result
<table class="table table-striped table-bordered">
<tbody>
<tr ng:repeat="row in sheet.sheet">
<td ng:repeat="cell in row | orderBy : sortingOrder : reverse" ng:bind="cell"></td>
</tr>
</tbody>
</table>
here is a visual of the array of objects from the console
try this
<table class="table table-striped table-bordered">
<tbody>
<tr ng:repeat="row in sheet.sheet">
<td ng:repeat="cell in row | orderBy : expression : reverse" ng:bind="cell"></td>
</tr>
</tbody>
</table>
your expression can be anything from your scope object
I actually found it easier to flip the direction of the entire table with css! Thank you everyone for your help!
#container { direction: rtl }
This was much easier than trying to reorder the objects into an array.