sortable list in list.js doesn't seem to be working - listjs

I copied the example from http://listjs.com/examples/table/ of a sortable table, but it's not working. Can anyone tell me what I'm doing wrong please?
I have these links in my <head>:
<link rel="stylesheet" href="/includes/material-design-lite/material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
html:
<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort by name
</button>
<table>
<!-- IMPORTANT, class="list" have to be at tbody -->
<tbody class="list">
<tr>
<td class="name">Jonny Stromberg</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Jonas Arnklint</td>
<td class="born">1985</td>
</tr>
<tr>
<td class="name">Martina Elm</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Gustaf Lindqvist</td>
<td class="born">1983</td>
</tr>
</tbody>
</table>
</div>
<script src="//listjs.com/assets/javascripts/list.min.js"></script>
<script src="/includes/material-design-lite/material.min.js"></script>
js:
<script type="javascript">
var options = {
valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);
</script>


Use the absolute URL when linking list.js:
<script src="http://www.listjs.com/assets/javascripts/list.min.js"></script>

Related

Is this the Right way to Export to an Excel using angularjs

This AngularJS code works, but the problem is it shows the excel warning "This file format and extension of download.xls doesnt match", Is there a better way.
// Code goes here
var myApp=angular.module("myApp",[]);
myApp.factory('Excel',function($window){
var uri='data:application/vnd.ms-excel;base64,',
template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
return {
tableToExcel:function(tableId,worksheetName){
var table=$(tableId),
ctx={worksheet:worksheetName,table:table.html()},
href=uri+base64(format(template,ctx));
return href;
}
};
})
.controller('MyCtrl',function(Excel,$timeout,$scope){
$scope.exportToExcel=function(tableId){ // ex: '#my-table'
var exportHref=Excel.tableToExcel(tableId,'WireWorkbenchDataExport');
$timeout(function(){location.href=exportHref;},100); // trigger download
}
});
/* Styles go here */
.table-header
{
background-color: lightskyblue;
}
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="2.0.0" src="https://code.angularjs.org/1.4.8/angular.js
"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body ng-controller="MyCtrl">
<h1>Export to Excel</h1>
<button class="btn btn-link" ng-click="exportToExcel('#tableToExport')">
<span class="glyphicon glyphicon-share"></span>
Export to Excel
</button>
<div id="tableToExport">
<table border="1">
<thead>
<tr class="table-header">
<th>Team</th>
<th>Process Type</th>
<th>Cedent</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 4</td>
<td>value 5</td>
<td>value 6</td>
</tr>
<tr>
<td>10.12.2015</td>
<td>AXA Affin</td>
<td>101024 - Quota Share QS</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Can I make a table cell have a different color if the value ==sucess with angular js?

