Questions tagged [angular-datatables]

angular-datatables is a powerful wrapper for jQuery's dataTables library specifically designed to seamlessly integrate with AngularJS/Angular2+. This unique module offers not only a smooth datatable directive but also a set of helpful options helpers, making it the go-to solution for leveraging the full potential of dataTables within your Angular applications.

Once an item is added, the table vanishes into thin air

I have a DataTables setup to show a list of project names, and I have a button that should add an item to the displayed array. However, when I click the button, the table disappears. Below is the code snippet: view.html <button ng-click="vm.add()"> ...

Unveiling the secret to accessing the table itself from dtOptions in AngularJS-Datatables

I'm trying to create a download button for a CSV file, but I need to exclude specific columns from the table. I have discovered an option called "exportOptions" that is used in jQuery DataTables to define which columns should be exported. It seems that th ...

What is the best way to display a scrollbar at the bottom of the table while setting the table height to

After writing the css provided below, I noticed that it works fine on my laptop screen. However, when viewing it on a larger monitor, there is empty space at the end of the table. .wrapper{ width:auto; height: 500px; overflow-x: scroll; ...

Updating the parameters when clicking on each pagination button: A guide

Does anyone have advice on implementing pagination? I am currently working on loading a datatable with a few records initially. Once the page is loaded, I want to be able to click on pagination buttons like next or any pagination buttons to display a new s ...

What could be causing angular-datatable to not properly fill columns in Bootstrap 4?

I have been attempting to create a responsive table using angular-datatables (for angular 7) and bootstrap 4, but I am encountering issues with the current appearance of the table: Current HTML code: <div class="row"> <d ...

Show JSON information in an angular-data-table

I am trying to showcase the following JSON dataset within an angular-data-table {"_links":{"self":[{"href":"http://uni/api/v1/cycle1"},{"href":"http://uni/api/v1/cycle2"},{"href":"http://uni/api/v1/cycle3"}]}} This is what I have written so far in my cod ...

Unlocking Column Data Tooltips in Angular Datatables: A Step-by-Step Guide

I have a single datatable and was wondering how to implement tooltips for when hovering over table cells. I tried the following code snippet, which successfully populated the tooltips. However, I am interested in achieving the same functionality using Angu ...

`Angular 6 data table server-side AJAX call issue persists`

Currently utilizing angular datatable version 1.10.19. You can check this out for the server-side Angular approach I have developed a web API in C# to fetch data in the desired format. The server side functionality is working smoothly with the following d ...

Error not caught: [$injector:modulerr] Visit http://errors.angularjs.org/1.7.9/$injector/moduler for more information

I encountered an error in the console while loading my application. I am new to angular and any help would be greatly appreciated. I am attempting to export the datatable into excel, and I believe the issue lies with this line: angular.module('myApp','dat ...

What is the best way to determine the total number of rows that include a specific value?

Using AngularJS, I have a table that is populated with data using the ng-repeat directive. Here is an example: http://jsfiddle.net/sso3ktz4/ I am looking for a way to determine the number of rows in the table that contain a specific value. For instance, ...

Issue with Angular Datatable not displaying content when [dtTrigger] directive is included in the HTML table - Angular 14

Upon adding [dtTrigger] = "dtTrigger" to the HTML table, I encountered an issue where the datatable ceased rendering. All the features of the datatable were no longer visible on the page. Removing [dtTrigger] = "dtTrigger" from the HTML ...

Anguar 9 is experiencing issues with loading datatable pagination, search, and sorting functionalities

My problem lies in the pagination, search, and sorting functions not loading properly in my data table despite the data binding correctly. I have provided my html, component, and service files for reference. .html <table class="table table-striped ...

Obtain item from DataSource in Angular's MatTable

In my transaction-history.component.ts file, I have implemented a material data table that fetches data from a query to display it. Here is the code snippet: import { Component, OnInit } from '@angular/core'; import { Transaction } from '../models/transac ...

Guide on transferring information obtained from a service to an Angular datatable

Recently, I started working on Angular 4 and encountered an issue while trying to display data from an Angular service in JSON format using angular-datatable. Despite trying various options, I am unable to get the data to display within the columns of the ...

Applying a custom class to a particular row in an AngularJS datatable using the created

I am currently working with AngularJS datatables and I want to apply a custom class to a row if a specific condition is met. Here's what I have attempted so far: this.dtOptions = DTOptionsBuilder.newOptions() ... .withOption('createdRow', f ...

Form a column containing both row object data and html code elements

I am in the process of creating a unique column within my table, allowing me to execute specific actions and generating HTML code based on the object defining the row. Being new to Angular, I believe I should utilize $compile, but I am unsure of how to pr ...

What could be causing the angular Data table to not display properly?

I am currently exploring Angular Datatables and have a question about re-rendering the datatable after it has been hidden. Can anyone provide guidance on how to achieve this? In my project, I have two components - Parent and Child - that can be hidden or ...

The Subject<T> generic type needs to be provided with 1 type argument

Currently, I am setting up Angular Datatables the Angular Way using Angular 6 and encountering an error that I cannot find in any of the documentation. (TS) Generic type 'Subject' requires 1 type argument(s) When hovering over "Subject" in the ...