I am using Data table 1.10 and have a requirement to filter individual column some of the column having textbox with some values.
I want to filter that column by textbox value is it possible in
"**Yet another Data table Column Filter **" ?
This functionality available in Data table 1.10
I need same functionality in "Yet another Data table Column Filter" plugin.
Please see my attempt:
$.fn.dataTableExt.ofnSearch['html'] = function ( sData ) {
return $(sData).val();
}
var table = $('#example').DataTable();
$("#search").on('keyup', function() {
table.columns(2).search($(this).val()).draw();
});
#search {
width: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>
<table id="example">
<thead>
<tr>
<th>col #1</th>
<th>col #2</th>
<th><input type="text" id="search"/></th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td><td>text</td><td><i class='fa fa-arrows'></i><input type='hidden' value='0'/></td>
</tr>
<tr>
<td>more content</td><td>more text</td><td><i class='fa fa-bar-chart'></i><input type='hidden' value='1'/></td>
</tr>
<tr>
<td>content #2</td><td>text #2</td><td><i class='fa fa-user'></i><input type='hidden' value='2'/></td>
</tr>
</tbody>
</table>
Here is your fiddle after modification (also included yadcf css/js)
You better use datatables html5 data attributes and tell yadcf to html5 data by specifying the html5_data
So your js code will look like this:.
var table = $('#example').DataTable();
yadcf.init(table, [{
column_number: 2,
filter_type: 'text',
html5_data: 'data-search'
}]);
and the relevant td will look like this
<td data-search="1"><i class='fa fa-bar-chart'></i>
<input type='hidden' value='1' />
</td>
Related
I am trying to display data in a table.
Rows and columns are dynamic.
I want to use ng-repeat.
I am receiving data in this form:
headers: [
0: {"heading1"},
1: {"heading2"},
2: {"heading3"}
]
data: [
0:{ id:1, code:"Barry" , description:"Allen" }
1:{ id:2, code:"Naruto" , description:"Uzumaki" }
2:{ id:3, code:"Hannah" , description:"Montana" }
]
I tried this way :
<thead>
<tr>
<td ng-repeat="c in headersData">
{{c}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in columnData">
<td>{{c.id}}</td>
<td>{{c.code}}</td>
<td>{{c.description}}</td>
</tr>
</tbody>
But it's not rendering the thead.
Any solution?
var app = angular.module('testApp',[])
app.controller('MainController',function($scope) {
$scope.headersData = [
"heading1",
"heading2",
"heading3"
];
$scope.columnData = [
{ id:1, code:"Barry" , description:"Allen" },
{ id:2, code:"Naruto" , description:"Uzumaki" },
{ id:3, code:"Hannah" , description:"Montana" }
] ;
});
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="4.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<table>
<tr>
<th ng-repeat="th in headersData">{{th}}</th>
</tr>
<tr ng-repeat="x in columnData">
<td>{{x.code}}</td>
</tr>
</table>
</body>
</html>
When you receive an array like in the headers case, you must define a var name for key and value pair. Try this:
<thead>
<tr>
<td ng-repeat="(key,c) in headersData">
{{c}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in columnData">
<td>{{c.id}}</td>
<td>{{c.code}}</td>
<td>{{c.description}}</td>
</tr>
</tbody>
First of all this is a wrong way of doing.
There is a way where you can use ng-repeat="(key,value) in yourjson format.
So check that out first.
And your headers should not be declared in such a way. or in other words, should not be rendered in such a way. you are doing c in headers which will give you objects. {heading1 } and so on.
This is a very basic question with so many answers already available in Stack Overflow.
So do something like,
ng-repeat="x in headers"
and define your headers as
headers= ["heading1","heading2","heading3"]
as the one you have declared is not a valid JSON.
To check validity of JSON, you can check out JsonLint.
I am beginning level in angularJS. Now i am trying to populate a table records into my input fields when table row click event(). How to make this any suggestions please.
Thanks in advance.:-)
Note: I didn't using any json data for showing records into table.
Try using events. Here is a simple demo of how you can select a clicked element from a table:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.select = function(e) {
$scope.selected = e.toElement.innerText;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<table ng-click="select($event)">
<tr>
<td>aaa1</td>
<td>bbb1</td>
</tr>
<tr>
<td>AAA2</td>
<td>BBB2</td>
</tr>
</table>
Selected <input ng-model="selected" />
</div>
you may use follow the workflow
<table>
<tr ng-repeat="item in recordsArr track by $index">
<td ng-click="doCallFunction( $index)"> {{item.id}}</td> <td> {{item.name}}</td>
</tr>
</table>
// just think of your records
post if any other info required
I would like to swap 2 columns in a table. Finally, I succeeded the change, but only the data. The attributes of the cell (style, id, class) didn't move. I tried to move attributes with jquery (i know, not an elegant method), but it was only symptomatic treatment. After clicking the data reload button, the attributes restored.
How can I change the columns order with all attributes?
my code: https://codepen.io/qwertz_/pen/YxWMBO
<!DOCTYPE html>
<html>
<head>
<title>angT</title>
<script type="text/javascript" src="http://code.angularjs.org/angular-1.0.0rc10.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
th, td{padding: 3px 20px;border: 1px solid red;}
</style>
</head>
<body>
<div ng-controller="MyCtrl" ng-app="myApp">
<button ng-click="swap(0)">first2second</button>
<button ng-click="reload()">reload</button>
<table id="myTable" >
<tr ng-repeat="row in ths">
<th class="oo1">{{col(row, 0)}}</th>
<th class="oo2">{{col(row, 1)}}</th>
<th class="oo3">{{col(row, 2)}}</th>
<th class="oo4">{{col(row, 3)}}</th>
</tr>
<tr ng-repeat="row in rows">
<td class="o1" style="background-color:yellow;">{{col(row, 0)}}</td>
<td class="o2" style="background-color:pink;">{{col(row, 1)}}</td>
<td class="o3" style="background-color:green;">{{col(row, 2)}}</td>
<td class="o4" style="background-color:blue;">{{col(row, 3)}}</td>
</tr>
</table>
</div>
<script type='text/javascript'>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.mycol = new Array();
$scope.mycol[0] = 'id';
$scope.mycol[1] = 'name';
$scope.mycol[2] = 'db';
$scope.mycol[3] = 'let';
$scope.reload = function()
{
$scope.rows=[{id:parseInt(Math.random()*10000),name:"Liv","db":21,let:"r"},{id:parseInt(Math.random()*10000),name:"Mike",db:30,let:"u"}];
};
$scope.swap = function(i) {
var temp = $scope.mycol[i];
$scope.mycol[i] = $scope.mycol[(i+1)];
$scope.mycol[(i+1)] = temp;
};
$scope.col = function(row, mycol) {
return row[$scope.mycol[mycol]];
};
$scope.reload();
$scope.ths=[{id:"id",name:"name","db":"db",let:"letter"}];
}
</script>
</body>
Thx a lot
Simple way
You can bind colors to header name as:
$scope.styles = {
id: "yellow",
name: "pink"
};
and table will look like:
<tr ng-repeat="row in rows">
<td class="o1" ng-style="{'background-color':styles[mycol[0]]}">{{col(row, 0)}}</td>
<td class="o2" ng-style="{'background-color':styles[mycol[1]]}">{{col(row, 1)}}</td>
<td class="o3" style="background-color:green;">{{col(row, 2)}}</td>
<td class="o4" style="background-color:blue;">{{col(row, 3)}}</td>
</tr>
Once header value changes, colors will change too
Codepen DEMO
More complicated but generic
You can achieve it by replacing all table with directive (headers + data) and by using $compile rebuild all HTML table.
I have a table which I'm trying to create from a scope-object that I'm creating in my controller.
I would like the headers to take the value from 'rowHeader', which works fine. But the problem is that I wan't my cell values to be taken from 'cellValue' property.
In my fiddle I've added a "Desired table", thats how I would like the results to be in my first approach. If possible..
As you can see I would like to use a filter on one of the columns as well.
The reason that I would like to use this approach is so that I can use the checkboxlist to hide/show columns, and of course so that I can setup my table easy within the controller
Fiddle: http://jsfiddle.net/HB7LU/21469/
<!doctype html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<p>My table</p>
<table border="1">
<thead style="font-weight: bold;">
<tr>
<th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.rowHeader"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows" border="1">
<td ng-repeat="column in columns" ng-if="column.checked" ng-bind="row[column.cellValue]"></td>
</tr>
</tbody>
</table>
<p>Visible Columns:</p>
<br />
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked">{{column.rowHeader}}
</div>
</div>
<script>
var app = angular.module('plunker', []);
app.filter('percentage', function () {
return function (changeFraction) {
return (changeFraction * 100).toFixed(2) + "%";
}
});
app.controller('MainCtrl', function($scope) {
$scope.columnsTest = [
{ checked: true, cellValue: 'ModelName', rowHeader: 'Name' },
{ checked: true, cellValue: 'value1', rowHeader: 'PL' },
{ checked: true, cellValue: 'value1 / value2 | percentage', rowHeader: '+/-' }
];
$scope.rows = [
{ value1: 100, value2: 5, ModelName: "This is a cell value" },
{ value1: 15, value2: 5, ModelName: "This is a cell value2" },
{ value1: 38, value2: 2, ModelName: "This is a cell value3" }
];
});
</script>
</body>
</html>
There is a typo in the code cause the problem:
<tr ng-repeat="row in rows" border="1">
<td ng-repeat="column in columns"
ng-if="column.checked" ng-bind="row[column.cellValue]"></td>
</tr>
You don't have a scope variable called columns, change it to columnsTest.
<tr ng-repeat="row in rows" border="1">
<td ng-repeat="column in columnsTest"
ng-if="column.checked" ng-bind="row[column.cellValue]"></td>
</tr>
I have a ng-repeate table. I need to toggleClass for each selected row. Here is my code:
<tr ng-repeat="expenses in Expensereports" ng-mouseenter='showpencil=true' ng-mouseleave='showpencil=false' ng-class="{'selectedrow':selectDelete}">
<td class="text-center">
<input type="checkbox" ng-model='expenses.isDelete' class='deletebox' ng-change='selectedDeleteRow(expenses.isDelete)'/>
</td>
<td class="text-center">{{expenses.date | parseDateFormat | date}}</td>
<td class="text-center">{{expenses.type}}</td>
</tr>
My JS Code:
$scope.selectedDeleteRow = function(selected){
if(selected==true){
$scope.selectDelete=true;
}else{
$scope.selectDelete=false;
}
}
What I want is that if user check the checkbox, I need to hightlight the whole row. but leave other unchecked row alone, simply says is let user know this row is selected, if they uncheck that row, the class will be gone.
ng-class="{'selectedrow': expenses.isDelete}" should work.
var app = angular.module('myApp', []);
app.controller('test', function($scope) {
$scope.Expensereports = [
{'test': 'Row 1'},
{'test': 'Row 2'},
{'test': 'Row 3'}
];
});
tr.selectedrow {
background-color: red;
}
<div ng-app="myApp">
<table ng-controller="test">
<tr ng-repeat="expenses in Expensereports" ng-class="{'selectedrow': expenses.isDelete}">
<td>
<input type="checkbox" ng-model="expenses.isDelete" ng-change="selectedDeleteRow(expenses.isDelete)"/>
</td>
<td class="text-center">{{expenses.test}}</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
In Angular you can use [ngClass]:
<tr *ngFor="let expenses in Expensereports" [ngClass]="{'selectedrow': expenses.isDelete}">
...
</tr>