HI Im new to angular js im trying to display the json content as table.is it possible to change the color based on the value in the json content?
i've tried by adding ng-class which was not working.
Please find the code i've tried
angular.module('mApp')
.controller('mController', main);
function main($http) {
var vm = this;
vm.name = "sathya";
var jsonData = '{"header":{"columns":[{"name":"Services","subcolumns":[{"name":""}]},{"name":"Server1","subcolumns":[{"name":"Status"},{"name":"Action"}]},{"name":"Server2","subcolumns":[{"name":"Status"},{"name":"Action"}]},{"name":"Server3","subcolumns":[{"name":"Status"},{"name":"Action"}]}]},"rows":{"data":[[{"value": "Service1"}, {"value": "Running"}, {"value": "action"}, {"value": "Stopped"}, {"value": "Action"}, {"value": "Running"}, {"value": "Action"}],[{"value":"Service2"},{"value":"Running"},{"value": "Action"},{"value": "Stopped"},{"value":"Action"},{"value":"Running"},{"value": "Action"}]]}}';
vm.table = JSON.parse(jsonData);
vm.subHeaders = function () {
var subs = [];
vm.table.header.columns.forEach(function (col) {
col.subcolumns.forEach(function (sub) {
subs.push(sub);
});
});
return subs;
};
<!DOCTYPE html>
<html ng-app="mApp">
<head>
<meta charset="utf-8" />
</head>
<body ng-controller="mController as mn">
<div class="main">
<div class="bodycontent">
<div class="mainnav">
<div>
<table class="table table-bordered">
<tr>
<th colspan="{{col.subcolumns.length}}" ng-repeat="col in mn.table.header.columns">{{col.name}}</th>
</tr>
<tr>
<th ng-repeat="col in mn.subHeaders()">{{col.name}}</th>
</tr>
<tr ng-repeat="row in mn.table.rows.data">
<td ng-repeat="cell in row" ng-class="{'status_green' : cell.value=='Running', 'status_red' : cell.value=='Stopped'}">{{cell.value}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!---->
<script src="Scripts/angular.min.js"></script>
<script src="App/app.module.js"></script>
<script src="App/Main.js"></script>
</body>
</html>

you could use ng-if statement and try with this:
<div ng-repeat="i in jsonData" style="width:25%">
<table class="table table-bordered" ng-repeat="a in i.data">
<tr>
<th>Value</th>
</tr>
<tr ng-repeat="v in a">
<td ng-if="v.value !== 'Success'"> {{v.value}}</td>
<td ng-if="v.value === 'Success'" style="color:green"> {{v.value}}</td>
</tr>
</table>
</div>
plunker: http://next.plnkr.co/edit/99ySQe5flCzaDbax?preview
Hope it helps!

here what i did, and it's simple
<td><h6 ng-show="employee.status=='Active'" class="green">{{employee.status}}</h6><h6 ng-show="employee.status=='Deactive'" class="yellow">{{employee.status}}</h6> </td>

how to pass data from view to controller in angularjs by defining a multi-dimension array using ng-init in view

<body>
<div ng-app="myapp"ng-model="user"ng-init="user=[{'name':'A','email':'a#gmail.com','mobile':'9494563132','city':'banglore'},
{'name':'B','email':'B#gmail.com','mobile':'9494563132','city':'pune'},
{'name':'C','email':'C#gmail.com','mobile':'9494563132','city':'hyderebad'}] "ng-init="fuser='hello'">
<div ng-controller="myctrl" >
<table align="left">
<tr>
<td><ul>
<h1>City</h1>
<li ng-repeat="x in user">{{x.city}}</li>
</ul></td>
</tr>
</table>
<table align="center">
<tr>
<th>Select User</th>
<td>
<select ng-model="u" ng-change="getuser(name,email,mobile,city)">
<option value="">Choose name</option>
<option ng-repeat="x in user" value="{{x.name}}">{{x.name}}</option>
</select></td>
</tr>
<tr>
<table align="center" cellpadding="5" ng-model="table" bgcolor='skyblue'>
<caption><h2>User info</h2></caption>
<tr>
<th>Name</th>
<th>email</th>
<th>mobile</th>
<th>city</th>
</tr>
<tr ng-repeat="row in user|filter:fuser">
<td>{{row.name}}</td>
<td>{{row.email}}</td>
<td>{{row.mobile}}</td>
<td>{{row.city}}</td>
</tr>
</table>
<tr>
</table>
</div>
</div>
<script>
var obj = angular.module("myapp",[]);
obj.controller("myctrl",function($scope)
{
$scope.u=this.response;}
$scope.getuser=function(uname)
{
$scope.fuser=uname;
}
});
please help me to extract the data from array into table by filtering the data using dropdown option and diplay the relevant data.i can not use $http event and i dont want to initializa my array in the controller

