I am working with angularjs data table where I don't need sorting for all the columns. So I want to disable sorting for specified columns. I want to disable sorting for column no. 2 and 4 for the below case.
var app = angular.module('myApp',['datatables']);
app.controller('MyCtrl', function($scope,DTOptionsBuilder,DTColumnBuilder) {
$scope.list = [
{"eid":"10","ename":"nam1","sales":"20"},
{"eid":"20","ename":"nam2","sales":"20"},
{"eid":"30","ename":"nam3","sales":"20"},
{"eid":"40","ename":"nam4","sales":"20"}
];
$scope.vm = {};
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [0, 'asc']);
$scope.vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(1).notSortable(),
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"></script>
<script src="http://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css">
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" datatable="ng">
<thead>
<tr>
<th>Employee ID</th>
<th>name</th>
<th>sales</th>
<th>details</th>
</thead>
<tbody>
<tr ng-repeat="data in list">
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
<td> {{ data.sales }} </td>
<td>view</td>
</tr>
</tbody>
</table>
</div>
Today I got the same issue and here is the what I have found; In my case I wanted to remove sorting feature from first column since it just contain a check box.
According to the official documentation this is the code block;
app.controller('exceptionViewCtrl', ['$scope', 'DTColumnDefBuilder', function ($scope, $routeParams, DTColumnDefBuilder) {
$scope.dtColumnDefs = [DTColumnDefBuilder.newColumnDef(0).notSortable()];
}]);
But this is not worked; Then I figure out even if I disable sorting for a column, the dataTables sort order still remain. By default order is [0, 'asc']. So you need to additionally set order to target some other column instead.
So the complete html+angular code as follows;
HTML
<table datatable="" id="example2" class="table table-bordered table-hover" dt-options="dtOptions" dt-column-defs="dtColumnDefs">
// table data
</table>
Angular
app.controller('exceptionViewCtrl', ['$scope', 'DTColumnDefBuilder', 'DTOptionsBuilder', function ($scope, DTColumnDefBuilder, DTOptionsBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('order', [1, 'asc']);
$scope.dtColumnDefs = [DTColumnDefBuilder.newColumnDef(0).notSortable()];
}]);
try it:
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [0, 'asc']);
$scope.vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(1).notSortable(),
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
});
Related
I am trying to sort in datatable but, i couldn't understand how to do it. let me show what i tired to do with my code.
$(document).ready(function() {
$('#table').DataTable();
} );
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" type="text/css" media="all" />
<table id="table" class="display" style="width:100%">
<thead>
<tr>
<th>Stock</th>
<th>Rate</th>
</tr>
</thead>
#if($trades)
#foreach($trades as $trade)
<tbody>
<tr>
<td>{{$trade->stock}}</td>
<td>{{$trade->rate}}</td>
</tr>
</tbody>
#endforeach
#endif
</table>
I worked hard but unable to find what i have not done.
I think you need to move your #foreach to be inside of your <tbody> like this:
<tbody>
#foreach($trades as $trade)
<tr>
<td>{{$trade->stock}}</td>
<td>{{$trade->rate}}</td>
</tr>
#endforeach
</tbody>
To get the sorting to work, you'll have to add an option to your javascript like this:
$(document).ready(function() {
$('#table').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
Which will order your table by the 4th column (since the 3 in the above example starts counting indexes at 0) in descending order. Reference - https://datatables.net/examples/basic_init/table_sorting.html
I want to change Background color of row based on cell data, like if it matches first four characters from table cell "td", then row should change its color to red.
here is my example, it is working but it takes whole cell data.but i want row color should change once it matches first four characters from cell.
<style>
.bgRed{
background-color:red;
}
</style>
<body ng-app="myApp">
<div ng-controller="myController">
<div class="container" style="margin-top:40px;">
<div class="row">
{{error}}
<div class="col-md-6">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Class Name</th>
<th>Roll No</th>
<th>Email</th>
</tr>
</thead>
<tbody ng-repeat="std in students">
**<tr ng-class="{'bgRed': std.Name === 'Prash'}>**
<td>{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
and my table is
Table row should change to red if table cell data "Prash or Prashant" matches.instead of taking "Prashant Olekar"
how to achive this please help. Thank you
Using substring you can trim the characters of the string,
here I'm creating one more variable(filed) "trimmed_name" which is a substring of your "name" which gives you first 4 characters of your string "name".
<tr ng-repeat="std in students" ng-init="trimName(std)">
<td ng-class="{'bgRed': std.trimmed_name === 'Prash', 'bgBlue': std.trimmed_name === 'Pavi', 'bgBlack' : std.trimmed_name === 'Pava'}">{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
In Css add respective colours for respective classes
in your controller
$scope.trimName = function (std) {
std.trimmed_name = std.Name.substring(0, 4);
return std;
};
Just in case if 'Prash' dose not work use {'bgRed': std.trimmed_name === "Prash"}
Hope it helps you.
you can use a custom filter to set class according to condition of your row data,
html
<tbody ng-repeat="std in students | filter:filterColor">
<tr class="{{std.class}}">
<td>{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
</tbody>
js
$scope.filterColor = function (item) {
if (your condition) {
item.class = 'your class';
}
else
item.class = 'some other class';
return true;
};
I have got solution to my question with the help of Rajat, here is my code. but it only matches characters from 0th Position.
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/App/app.js"></script>
<style>
.bgRed {
background-color: #cfeaff;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<div class="container" style="margin-top:40px;">
<div class="row">
{{error}}
<div class="col-md-6">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Class Name</th>
<th>Roll No</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="std in students" ng-init="trimName(std)" ng-class="{bgRed: std.trimmed_name === 'Pras'}">
<td>{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
and In Controller
/// <reference path="../angular.min.js" />
var myApp = angular.module('myApp', [])
.controller("myController", function ($scope, $http, $log) {
var successCallback = function (response) {
$scope.students = response.data;
$log.info(response);
}
var errorCallback = function (response) {
$scope.error = response.data;
$log.info(response);
}
$scope.StudentsData = $http({
method: 'GET',
url: 'PKWebService.asmx/getPkData'
})
.then(successCallback, errorCallback);
$scope.trimName = function (std) {
std.trimmed_name = std.Name.substring(0, 4);
return std;
};
});
and output is
Thank you
how i can row in angular to the first
html :
<title>Add Rows</title>
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body ng-controller="MainController">
Add Row {{counter}}
<table>
<thead>
<tr>
<th width="200">Some Header</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rowContent in rows">
<td>{{rowContent}}</td>
</tr>
</tbody>
</table>
</body>
</html>
js :
angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {
$scope.rows = ['Row 1', 'Row 2'];
$scope.counter = 3;
$scope.addRow = function() {
$scope.rows.push('Row ' + $scope.counter);
$scope.counter++;
}
}]);
http://codepen.io/calendee/pen/buCHf
in the example below
it added the row in the last , how i can it to be the first row not the last.
mate, just use unshift instead of push, then it will insert to the top of array,
$scope.rows.unshift('Row ' + $scope.counter);
$scope.counter++;
have done a fiddle for you:
http://codepen.io/anon/pen/QjPxvN?editors=101
I want to add rows to the datatable when the page is displayed using a javascript array.
I am trying to figure this out, but the row does not get add. Any help is appreciated..
$('#dataTables-example').DataTable().fnAddData([
'1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Your code works fine, but only with version 1.9.x (or earlier) of the plugin.
$('#dataTables-example').DataTable().fnAddData([
'1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Following the examples on the datatables.net web site for the latest version (1.10.x):
$('#dataTables-example').DataTable().row.add([
'1', '1', '1'
]).draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
From the API, this is one of the ways to add rows:
var dataTable = $('#dataTables-example').DataTable();
dataTable.row.add(['1','1','1' ]).draw();
Demo#Fiddle
To address the reinitialization warning challenge when using DataTables, you may want to try the retrieve option. www.datatables.net/manual/tech-notes explains how it works. You can read about Retrieve here.
In acknowledgement that the above code structure isn't always particularly
attractive, DataTables as a retrieve [DT] option which can be used to tell
DataTables that you are aware that the initialisation options can't be
changed after initialisation, and that should that occur, that you
just want the DataTable instance to be returned.
This optional parameter can provide a short-cut to the explicit check
using $.fn.dataTable.isDataTable() as above when obtaining a
DataTables instance:
table = $('#example').DataTable( {
retrieve: true,
paging: false } );
Maybe you can generate the row before and then append it to the tbody just using jQuery
$("#dataTables-example > tbody").append("<tr><td>row content</td></tr>");
I have a input with an autocomplete with angularjs. This autocomplete is from a json that is represented by a table in a dropdown. I can filter the results and click the correct value but i would check if the user type some value that is not in the dropdown with an error message. Here is the code:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="uk-form-row uk-width-1-1" data-ng-repeat="items in inputList.getinputList">
<input ng-model='item.value' type="text" placeholder="Choose"/>
<!-- WORKS OK -->
<div class="uk-parent" data-uk-dropdown="{mode:'click'}">
Nav item - Works OK
<div class="uk-dropdown uk-dropdown-navbar" style="top:50px">
<table>
<thead>
<tr>
<th>First Value</th>
<th>Second Value</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in numberList.getList | filter:item.value" ng-click="setSelected(item)">
<td>{{item.first}}</td>
<td>{{item.last}}</td>
</tr>
</tbody>
</table>
</div>
</div>
The angularjs part
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.item={}
$scope.numberList={}
$scope.numberList.getList=[{'first':'Jon','last':'skeet'},{'first':'naeem','last':'shaikh'},{'first':'end','last':'game'}]
$scope.inputList={}
$scope.inputList.getinputList=[{'firstA':'AAA','lastB':'BBBB'}]
$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
$scope.idSelectedVote = idSelectedVote;
$scope.item.value=idSelectedVote.first+' '+idSelectedVote.last;
//alert(idSelectedVote);
};
}
I created a fiddle here:
http://jsfiddle.net/8y48q/22/
You can use
<tr ng-show="(numberList.getList | filter:item.value).length == 0">
<td>Nothing here!</td>
</tr>
Fiddle