I am using the datatable plugin :
I need to group row on the data on column 2 , I am using the the below code ,
HTML :
<table class="table table-stripped table-bordered table-sm mytable ">
<thead>
<tr>
<th>{{ __('code') }}</th>
<th >{{ __('value1') }}</th>
<th >{{ __('description') }}</th>
<th >{{ __('quantity') }}</th>
<th >{{ __('amount') }}</th>
<th >{{ __('total') }}</th>
<th ></th>
</tr>
</thead>
<tbody class="provider_cpts_div">
<tr>
<td>33</td>
<td>xx</td>
<td>www</td>
<td>ww</td>
<td>ww</td>
<td>ww</td>
<td>ww</td>
</tr>
<tr>
<td>33</td>
<td>xx</td>
<td>www</td>
<td>ww</td>
<td>ww</td>
<td>ww</td>
<td>ww</td>
</tr>
</tbody>
</table>
Script :
var collapsedGroups = {};
var CptTable = $('.mytable').DataTable({
rowGroup: {
// Uses the 'row group' plugin
dataSrc: 1,
startRender: function(rows, group) {
var collapsed = !!collapsedGroups[group];
rows.nodes().each(function(r) {
r.style.display = 'none';
if (collapsed) {
r.style.display = '';
}
});
// Add category name to the <tr>. NOTE: Hardcoded colspan
return $('<tr/>')
.append('<td >' + group + ' (' + rows.count() + ')</td>')
.attr('data-name', group)
.toggleClass('collapsed', collapsed);
}
}
});
$('.mytable tbody').on('click', 'tr.group-start', function() {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
CptTable.draw(false);
});
It is not working , it seems I missed something
this based on the sample :
https://jsfiddle.net/lbriquet/ua4yLscx/
I am not sure what I missed
the missing was the'row group' plugin ,
I added the .js and .css
<script src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js"></script>
<link href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css" rel="stylesheet">
this has fix my problem ...
Related
Im using the Jquery for pagination of my data tables and it is working great. However, when i add some AJAX script to load data without page refresh, the pagination function is not working anymore. Can anyone point out my mistake? my code is as below:
My table:
<table id="data-table" class="table table-striped border " style="width:100%">
<thead>
<tr>
<th>No</th>
<th>License Plate</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
<tbody>
#foreach($bg_records as $bg_record)
#if($bg_record -> status == 1)
<tr id="">
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $bg_record -> lp}}</td>
<td> PASS</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('h:i:s')}}</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('d-m-Y')}}</td>
</tr>
#else
<tr id="">
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $bg_record -> lp}}</td>
<td> FAILED</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('h:i:s')}}</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('d-m-Y')}}</td>
</tr>
#endif
#endforeach
</tbody>
</table>
My AJAX script to load the table without page refresh
<script type="text/javascript">
var delay = 1000;
var refreshId = setInterval(function () {
$('#data-table').load(' #data-table');
}, delay);
</script>
JQuery pagination script
<script>
$(document).ready(function () {
$('#data-table').DataTable();
});
</script>
So I have this, and what I want to get is the ID or Key from each user.
For example: WxA2XLigx7V1bOxm5WNSnVkgtOu1
And I'm currently showing this so far:
This is my current code that shows the table
firebase.database().ref('Users/').on('value',(data)=>{
let Users = data.val();
document.getElementById('tablaUsers').innerHTML+='';
for (const user in Users){
document.getElementById('tablaUsers').innerHTML+=`
<tr>
<td>${Users[user].Key}</td>
<td>${Users[user].email}</td>
<td>${Users[user].name}</td>
</tr>
`;
}
And this is the code from the html
<table class="mdl-data-table mdl-js-data-table">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric" role="columnheader" scope="col">ID</th>
<th class="mdl-data-table__cell--non-numeric" role="columnheader" scope="col">Email</th>
<th class="mdl-data-table__cell--non-numeric" role="columnheader" scope="col">Nombre</th>
</tr>
</thead>
<tbody id="tablaUsers">
<tr>
<td class="mdl-data-table__cell--non-numeric"></td>
<td class="mdl-data-table__cell--non-numeric"></td>
<td class="mdl-data-table__cell--non-numeric"></td>
</tr>
</tbody>
</table>
As you see my
<td>${Users[user].Key}</td>
Is not working, it's just a placeholder. It may be a simple problem but I can´t get it or how to do it, hope anyone can help.
You should loop on the JavaScript object returned by the val() method, as follows:
firebase
.database()
.ref('users/')
.on('value', (data) => {
var obj = data.val();
Object.keys(obj).forEach((key) => {
console.log('key: ' + key);
console.log('mail: ' + obj[key].mail);
console.log('name: ' + obj[key].name);
});
});
How can I get v-for to display table data in the same form as the following html:
<tr>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Product ID</th>
<th></th>
</tr>
Currently I am using the following vue v-for code(below) but it is adding the table header(th) one below another. I would like the table header to display side by side.
<tr v-for="(column, index) in schema" :key="index">
<th scope="col">{{column}}</th>
</tr>
You just need to place v-for on the element you want to repeat, not it's parent.
For loop should be put on <th></th>
<tr>
<th v-for="(column, index) in schema" :key="index">{{column}}</th>
</tr>
Here is the official vue doc for list rendering: https://v2.vuejs.org/v2/guide/list.html
bind grid header and data separately.
<template>
<table>
<thead>
<tr>
<th v-for="(header,index) in gridHeader" :key="index">
{{header.displayName}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in gridData" :key="index" >
<td>
{{data.name}}
</td>
<td>{{data.age}}
</td>
<td>{{data.place}}
</td>
</tr>
</tbody>
</table>
</template>
<script lang="ts">
import Vue from 'vue';
export default class HelloWorld extends Vue {
private gridHeader: object[] = [
{name: 'Name', displayName: 'Name'},
{name: 'Age', displayName: 'Age'},
{name: 'Place', displayName: 'Place'}
];
private gridData: any =[{name:'Tony',age:'31',place:'India'},
{name:'Linju',age:'26',place:'India'},
{name:'Nysa',age:'12',place:'India'}];
};
</script>
<style scoped>
</style>
I have an angularjs table that looks like this:-
Here is the code below:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)"></td>
</tbody>
</table>
</div>
<script>
var app = angular.module('app',[]);
app.controller('CheckCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.check_items =
[
{
SERIAL:'Test Serial',
NAME:'Test Name',
ID : 10,
ON_OFF : '1'
}
];
$scope.rowSelected = function(row)
{
console.log(row);
};
}]);
</script>
When the checkbox is unchecked. I want a hyperlink text "Link" containing the URL 127.0.0.1/{{item.SERIAL}} to appear beside the checkbox. When the checkbox is checked an ordinary text "Checked" will appear beside the checkbox.
I am using angularjs v1.
Try this,
Should change the ON_OFF value while click on check box.
$scope.rowSelected = function(row)
{
row.ON_OFF = (row.ON_OFF=='1')?'0':'1';
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)">
<a ng-show="item.ON_OFF=='0'" ng-href="127.0.0.1/{{item.SERIAL}}">LINK</a>
<span ng-show="item.ON_OFF=='1'">CHECKED</span>
</td>
</tbody>
</table>
</div>
<script>
var app = angular.module('app',[]);
app.controller('CheckCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.check_items =
[
{
SERIAL:'Test Serial',
NAME:'Test Name',
ID : 10,
ON_OFF : '1'
}
];
$scope.rowSelected = function(row)
{
row.ON_OFF = (row.ON_OFF=='1')?'0':'1';
};
}]);
</script>
You can add conditional span checking value of the ON_OFF model like below:
<td>
<input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)">
<span ng-if="item.ON_OFF == '1'">Checked</span>
<span ng-if="item.ON_OFF != '1'"><a ng-href="127.0.0.1/{{item.SERIAL}}">Link</a></span>
</td>
I am using knockout binding to bind some data into html tables. My knockout view Model had multiple products and each product will have multiple chars. I want to display the products in one table and when i select the link "show chars" it should display the corresponding chars in below table.
This is my View Model
var ProductViewModel = function(items) {
this.items = ko.observableArray(items);
this.itemToAdd = ko.observable("");
this.addItem = function() {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd());
this.itemToAdd("");
}
}.bind(this);
};
And this is my html tables
<div id="productTable">
<table class="ui-responsive table">
<thead>
<tr>
<th >Product Name</th>
<th >Description</th>
<th >Parent?</th>
</tr>
</thead>
<tbody id="pBody" data-bind="foreach: items">
<tr class="success" >
<td><span data-bind="text: name"></span>
</td>
<td><span data-bind="text: desc"></span>
</td>
<td>show chars</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="productChars">
<div id="productCharTable">
<table class="ui-responsive table">
<thead>
<tr>
<th >Char Name</th>
<th >Description</th>
<th >Length</th>
<th >Type</th>
</tr>
</thead>
<tbody id="pBody" data-bind="foreach: $data['chars']">
<tr class="success">
<td><span data-bind="text: name"></span>
</td>
<td>asdf asdfasdf</td>
<td>10</td>
<td>String</td>
</tr>
</tbody>
</table>
</div>
I am able to bind the products into first table. But for characteristics i am not sure how to achieve the same.
Could someone please help me in figuring out how to achieve the same.
Here is the jsfiddle
https://jsfiddle.net/sirisha_k/0Ln7h2bo/7/
As #supercool pointed out you can use "data-bind='with selectedItem'" to populate the second table with chars data. For that you need to add one more item into your model called selectedItem and every time you select or add a row, you point the selectedItem to that elementdata. And use "data-bind='with selecteItem'" for second table.
var ProductViewModel = function(items) {
this.items = ko.observableArray(items);
this.selectedItem = ko.observableArray();
this.itemToAdd = ko.observable("");
this.addItem = function() {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd());
this.itemToAdd("");
}
}.bind(this);
};
and on row select call some function selectedItem($data) where $data refers to the current item.
then set that data to selectedItem in model.
function selectedItem(prod){
ProductViewModel.selectedItem(prod);
}