I remembered your requirement that you dont want to put your data in controller,but i dont know how to do that so i followed the regular procedure....Hope this will helps you
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.user=[{'name':'A','email':'a#gmail.com','mobile':'9494563132','city':'banglore'},
{'name':'B','email':'B#gmail.com','mobile':'9494563132','city':'pune'},
{'name':'C','email':'C#gmail.com','mobile':'9494563132','city':'hyderebad'}];
$scope.getuser=function(uname){
for(var i=0;i<$scope.user.length;i++){
if($scope.user[i].name==uname){
$scope.e=$scope.user[i];
}
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table align="left">
<tr>
<td><ul>
<h1>City</h1>
<li ng-repeat="x in user">{{x.city}}</li>
</ul></td>
</tr>
</table>
<table align="center">
<tr>
<th>Select User</th>
<td>
<select ng-model="x" ng-change="getuser(x)">
<option value="">Choose name</option>
<option ng-repeat="x in user" value="{{x.name}}">{{x.name}}</option>
</select></td>
</tr>
<tr>
<table align="center" cellpadding="5" ng-model="table" bgcolor='skyblue'>
<caption><h2>User info</h2></caption>
<tr>
<th>Name</th>
<th>email</th>
<th>mobile</th>
<th>city</th>
</tr>
<tr >
<td>{{e.name}}</td>
<td>{{e.email}}</td>
<td>{{e.mobile}}</td>
<td>{{e.city}}</td>
</tr>
</table>
</tr>
</table>
</body>
</html>

drag and drop functionality for a tree in table using angularjs

I have a tree in a table. I would like to know how to add drag and drop functionality to the below tree using angularjs. Any help would be much appreciated. Plunkr added click here.
// html file
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body>
<h1>
Tree Table and Checkbox with AngularJS
</h1>
<hr>
<div class="wrapper" data-ng-app="testApp" data-ng-controller="treeTable">
<table class="table-nested">
<thead>
<tr>
<!-- <th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th> -->
<th>
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> Name
</th>
<th class="cell-members">
Version
</th>
<th>
Size
</th>
</tr>
</thead>
<tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="'table_tree.html'" data-ng-repeat="item in list"></tbody>
</table>
<script id="table_tree.html" type="text/ng-template">
<tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
<td class="cell-name" ng-if="level && level > 1">
<span style="padding-left: 30px" > <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}} </span>
</td>
<td class="cell-name top-border" ng-if=" (!level && level <= 1 ) |&#124 (level && level <= 1)">
<span style="padding-left:11px" ng-click="item.opened = !item.opened"></span> <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}}
</td>
<td class="cell-name top-border" ng-if="!level">
<span class="indent" ng-click="item.opened = !item.opened"></span> <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}}
</td>
<td class="cell-members top-border">
{{item.Version}}
</td>
<td>
{{item.Size}}
</td>
</tr>
<tr class="children" ng-if="item.children && item.children.length > 0">
<td colspan="3">
<table>
<tbody style="font-size:12px" ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
</table>
</td>
</tr>
</script>
</div>
</body>
</html>

Check out this directive, after trying several of them, I've found that this one is quite flexible, and I've used it successfully in one of my projects:
Angular Drag and Drop

Angular-Datatables - How do I make table sortable using default settings?

I am creating a plunker for another question but I cannot get angular-datatables to sort without configuration.
I have code from a project that responds to sorting when users click on header columns but it just does not want to sort in plunkr.
Am I missing any sort of configuration or overlooking anything?
How do I make the table sortable using default settings?
Plunkr
https://plnkr.co/edit/71RqBQ0HF7ThDyZPpc1E?p=info
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="datatables#1.9.4" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" />
<script data-require="jquery#1.10.1" data-semver="1.10.1" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script data-require="datatables#1.9.4" data-semver="1.9.4" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
<script type="text/javascript" data-require="angular.js#1.2.15" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
<script type="text/javascript" src="//rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="datatablesSampleApp">
<div ng-controller="simpleCtrl">
<div class="table-responsive">
<table datatable="ng" class="table" >
<thead style="background-color: #d8d8d8;">
<tr>
<th>Product</th>
<th>Tag Name</th>
<th>Unit Size</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<tr style="font-weight: 100;" ng-repeat="data in items | filter:{ TagName: filterTag, TagId: filterId} | filter:searchText" >
<td class="td-line-height" style="font-weight: 600;';">{{data.Product}}</td>
<td class="td-line-height">{{data.TagName}} </td>
<td class="td-line-height">{{data.UnitSize}} </td>
<td class="td-line-height">{{data.UnitCost | currency}} </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

for some reason angular-datatables.js is calling isDataTable function while jquery.dataTables.js defines this function as fnIsDataTable, so, to solve it, just add
$.fn.dataTable.isDataTable = $.fn.dataTable.fnIsDataTable;
as your first line in your controller.
here is the error message:
VM892 angular.js:9563TypeError: $.fn.dataTable.isDataTable is not a function
at Object.renderDataTable (VM1134 angular-datatables.js:753)
at Object.hideLoadingAndRenderDataTable (VM1134 angular-datatables.js:773)
at VM1134 angular-datatables.js:910
at VM892 angular.js:13777
at completeOutstandingRequest (VM892 angular.js:4236)
at VM892 angular.js:4537
updated plunker: https://plnkr.co/edit/TgpWLuiTDbb91yJeHYoX?p=preview

Resources