2021 EDIT:
Disclaimer, this question was written when I was brand new to both HTML and JS. If you are here looking for help for an issue, this may not be helpful as my code was pretty much a mess. Apologies for the inconvenience. The question will stay up as per site guidelines.
ORIGINAL POST
I am attempting to use create a table using angularJS which draws information from a js list of cars to present them in a table. Per the specifications this must be done using Angular, despite the easier ways existing.
My current issue, is that instead of outputting the information, each column displays the formatting code ({{ car.Model }} , for example).
My current code is as follows:
<body ng-app="">
<h2>CARS IN THE LOT:</h2>
<div class="container" ng-app="sortApp" ng-controller="mainController">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>
Manufacturer
</td>
<td>
Model
</td>
<td>
<a href="#" ng-click = "sortReverse = !sortReverse">
Year
<span ng-show = "!sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
Stock
</td>
<td>
Price
</a>
</td>
<td>
Option
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="roll in cars | orderBy:sortType:sortReverse | filter:searchCar">
<td>{{ car.Manufacturer }}</td>
<td>{{ car.Model }}</td>
<td>{{ car.Year }}</td>
<td>{{ car.Stock }}</td>
<td>{{ car.Price }}</td>
<td>{{ car.Option }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="cars.js"></script>
</body>
</html>
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.sortType = 'price'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchCar = ''; // set the default search/filter term
//BUTTON
var button = document.createElement("button");
button.innerHTML = "increment";
button.addEventListener ("click", incrementStock(0));
// create the list of cars
$scope.cars = [
{ Manufacturer: cars[0].Manufacturer, Model: cars[0].Model, Year: cars[0].Year , Stock: cars[0].Stock , Price: cars[0].Stock , Option: button},
{ Manufacturer: cars[1].Manufacturer, Model: cars[1].Model, Year: cars[1].Year , Stock: cars[1].Stock , Price: cars[1].Stock , Option: button},
{ Manufacturer: cars[2].Manufacturer, Model: cars[2].Model, Year: cars[2].Year , Stock: cars[2].Stock , Price: cars[2].Stock , Option: button},
{ Manufacturer: cars[3].Manufacturer, Model: cars[3].Model, Year: cars[3].Year , Stock: cars[3].Stock , Price: cars[3].Stock , Option: button},
{ Manufacturer: cars[4].Manufacturer, Model: cars[4].Model, Year: cars[4].Year , Stock: cars[4].Stock , Price: cars[4].Stock , Option: button},
{ Manufacturer: cars[5].Manufacturer, Model: cars[5].Model, Year: cars[5].Year , Stock: cars[5].Stock , Price: cars[5].Stock , Option: button},
{ Manufacturer: cars[6].Manufacturer, Model: cars[6].Model, Year: cars[6].Year , Stock: cars[6].Stock , Price: cars[6].Stock , Option: button},
{ Manufacturer: cars[7].Manufacturer, Model: cars[7].Model, Year: cars[7].Year , Stock: cars[7].Stock , Price: cars[7].Stock , Option: button},
{ Manufacturer: cars[8].Manufacturer, Model: cars[8].Model, Year: cars[8].Year , Stock: cars[8].Stock , Price: cars[8].Stock , Option: button},
{ Manufacturer: cars[9].Manufacturer, Model: cars[9].Model, Year: cars[9].Year , Stock: cars[9].Stock , Price: cars[9].Stock , Option: button}
];
});
function incrementStock(number){
alert("function called");
}
With cars.js being as follows:
var cars = [
{"manufacturer":"Toyota",
"model":"Rav4",
"year":2008,
"stock":3,
"price":8500},
{"manufacturer":"Toyota",
"model":"Camry",
"year":2009,
"stock":2,
"price":6500},
{"manufacturer":"Toyota",
"model":"Tacoma",
"year":2016,
"stock":1,
"price":22000},
{"manufacturer":"BMW",
"model":"i3",
"year":2012,
"stock":5,
"price":12000},
{"manufacturer":"Chevy",
"model":"Malibu",
"year":2015,
"stock":2,
"price":10000},
{"manufacturer":"Honda",
"model":"Accord",
"year":2013,
"stock":1,
"price":9000},
{"manufacturer":"Hyundai",
"model":"Elantra",
"year":2013,
"stock":2,
"price":7000},
{"manufacturer":"Chevy",
"model":"Cruze",
"year":2012,
"stock":2,
"price":5500},
{"manufacturer":"Dodge",
"model":"Charger",
"year":2013,
"stock":2,
"price":16000},
{"manufacturer":"Ford",
"model":"Mustang",
"year":2009,
"stock":1,
"price":8000},
]
You are iterating "roll in cars" but instead using "car" while printing it. Replace it as (ng-repeat = "roll in cars" to ng-repeat = "car in cars"). In original var cars collection you have used small names for property and while assigning it to $scope.cars you are writing initial letter of property in capital (e.g. "Manufacturer: cars[0].Manufacturer" it should be "Manufacturer: cars[0].manufacturer"). Additionally I have refactored your code to iterate cars in loop and push it to $scope.cars.
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.sortType = 'price'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchCar = ''; // set the default
var button = document.createElement("button");
button.innerHTML = "increment";
button.addEventListener("click", incrementStock(0));
var cars = [{
"manufacturer": "Toyota",
"model": "Rav4",
"year": 2008,
"stock": 3,
"price": 8500
},
{
"manufacturer": "Toyota",
"model": "Camry",
"year": 2009,
"stock": 2,
"price": 6500
},
{
"manufacturer": "Toyota",
"model": "Tacoma",
"year": 2016,
"stock": 1,
"price": 22000
},
{
"manufacturer": "BMW",
"model": "i3",
"year": 2012,
"stock": 5,
"price": 12000
},
{
"manufacturer": "Chevy",
"model": "Malibu",
"year": 2015,
"stock": 2,
"price": 10000
},
{
"manufacturer": "Honda",
"model": "Accord",
"year": 2013,
"stock": 1,
"price": 9000
},
{
"manufacturer": "Hyundai",
"model": "Elantra",
"year": 2013,
"stock": 2,
"price": 7000
},
{
"manufacturer": "Chevy",
"model": "Cruze",
"year": 2012,
"stock": 2,
"price": 5500
},
{
"manufacturer": "Dodge",
"model": "Charger",
"year": 2013,
"stock": 2,
"price": 16000
},
{
"manufacturer": "Ford",
"model": "Mustang",
"year": 2009,
"stock": 1,
"price": 8000
},
];
// create the list of cars
$scope.cars = [];
for (var i = 0; i < cars.length; i++) {
var carObj = {
Manufacturer: cars[i].manufacturer,
Model: cars[i].model,
Year: cars[i].year,
Stock: cars[i].stock,
Price: cars[i].price,
Option: button
}
$scope.cars.push(carObj);
}
});
function incrementStock(number) {
alert("function called");
}
body{background-color: #95b8cf;}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 3px solid #000000;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="sortApp">
<h2>CARS IN THE LOT:</h2>
<div class="container" ng-app="sortApp" ng-controller="mainController">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>
Manufacturer
</td>
<td>
Model
</td>
<td>
<a href="#" ng-click="sortReverse = !sortReverse">
Year
<span ng-show = "!sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
Stock
</td>
<td>
Price
</a>
</td>
<td>
Option
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars | orderBy:sortType:sortReverse | filter:searchCar">
<td>{{ car.Manufacturer }}</td>
<td>{{ car.Model }}</td>
<td>{{ car.Year }}</td>
<td>{{ car.Stock }}</td>
<td>{{ car.Price }}</td>
<td>{{ car.Option }}</td>
</tr>
</tbody>
</table>
</div>
</body>
Related
I am trying to implement an increment button in React that will update the value of a field in a table by one. Specifically, I am trying to increment the "stock" by one
This is what I'm currently trying:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
cars: [
{
"manufacturer": "Toyota",
"model": "Rav4",
"year": 2008,
"stock": 3,
"price": 8500
},
{
"manufacturer": "Toyota",
"model": "Camry",
"year": 2009,
"stock": 2,
"price": 6500
},
{
"manufacturer": "Toyota",
"model": "Tacoma",
"year": 2016,
"stock": 1,
"price": 22000
},
{
"manufacturer": "BMW",
"model": "i3",
"year": 2012,
"stock": 5,
"price": 12000
},
{
"manufacturer": "Chevy",
"model": "Malibu",
"year": 2015,
"stock": 2,
"price": 10000
},
{
"manufacturer": "Honda",
"model": "Accord",
"year": 2013,
"stock": 1,
"price": 9000
},
{
"manufacturer": "Hyundai",
"model": "Elantra",
"year": 2013,
"stock": 2,
"price": 7000
},
{
"manufacturer": "Chevy",
"model": "Cruze",
"year": 2012,
"stock": 2,
"price": 5500
},
{
"manufacturer": "Dodge",
"model": "Charger",
"year": 2013,
"stock": 2,
"price": 16000
},
{
"manufacturer": "Ford",
"model": "Mustang",
"year": 2009,
"stock": 1,
"price": 8000
},
]
};
}
onHeaderClick(){
}
increaseStock(event){
this.setState({cars: this.state.cars.stock + 1})
}
decreaseStock(event){
this.setState({cars: this.state.cars.stock + 1})
}
render() {
return (
<table>
<tr>
<th>Manufacturer</th>
<th>Model</th>
<th onClick={()=> this.onHeaderClick}>Year</th>
<th>Stock</th>
<th>Price</th>
<th>Options</th>
<th></th>
</tr>
{
this.state.cars.map(car => (
<tr key={car.model}>
<td>{car.manufacturer}</td>
<td>{car.model}</td>
<td>{car.year}</td>
<td>{car.stock}</td>
<td>${car.price}.00</td>
<td><button type="button" onClick={this.increaseStock.bind(this)}>Increment</button></td>
<td><button type="button" onClick={this.decreaseStock.bind(this)}>Decrement</button></td>
</tr>
))
}
</table>
);
};
}
ReactDOM.render(<App />, document.getElementById("app"))
I have tried a bunch of different implementations all to no avail. Where am I going wrong?
You are trying to update the whole array cars (which will end up being just a number) and not the specific car object.
What you should do it pass the current car as parameter at your function and update the state accordingly
<td><button type="button" onClick={() => increaseStock(car)}>Increment</button></td>
method
increaseStock = car => {
const index = this.state.cars.findIndex(cr => cr.model === car.model)
let newCar = { ...this.state.cars[index] }
newCar.stock += 1
this.setState({ ...this.state, cars: Object.assign([ ...this.state.cars ], { [index]: newCar }) })
}
TLDR;
You should update the stock value for a specific car from the array, not the cars array itself. This one seems to work.
Suggestion:
As suggested in the official ReactJS documentation try to breakdown into smaller components.
In your case, the <tr> from the map function can easily be extracted as a separate component (e.g. CarModelItem). Or even deeper to extract the buttons in a separate component. After splitting that you can just pass the increaseStock and increaseStock as callbacks to those components props.
To start, you need to add a unique id for each element
cars: [{
id: 1,
manufacturer: "Toyota",
model: "Rav4",
year: 2008,
stock: 3,
price: 8500
},
{
id: 2,
//...
}]
And now, you have to find the element with its id in your array then increment or decrement stock
increment(id) {
let items = [...this.state.cars];
const index = items.map(item => item.id).indexOf(id);
let item = {...this.state.cars[index]};
item.stock = item.stock + 1;
items[index] = item;
this.setState({items});
}
decrement(id) {
let items = [...this.state.cars];
const index = items.map(item => item.id).indexOf(id);
let item = {...this.state.cars[index]};
item.stock = item.stock - 1; // maybe you need to check if stock = 0
items[index] = item;
this.setState({items});
}
Since you have an array of cars in state you need to find a way to identify which model is meant to be updated. In this example I've attached a data attribute to the button which can be picked up in functions.
In the class methods make a copy of the cars state, find the index of the car that you want to update, increase/decrease its stock value, and then update the state.
Note: it's better to bind your class methods in the constructor.
const { Component } = React;
class Example extends Component {
constructor(props) {
super(props);
this.state={cars:[{manufacturer:"Toyota",model:"Rav4",year:2008,stock:3,price:8500},{manufacturer:"Toyota",model:"Camry",year:2009,stock:2,price:6500},{manufacturer:"Toyota",model:"Tacoma",year:2016,stock:1,price:22e3},{manufacturer:"BMW",model:"i3",year:2012,stock:5,price:12e3},{manufacturer:"Chevy",model:"Malibu",year:2015,stock:2,price:1e4},{manufacturer:"Honda",model:"Accord",year:2013,stock:1,price:9e3},{manufacturer:"Hyundai",model:"Elantra",year:2013,stock:2,price:7e3},{manufacturer:"Chevy",model:"Cruze",year:2012,stock:2,price:5500},{manufacturer:"Dodge",model:"Charger",year:2013,stock:2,price:16e3},{manufacturer:"Ford",model:"Mustang",year:2009,stock:1,price:8e3}]};
this.increaseStock = this.increaseStock.bind(this);
this.decreaseStock = this.decreaseStock.bind(this);
}
increaseStock(event) {
const { model } = event.target.dataset;
const cars = [...this.state.cars];
const index = cars.findIndex(car => car.model === model);
if (index >= 0) {
++cars[index].stock;
this.setState({ cars });
}
}
decreaseStock(event) {
const { model } = event.target.dataset;
const cars = [...this.state.cars];
const index = cars.findIndex(car => car.model === model);
if (index >= 0) {
--cars[index].stock;
this.setState({ cars });
}
}
render() {
return (
<table>
<tr>
<th>Manufacturer</th>
<th>Model</th>
<th onClick={()=> this.onHeaderClick}>Year</th>
<th>Stock</th>
<th>Price</th>
<th>Options</th>
<th></th>
</tr>
{
this.state.cars.map(car => (
<tr key={car.model}>
<td>{car.manufacturer}</td>
<td>{car.model}</td>
<td>{car.year}</td>
<td>{car.stock}</td>
<td>${car.price}.00</td>
<td>
<button
data-model={car.model}
type="button"
onClick={this.increaseStock}
>Increment
</button>
</td>
<td>
<button
data-model={car.model}
type="button"
onClick={this.decreaseStock}
>Decrement
</button>
</td>
</tr>
))
}
</table>
);
};
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>
I have v-datatable using vuetify I want to get nested data to be displayed unfortunately I can't get the nested object value this is my code
<template slot="items" slot-scope="props">
<tr #click="rowClick(props.item.name)">
<td
class="text-xs-right"
>{{ props.item.firstName + props.item.middleName + props.item.lastName}}</td>
<td class="text-xs-right">{{ props.item.gender }}</td>
<td class="text-xs-right">{{ props.item.dateOfBirth }}</td>
<td class="text-xs-right">{{ props.item }}</td>
</tr>
</template>
and this is the header
headers: [
{
text: "MCN",
align: "left",
sortable: false,
value: "medicalRecordNumber",
width: "16%"
},
{ text: "Full Name", value: "fullName", width: "16%" },
{ text: "Gender", value: "gender", width: "16%" },
{ text: "Date Of Birth", value: "dateOfBirth", width: "16%" },
{ text: "Phone Number", value: "address", width: "16%" },
{ text: "Actions", value: "action", sortable: false }
],
and my data
{
"medicalRecordNumber": "dsUlBnusoH",
"fullName": "Rozella SchusterProf. Chloe Hauck DDSAthena Hill III",
"firstName": "Rozella Schuster",
"middleName": "Prof. Chloe Hauck DDS",
"lastName": "Athena Hill III",
"gender": "Female",
"dateOfBirth": "2018-04-18",
"language": "Tigregna",
"religion": "Catholic",
"address": {
"region": "Addis Ababa",
"woreda": "bole",
"kebele": "10",
"houseNumber": "35698",
"telPhoneNumber": null,
"mobilePhoneNumber": null
},
"emergencyContact": {
"firstName": "Krista Collins III",
"middleName": "Onie Roob",
"lastName": "Dr. Vivien Miller PhD",
"emergencyContactAddress": null
}
}
i got the values but not the nested one it displays [object Object]
replace
{ text: "Phone Number", value: "address", width: "16%" },
to
{ text: "Phone Number", value: "address.telPhoneNumber", width: "16%" },
#Ktertz You just need to create a custom v-solt template with a v-for loop for every object.
Upadate: #Ktertz deleted his question, I will leave my answer here, maybe it will help someone else.
His question was related to nested objects.
It was just displaying [object Object] (Same as OP Question).
He had a list of objects like:
engines: [
{
id: 1,
name: "V8",
modules: [
{
id: 1,
moduleName: "Comp"
},
{
id: 2,
moduleName: "Enip"
},
]
}
]
My working solution was to just create a custom v-solt template with a v-for loop for every object:
headers:
{
sortable:true,
text:'Modules Formation',
value:'modules',
align:'right'
},
Now place this snipped inside your v-data-table:
<template v-slot:[`item.modules`]="{ item }">
<div v-for="module in item.modules" :key="module.id">
{{ module.moduleName }}
</div>
</template>
I have two arrays filled with JSON data: generalQuestInfo and finishedQuestleafs; object from generalQuestInfo looks like:
{
id: 1,
name: "Breaking News",
alias: "BN",
globalId: 1,
platform: "Win64",
pathway: {
status: "Robot",
name: "start case",
leafs: ["start", "teleport", "take photo", "kill", "finish"]
}
}
finishedQuestleafs looks like:
[
{
name: "start",
questId: 1
},
{
name: "teleport",
questId: 1
},
{
name: "take photo",
questId: 1
},
{
name: "kill",
questId: 1
},
{
name: "finish",
questId: 1
},
{
name: "start",
questId: 2
}
]
Where id from generalQuestInfo equals questId from finishedQuestleafs.
In Vue app I display table with data from generalQuestInfo.
But I need to compare values from generalQuestInfo pathway.leafs with finishedQuestleafs name according to ID. If pahway.leafs is in finishedQuestleafs with same ID, then I need to display fas fa-check icon, in other way - fas fa-crash.
How can I compare data in generalQuestInfo with finishedQuestleafs and display right icons? I tried to use two v-for directives, but it didn't work:(
<table align="center">
<tr>
<th>Status</th>
<th>Path name</th>
<th>Leafs Info</th>
</tr>
<tr v-bind:key="data.id" v-for="data in generalQuestInfo" v-if="data.alias == 'BN' && isActive == 1">
<td>{{ data.pathway.status }}</td>
<td>{{ data.pathway.name }}</td>
<td>{{ data.pathway.leafs }}</td> //instead of 5 data values here must be 5 icons according to finishedQuestleafs
</tr>
<tr v-bind:key="data.id" v-for="data in generalQuestInfo" v-if="data.alias == 'SAM' && isActive == 2">
<td>{{ data.pathway.status }}</td>
<td>{{ data.pathway.name }}</td>
<td>{{ data.pathway.leafs }}</td> //instead of 5 data values here must be 5 icons according to finishedQuestleafs
</tr>
<tr v-else-if="isActive == 3">
<td>NO INFO</td>
</tr>
</table>
data() {
return {
mainPageInfo: [],
generalQuestInfo: [],
finishedQuestleafs: [],
isActive: 0
}
},
First off create a method that will return appropriate icon. I believe the code of getIconClass method is self-explanatory. Then loop through leafs field in template and display name of the leaf and appropriate icon.
new Vue({
el: "#app",
data() {
return {
generalQuestInfo: [{
"id": 1,
"name": "Breaking News",
"alias": "BN",
"globalId": 1,
"platform": "Win64",
"pathway": {
"status": "Robot",
"name": "start case",
"leafs": ["start", "teleport", "take photo", "kill", "finish"]
}
}],
finishedQuestleafs: [
{ name: "start", questId: 2 },
{ name: "teleport", questId: 1 },
{ name: "take photo", questId: 1 },
{ name: "kill", questId: 1 },
{ name: "finish", questId: 1 },
{ name: "start", questId: 2 }
]
}
},
methods: {
getIconClass(id, leaf) {
return this.finishedQuestleafs.find(item => item.questId === id && item.name === leaf) ? "fa fa-check" : "fa fa-bomb";
}
}
})
.as-console-wrapper { max-height: 100% !important; top: 0; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table align="center">
<tr>
<th>Status</th>
<th>Path name</th>
<th>Leafs Info</th>
</tr>
<tr v-for="data in generalQuestInfo" :key="data.id">
<td>{{data.pathway.status}}</td>
<td>{{data.pathway.name}}</td>
<td>
<ul>
<li v-for="(leaf, index) in data.pathway.leafs" :key="index">
<i :class="getIconClass(data.id, leaf)"></i> {{ leaf }}
</li>
</ul>
</td>
</tr>
</table>
</div>
You could try making a method to check while you're in the v-for loop.
<tr v-for="data in generalQuestInfo">
<span v-if="hasQuestFinished(data.id, data.pathway.leafs)">
<!-- display stuff if hasQuestFinished() returned true -->
</span>
</tr>
And in your vue object (assuming you only want to check if its in the array:
methods:{
hasQuestFinished(questID, givenQuests){
finishedQuestleafs.forEach(function(leaf){
if(leaf.questId == questID && givenQuests.indexOF(leaf.name) >= 0){
return true;
}
});
//finished the loop without returning means no match
return false;
}
}
I'm new to angular and I have a page that will be using dtable. The table will be built in my controller but for the time being I want to add some hardcode rows until I am ready to populate my table with valid details but I have no idea how to do this.
HTML
<dtable class="full-height material"
style="height: 555px"
options="vm.tableoptions"
rows="vm.adviseraccess">
</dtable>
Controller
var vm = this;
vm.tableoptions =
{
rowHeight: 50,
headerHeight: 30,
footerHeight: 50,
columnMode: 'force',
columns:
[
{
name: "Adviser Name",
width: 75
},
{
name: "Allow Access",
width: 25
}
],
};
I tried seeing if adding items to my tableoptions would work as shown below but it doesn't
vm.tableoptions =
{
rowHeight: 50,
headerHeight: 30,
footerHeight: 50,
columnMode: 'force',
columns:
[
{
name: "Adviser Name",
width: 75
},
{
name: "Allow Access",
width: 25
}
],
items:
[
{
"name": "One"
}
{
"name": "Two"
}
]
};
And I also tried the following
vm.adviseraccess = [
{
name: "Antony"
},
{
name: "Bob"
},
{
name: "Will"
}
];
Try Like This
<div ng-controller="AngularWayCtrl as showCase">
<table datatable="ng" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in showCase.persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
</tbody>
</table>
</div>
Controller
angular.module('showcase.angularWay', ['datatables', 'ngResource'])
.controller('AngularWayCtrl', AngularWayCtrl);
function AngularWayCtrl($resource) {
var vm = this;
vm.persons=[{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
}, {
"id": 803,
"firstName": "Luke",
"lastName": "Kyle"
}];
}
for more Details please Refer this Link Angular-dataTables
I want to bring the last column 'Description' to the next line
Here is fiddle http://jsfiddle.net/pratbhoir/fNhKp/12/
It must be look like
I need table, the description td must be in the same tr.
Item name SalesCount Price
Speedy Coyote 89 $190.00
This is a Description
Furious Lizard 152 $25.00
This is a Description
Thankyou in advance for the help
You should have something like this: (I have updated your jsfiddle)
Alternatively, you can use div's in your template instead table, but I'm not sure cause I don't know ko.simpleGrid so deeply ...
HTML
<div class='liveExample'>
<div data-bind='simpleGrid: gridViewModel, simpleGridTemplate:"custom_grid_template"'> </div>
</div>
<script type="text/javascript" id="custom_grid_template">
<table class="ko-grid" cellspacing="0">
<thead>
<tr data-bind="foreach: columns">
<th data-bind="text: headerText"></th>
</tr>
</thead>
<tbody data-bind="foreach: itemsOnCurrentPage">
<tr data-bind="foreach: $parent.columns">
<!--ko ifnot: typeof rowText == 'object' && typeof rowText.action == 'function'-->
<td data-bind="text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] "></td>
<!--/ko-->
</tr>
<!-- Your "desc" should be rendered as a row -->
<tr>
<td colspan="3" data-bind="text: desc">Test</td>
</tr>
</tbody>
</table>
</script>
JavaScript
var initialData = [
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95, desc:"This is a description" },
{ name: "Speedy Coyote", sales: 89, price: 190.00 , desc:"This is a description" },
{ name: "Furious Lizard", sales: 152, price: 25.00 , desc:"This is a description" },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 , desc:"This is a description" },
{ name: "Brooding Dragon", sales: 0, price: 6350 , desc:"This is a description" },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 , desc:"This is a description" },
{ name: "Optimistic Snail", sales: 420, price: 1.50 , desc:"This is a description" }
];
var PagedGridModel = function(items) {
this.items = ko.observableArray(items);
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
//Your "desc" is not a column
],
pageSize: 4
});
};
ko.applyBindings(new PagedGridModel(initialData));