IF ELSE Condition in mustache Grid - javascript

<table style="font-size:12px;" class="table table-bordered accounts" id="example">
<thead>
<tr>
<th style="text-align:center;">Action</th>
<th>Plan Name</th>
<th>Sales Force</th>
<th>Natl. Acc</th>
<th>Segment</th>
<th>Example</th>
</tr>
</thead>
<tbody>
{{#{accounts}}
<tr>
<td style="text-align:center;"><i class="fa fa-cog fa-2x"></i></td>
<td>{{PlanName}}</td>
<td>{{PlanTypeName}}</td>
<td>{{ParentPlanName}}</td>
<td>{{SegmentName}}</td>
<td>
if ({{SegmentName}}=="S")
{
something
}
else
{
something
}
</td>
</tr>
{{/accounts}}
</tbody>
</table>
</script>
Load System:
var templateWithData= Mustache.to_html($('#Tmp-Plans').html(),{accounts: data});
$("#con-accounts").empty().html(templateWithData);
Html Code:
<div id="con-accounts">
</div>

In your load system you might wanna add something like
data.segmentNameCheck = function () {
return data.SegmentName == 'S'
}
var templateWithData= Mustache.to_html($('#Tmp-Plans').html(),{accounts: data});
in template do
{{#segmentNameCheck}} Something {{/segmentNameCheck}}
{{^segmentNameCheck}} Something Else {{/segmentNameCheck}}

Related

How to make footable work in a table that's being populated with JS from JSON?

I have something like this:
<table id="thatTable" class="table toggle-circle">
<thead>
<tr>
<th>ID</th>
<th>FieldA</th>
<th data-hide="all">FieldB</th>
<th data-hide="all">FieldC</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="text-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
Then a JS like this:
var fillThatTable = function (list) {
$.each(list, function (index, item) {
$('#thatTable tbody').append($('<tr>')
.append($('<td>').text(item.ID))
.append($('<td>').text(item.FieldA))
.append($('<td>').text(item.FieldB))
.append($('<td>').text(item.FieldC))
)
);
});
};
Everything works fine, the table gets the data and shows it all. Problem comes when I want to set footable() to that table, like so:
$(document).ready(function () {
fillThatTable();
$('#thatTable').footable();
});
And instead of getting something beautiful, I just receive an average filtered table, almost like I didn't put that $('#thatTable').footable(). I checked the JS are imported, they are. Is it maybe because the table doesn't have anything in the tbody? What am I missing?
Dream:
Reality:
I've updated PM's fiddle to make an easier use of FooTable: http://jsfiddle.net/0pb4x7h6/1
If your html changes to this:
<table id="thatTable" class="table toggle-circle">
<thead>
<tr>
<th data-name="ID">ID</th>
<th data-name="FieldA">FieldA</th>
<th data-name="FieldB" data-breakpoints="all">FieldB</th>
<th data-name="FieldC" data-breakpoints="all">FieldC</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="text-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
Then you can simplify your script to this:
$(document).ready(function () {
var list = [
{"ID":"1","FieldA":"A1","FieldB":"B1","FieldC":"C1"},
{"ID":"2","FieldA":"A2","FieldB":"B2","FieldC":"C2"},
{"ID":"3","FieldA":"A3","FieldB":"B3","FieldC":"C3"}
];
// No need for this
//fillThatTable();
$('#thatTable').footable({
rows: list
});
});

How to do search on Multiple table colums using javascript and bootstrap table?

I want to search do search functionality on multiple colums using bootstrap table by using javascript guide me. Here i am showing my javascript code used for search on first column. Guide me that how t use more columns using javascript.
$("#search").on("keyup",function(){
var value=$(this).val();
$("table tr").each(function(index){
if (index!==0){
$row = $(this);
var id= $row.find("td:first").text();
if (id.indexOf(value)!==0){
$row.hide();
}
else{
$row.show();
}
}
});
});
HTML
<input type="text" name="search" id="search" placeholder="Search">
<table data-toggle="table" data-sort-name="name" data-sort-order="asc" >
<thead>
<tr>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="address" data-sortable="true">Address</th>
<th data-field="birthdate" data-sortable="true">Birth Date</th>
<th>Gender</th>
<th data-field="hobby" data-sortable="true">Hobbies</th>
<th>Action</th>
</tr>
</thead>
Try this,
Without your full html table, I can only guess what it looks like and try to create something that would work
$("#search").on("keyup", function() {
var value = $(this).val().toLowerCase();
console.clear()
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
$row.find("td").each(function(i, td) {
var id = $(td).text().toLowerCase();
console.log(id + " | " + value + " | " + id.indexOf(value))
if (id.indexOf(value) !== -1) {
$row.show();
return false;
} else {
$row.hide();
}
})
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="search" id="search" placeholder="Search">
<table data-toggle="table" data-sort-name="name" data-sort-order="asc">
<thead>
<tr>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="address" data-sortable="true">Address</th>
<th data-field="birthdate" data-sortable="true">Birth Date</th>
<th>Gender</th>
<th data-field="hobby" data-sortable="true">Hobbies</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Street 123</td>
<td>03 may</td>
<td>Male</td>
<td>Code</td>
<td>None</td>
</tr>
<tr>
<td>Emma</td>
<td>Street 123</td>
<td>03 may</td>
<td>Female</td>
<td>Code</td>
<td>None</td>
</tr>
</tbody>
</table>

Access each individual custom cell with Angular bootstrap calendar

I'm working on an app where I need a calendar skeleton (without the standard events) so I can put tables inside each cell, so I'm using the Angular Bootstrap Calendar with custom cell templates. I have everything working fine in terms of displaying the custom template in each cell and being able to navigate between months, but I need to be able to access each individual day and make data available in each one.
Here's my controller:
(function() {
angular.module('myApp')
.controller('calendarController', function($scope, $state, moment, calendarConfig) {
var vm = this;
calendarConfig.templates.calendarMonthCell = 'views/calendar/dayTemplate.html';
calendarConfig.dateFormatter = 'moment';
vm.events = [];
vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
$scope.$on('$destroy', function() {
calendarConfig.templates.calendarMonthCell = 'mwl/calendarMonthCell.html';
});
});
})();
and the corresponding dayTemplate.html:
<div class="cal-month-day">
<span
class="pull-right"
data-cal-date
ng-click="calendarCtrl.dateClicked(day.date)"
ng-bind="day.label">
</span>
<!--
<small style="position: absolute; bottom: 10px; left: 5px">
There are {{ day.events.length }} events on this day
</small> -->
<!-- <table class="table table-bordered table-condensed"> -->
<table class="table table-bordered table-condensed">
<thead>
<tr>
<td>Station</td>
<td>Position</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3" align="top">1</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td rowspan="3" align="top">2</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td rowspan="3" align="top">3</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
</div>
When using the calendar as it normally is used, you can see that the days.events object has the data, but I need to access that object, or create my own so I can fill my tables. Is there a simple (or even not so simple) way to do that?
Thanks.
UPDATE: I just went back and read the docs and noticed this
An optional expression that is evaluated on each cell generated for
the year and month views. calendarCell can be used in the expression
and is an object containing the current cell data which you can modify
(see the calendarHelper service source code or just console.log it to
see what data is available). If you add the cssClass property it will
be applied to the cell.
Due to my lack of knowledge, I'm not understanding how to use this to override. If I console.log calendarCell in my calendarController it chokes because that object doesn't exist. If I'm reading this correctly, I can intercept the cell data and modify, but I'm not understanding how.
In this case, RTFM turned out to be the correct answer. Per the docs:
<div ng-controller="CellModifierCtrl as vm">
<ng-include src="'calendarControls.html'"></ng-include>
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-date="vm.viewDate"
cell-modifier="vm.cellModifier(calendarCell)">
</mwl-calendar>
</div>
goes with this in the controller:
vm.cellModifier = function(cell) {
console.log(cell);
if (cell.label % 2 === 1 && cell.inMonth) {
cell.cssClass = 'odd-cell';
}
cell.label = '-' + cell.label + '-';
};
and voila!, you have access to the data. I'm still trying to figure out how to pass additional data into the function, but I'll open a separate question for that.

CSS class missing on angular view

index.html:
<div ng-view="myview.html"></div>
myview.html:
<table class="table table-striped table-hover">
<tr>
<td>Name</td>
<td>Product</td>
</tr>
<tr ng-repeat="deal in deals" class="clickableRow">
<td>{{deal.name}}</td>
<td>{{deal.product}}</td>
</tr>
</table>
script.js:
$(document).ready(function($) {
$(".clickableRow").click(function() {
console.log("click");
});
}); // does nothing
console.log($(".clickableRow").length) // returns 0
I want to do some work when the user clicks on the clickableRows rows.
Thanks
why do you mix jquery and angularjs like this ? you can just do it with angularjs
<tr ng-repeat="deal in deals" ng-click="clickRow(deal)">
and in your controller
$scope.clickRow = function(deal) {
console.log(deal)
}

Create table using Mushtache.js

I am facing a problem while creating a table using Mushtache.js
View file:
<table class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Email ID</th>
<th class="header">Contact Number</th>
<th class="header">Edit</th>
</tr>
</thead>
<tbody>
<div id="eTableList"></div>
<script id="eList" type="text/template">
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
</script>
</tbody>
</table>
JS code:
function createTable(jsonEData){
var template = $("#eList").html();
expList = Mustache.render(template, jsonEData);
$("#expertTableList").html(expList);
}
I am calling this method as
<script language="javascript">
$(document).ready(function(){
createTable(<?php echo $this->eList;?>);
})
</script>
and the value of $this->eList = jsonEData is
[
{
"id": "52d3d523bdde226f17a581ba",
"name": "shgajsah",
"email": "0",
"contact_number": 2147483647
},
{
"id": "52d3d5c8bdde22c817a581ba",
"name": "fffsdf",
"email": "asa#ddjdj.com",
"contact_number": 323323232
}
]
I am not getting any error but table is not getting populated using above code. So please tell me where I am doing wrong?
You're not iterating over your items, give this a shot:
{{#.}}
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
{{/.}}
or perhaps:
{{#each .}}
<tr> ... </tr>
{{/each .}}

Categories