Search Posts

Category: angular-datatables

Datatables not reloading in angularjs

I have a requirement where i have to add particular products to the datatables and rebind the datatable so its count is updated. I am using MVC and angularjs 1.6.2 I am creating the datatable as follows: <table id=”dtProducts” ng-if=”AllProducts” class=”table manage-user-table offer-mgt-table market-selection-tab” datatable=”ng” dt-options=”dataTableOpt”> <thead> <tr> <th><input type=’checkbox’ class=”selectAllMarket” value=’SelectAll’ ng-model=”selectAll” > </th> <th>Product Name</th> <th>Product Type</th> </tr> </thead> <tbody> <tr dt-rows ng-repeat=”product in AllProducts”> <td><input type=”checkbox” class=”selectMarket” ng-model=”product.selected” data-offerid=”{{product.ID}}” ng-click=”toggleSelect(product.selected, $index)”> </td> […]

ng-click, ng-model not working in angularjs datatable

I have a datatable with column filters made with AngularJS. Here is the HTML: <body ng-app=”myApp” ng-controller=”appController as Ctrl”> <table class=”table table-bordered table-striped table-hover dataTable js-exportable” datatable=”ng” dt-options=”Ctrl.dtOptions” dt-columns=”Ctrl.dtColumns”> <thead> <tr> <th></th> <th>Name</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Name</th> </tr> </tfoot> <tbody> <tr ng-repeat=”user in userList”> <td> <input type=”checkbox” id=”user-{{ $index }}” ng-model=”Ctrl.checkboxValue[$index]” ng-click=”Ctrl.checkValue(user.id)” ng-true-value=”{{user.id}}” /> <label for=”user-{{ $index }}”></label> </td> <td> <a href=”#”> {{ ::user.name }} </a> </td> </tr> </tbody> </table> Here’s the script: […]

AngularJS read data from controller to table

I simply try to read out data from the balanceTableCtr and show it in the balanceTable. But it just shows me an empty table. balanceTableCtr.js: (function () { ‘use strict’; angular.module(‘BlurAdmin.pages.dashboard’) .controller(‘BalanceTableCtrl’, BalanceTableCtrl); /** @ngInject */ function BalanceTableCtrl($scope) { $scope.balanceTableData = [ { image: ‘app/browsers/chrome.svg’, algorithm: ‘SHA-256’, name: ‘Bitcoin’, price: ‘9843 $’, change: ‘12.6 %’, isChangeUp: true, amount: ‘2.452 BTC’ } ]; } })(); balanceTable.directive.js: (function () { ‘use strict’; angular.module(‘BlurAdmin.pages.dashboard’) .directive(‘balanceTable’, balanceTable); /** @ngInject […]

Filter two databases at the same time with angular-data-grid

I have two databases that I populate with two different arrays $scope.UI = {}; $scope.gridActions = {}; $scope.storeNameArray = []; $scope.selectedStore = {}; $scope.monthArray = []; $scope.dayArray = []; $scope.monthGridOptions = { data: $scope.monthArray, urlSync: true, enableSorting: true, sort: { predicate: ‘month’, direction: ‘asc’ } }; $scope.dayGridOptions = { data: $scope.dayArray, urlSync: true, enableSorting: true, sort: { predicate: ‘day’, direction: ‘asc’ } }; This is an object that is inside the arrays. The difference between […]

Angular datatables disappear when removing row using the angular way

I have created a angular datatable using the angular way (ng-repeat) by l-lin. My ng-repeat list is in below format: $scope.list = [[…],[…],[…],[…]]; By using the below function with ng-click and $index I am able to remove one item from the list $scope.deleteItem = function (index) { $scope.list.splice(index, 1); } However sometimes the datatables will disappear after removing the item. Do i need to rerender the datatable? (the angular way won’t work with .rerender()) Source: […]

How to apply button().trigger() outside DOM on angular datatables (l-lin) in AngularJS

I have created a table like below with dtInstance: <table datatable=”ng” dt-options=”dtOptions” dt-column-defs=”dtColumns” dt-instance=”dtInstance” class=”row-border hover”> </table> In controller I defined dtOptions and dtColumns: $scope.dtInstance = {}; $scope.dtOptions = DTOptionsBuilder.newOptions() .withDOM(‘frtip’) .withButtons([ { extend: “excelHtml5”, className: ‘btn btn-success buttons-excel’, filename: “List”, title: “List”, text: “Export”, exportOptions: { columns: ‘:visible’ }, //CharSet: “utf8”, exportData: { decodeEntities: true } } My question is I want to create a button outside the dt table and trigger the .withButtons […]

parsing error with angularjs 1.6.9

I am using angularjs datatables and trying to include a ng-model directive in the rendered row like so: vm.dtColumns = [ DTColumnBuilder.newColumn(null) .withTitle(”) .notSortable() .withOption(‘width’, ‘5%’) .renderWith(function (data, type, full, meta) { var html = ‘<input type=”checkbox” ng-model=”vm.selected[‘ + data._id + ‘]”/>’; console.log(html); return html; }), DTColumnBuilder.newColumn(‘number’) .withTitle(‘Number’) .withOption(‘width’, ‘35%’), DTColumnBuilder.newColumn(‘name’) .withTitle(‘Name’) .withOption(‘width’, ‘50%’), DTColumnBuilder.newColumn(‘revisionNumber’) .withTitle(‘Revision’) .withOption(‘width’, ‘10%’) ]; What I am getting is a parsing exception like this: Syntax Error: Token ‘a4e90d73bb003d8a9d52b6f’ is unexpected, […]

Datatables(angularjs) stop working correct to after editing/adding/deleting a table row

I am using Datatables with angularjs (https://www.npmjs.com/package/angularjs-datatables) When I add, edit or delete a row in the table, Datatables stop to function correct(sorting, paging, search, info, etc). I use push to add data rows on the table, splice to remove from table… Here is some of my code: var app = angular.module(‘myApp’, [‘ngSanitize’, ‘datatables’] , [‘$httpProvider’, function ($httpProvider) { $httpProvider.defaults.headers.post[‘X-CSRF-TOKEN’] = $(‘meta[name=csrf-token]’).attr(‘content’); }]); app.controller(‘UserGroupsController’, [‘$scope’, ‘$http’, ‘$sce’, ‘$timeout’, function ($scope, $http, $sce, $timeout) { $scope.groups […]

How to change direction of PDF export in datatables

I want to change direction of PDF export in datatables. I could change alignment by doc.defaultStyle.alignment = ‘right’ But I can’t change direction for RTL language. In Angularjs Datatable: { extend: ‘pdfHtml5’, text: ‘<i class=”icon mdi mdi-file-pdf”></i>’, titleAttr: ‘Export PDF’, pageSize: ‘A4’, exportOptions: { columns: ‘:visible’ }, customize: function(doc) { doc.defaultStyle = { alignment: ‘right’, // change alignment to right font: ‘IRANSans’, fontSize: 8 } }; } Now, How to change direction to rtl ? […]

Next Page »