Search Posts

Category: angular-datatables

How to put Ng-if in array for data table in javacsript?

I am implementing datatable this table contain all row with one API hit. And I want to put condition in java script code. Data table creating through java script. I am sharing my code sample. $scope.standardOptions = DTOptionsBuilder .fromFnPromise(R.all(‘—-api call–‘).getList()) .withDOM(“<‘dt-toolbar'<‘col-xs-12 col-sm-6’f><‘col-sm-6 col-xs-12 hidden-xs’l>r>” + “t” + “<‘dt-toolbar-footer'<‘col-sm-6 col-xs-12 hidden-xs’i><‘col-xs-12 col-sm-6’p>>”) .withBootstrap(); $scope.standardColumns = [ DTColumnBuilder.newColumn(‘flightNo’).withOption(‘defaultContent’, ‘-‘), DTColumnBuilder.newColumn(‘eta’).renderWith(dataRendererETA).withOption(‘defaultContent’, ‘-‘), DTColumnBuilder.newColumn(‘etd’).renderWith(dataRendererETA).withOption(‘defaultContent’, ‘-‘), ]; API Call DATA { “_id”: “101-87450458_2016_SEP”, “flightNo”: “087”, “eta”: { “$date”: 1511868720000 }, […]

DTColumnBuilder use formatted version of cell

We have 2 files custom-dtColumns.service.js //this will create a tooltip to show all data in array if (_.has(format, ‘toTooltip’)) { var toolTipField = format.toTooltip.field; _(toolTipField).forEach(function (field) { if (field === value) { dtColumn = customDTColumnsHelperService .createTooltip(DTColumnBuilder, value, columnHeader[index], field); } }); } // add custom header width if (_.has(format, ‘toCustomWidth’)) { var toCustomWidthSet = format.toCustomWidth; _(toCustomWidthSet).forEach(function (set) { if (set.field === value) { dtColumn = customDTColumnsHelperService .createCustomWidthCell(DTColumnBuilder, value, columnHeader[index], set); } }); } custom-dtColumns-helper.service.js function […]

Data tables loads all data(total records even after pagination) when i open ngdialog in angular material?

I am using Angular Datatables along with ngMaterial trying to build a CRUD app in which I can edit and delete records, So what I have done is when I click on edit button it opens a model(Which is a dialog in ngMatrial along with data of that row) But when I am clicking on edit button dialog is opening but with this my data tables loads full data, not 10 or 25 records as […]

positiioning the component on the webpage

I am trying to show the pagination position at the top and bottom of the page. Below is my code: html code: <div class=”modal-body” id=”modal-body”> <form name=”form1″> <table id=”myTbl” datatable=”ng” dt-options=”dtOptions” dt-column-defs=”dtColumnDefs” class=”row-border hover”> <thead> <tr> <th style=”text-align: center”>Name</th> <th style=”text-align: center”>SID</th> <th style=”text-align: center”>Status</th> </tr> </thead> <tbody> <tr ng-repeat=”data in testDetails”> <td style=”text-align: center”> <div ng-show=”editingData[$index]”><input name=”editName{{$index}}” class=”form-control” type=”text” ng-model=”data.name”/></div> </td> <td style=”text-align: center”> <div ng-show=”editingData[$index]”><input name=”editSid{{$index}}” class=”form-control” type=”number” ng-model=”data.sID”/></div> </td> <td style=”text-align: center”> […]

Angular datatables sort by Descending Date not working

How to order date by Descending order in Angular Datatables? I try to explore all of related issue and found this one Display date in descending order in AngularJS datatables but not working for me. Using .withOption(‘order’, [[4, ‘desc’]]) does not work. Then how to? <table class=”table table-striped table-bordered table-hover” datatable=”ng” dt-options=”dtOptions” dt-column-defs=”dtColumnDefs”> <thead> <tr> <th class=”col-sm-3″> {{‘Name’| translate}} </th> <th class=”col-sm-2 text-center”> {{‘Company_Name’| translate}} </th> <th class=”col-sm-2 text-center”> {{‘Email’| translate}} </th> <th class=”col-sm-2 text-center”> […]

slow loading of angular datatable with large data with ng-repeat

I am dealing with a project contains angular datatable . Problem with this data table it contains about 2500 rows to display. it is taking nearly 1 min to load. pagination is also applyed it contains 500 pages each page display 5 rows based on filtering .i have tried vs-repeat and limti to filter but no luck. i cant apply server side procesing because i am getting ajax error .Any help? please Source: AngularJS