A guide on implementing Angular-DataTable within a TypeScript project

Hey everyone, I'm currently working on a TypeScript and Angular application.

To create a data table, I decided to use Angular-DataTable.

After creating a sample application using it, I added the following code to my Controller:

constructor(protected $scope: ng.IScope, protected $element: ng.IAugmentedJQuery, protected $timeout: ng.ITimeoutService,
    protected dtOptionsBuilder: any, protected dTColumnDefBuilder:any) {

    var self = this;

    this.dtOptions = dtOptionsBuilder.newOptions()
        .withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withOption('bInfo', false)
        .withOption('bPaginate', false)
        .withOption('searching', false)
        .withOption('paging', false)
        .withOption('order', [0, 'desc']);

    this.dtColumnDefs = [
        dTColumnDefBuilder.newColumnDef(0),
        dTColumnDefBuilder.newColumnDef(1),
        dTColumnDefBuilder.newColumnDef(2),
        dTColumnDefBuilder.newColumnDef(3),
        dTColumnDefBuilder.newColumnDef(4),
        dTColumnDefBuilder.newColumnDef(5).notSortable()
    ];

Upon adding 'datatables' to my module dependencies and running the application, an error was encountered:

angular.js:13424TypeError: Cannot read property 'newOptions' of undefined
at new Controller (app.controller.js:17)
at Object.invoke (angular.js:4625)
at S.instance (angular.js:10027)
at n (angular.js:8965)
at angular.js:9362
at angular.js:15757
at m.$eval (angular.js:17025)
at m.$digest (angular.js:16841)
at m.$delegate.__proto__.$digest (<anonymous>:844:31)
at m.$apply (angular.js:17133)

I'm now seeking guidance on how to properly implement angular-dataTable in TypeScript. Any suggestions on how to add DtoptionBuilder and DtColumnDefBuilder to my project would be greatly appreciated.

jqueryangularjstypescriptdatatablesangular-datatables

Answer №1

To make this function work, you must include the DTOptionsBuilder and DTColumnBuilder

Code after modification:

constructor(protected $scope: ng.IScope, protected $element: ng.IAugmentedJQuery, protected $timeout: ng.ITimeoutService,
    protected DTOptionsBuilder: any, protected DTColumnBuilder:any) {

    var self = this;

    this.dtOptions = this.DTOptionsBuilder.newOptions()
        .withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withOption('bInfo', false)
        .withOption('bPaginate', false)
        .withOption('searching', false)
        .withOption('paging', false)
        .withOption('order', [0, 'desc']);

    this.dtColumnDefs = [
        this.DTColumnBuilder.newColumnDef(0),
        this.DTColumnBuilder.newColumnDef(1),
        this.DTColumnBuilder.newColumnDef(2),
        this.DTColumnBuilder.newColumnDef(3),
        this.DTColumnBuilder.newColumnDef(4),
        this.DTColumnBuilder.newColumnDef(5).notSortable()
    ];
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bootstrap-Select does not function properly when new rows or content are added dynamically

I have a table row with multiple select boxes for form input. When I clone that row to create a new one, the dynamically added rows encounter an issue with the select picker drop down functionality. After changing the value in the second or subsequent sel ...

jquerybootstrap-select

Show or hide the right element when clicked using ng-show in AngularJS

My goal is to toggle elements based on which one is clicked, not all at once. For instance, if I have 3 form elements and 3 buttons, when I click on button 1, I only want to toggle the corresponding form element. Here is my current code snippet: In Angu ...

javascriptjqueryhtmlangularjs

Rearranging the layout of HTML columns dynamically according to a predetermined configuration saved in the database

In my current project, I'm facing a challenge with the column arrangement in an application. We have a Listing screen that displays data for a specific case, and we also have an Admin>>Customization section where users can configure the column order. ...

javajqueryajaxjspstruts

Event handler assigned to a group of constantly changing elements

Here is my JavaScript code: $(document).ready(function(){ $('#data1').change(function(){ title = $('#title1').val(); url = $('#url1').val(); $.post('library/edit.php',{title:title, url:ur ...

javascriptajaxjquery

Utilizing Laravel and Jquery UI for asynchronous communication with the server, passing data from a post request to

I recently constructed a basic Jquery UI slider: $("#sliderNumCh").slider({ range: "min", min: 0, max: 20, step: 1, value: 20, change : function(e, slider){ $('#sliderAppendNumCh'). ...

javascriptphpjqueryajaxlaravel

Unlimited Page Scrolling with Functional Browser Back Button using jQuery

My e-commerce website features an infinite scroll function that works smoothly. However, there's an issue with the back button functionality for customers previewing products - they have to start over when navigating back on pages with 100+ products. ...

jquery

Setting the selected value of a COREUI multiselect widget

I received the following JSON response from an API. {"first_name":"Person 1","last_name":"Person 1","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="78081d0a0b17163 ...

htmljqueryjsoncore-ui

Using jQuery to provide autocomplete functionality with multiple AJAX-requested values

After diligently studying the UI site's documentation and consulting various tutorials, I managed to get my code working to some extent. It successfully ajax's in the desired list of terms, allows selection of one with the placement of its value ...

jqueryajaxjquery-uiautocompletejquery-ui-autocomplete

Error in Firefox: The Ajax request was not sent for unknown reasons

In the process of making a synchronous GET ajax request in Firefox 27.0.1, Fedora 20, and using jQuery 1.11.0: $.ajax(ajaxParam).then( function (r) { html = r.html; }, function (jqXHR) { console.log(JSON.stringify([jqXHR, $.aja ...

jqueryajaxfirefox

What's the reason behind beforeunload not triggering?

I've gone through numerous similar posts, but I'm struggling to figure out what's not quite right with this code snippet: $(window).on("beforeunload", function () { debugger handleBeforeUnload(); return false; }); function handl ...

javascriptjqueryangularjsevent-handling

Basic draggable pop-up window using HTML5 for a seamless experience

Can anyone provide me with helpful resources or tutorials to create a draggable popup using HTML5 without jQuery? I want to keep it simple and avoid external libraries like jQuery UI. Currently, I have an absolutely positioned div that looks like a popup ...

jqueryhtmlpopupdraggable

Investigate the presence of a vertical scrollbar using JQuery or JavaScript

Within an HTML report, I have applied the style "overflow:auto" to allow for dynamic data filling. I am now facing the challenge of detecting whether a vertical scrollbar exists within the report. After scouring various forums for solutions, I came across ...

javascriptjqueryhtml

Tips for displaying a multi-select dropdown in the Creative Tim Angular Material Pro filter panel

I am in need of assistance with modifying the standard Creative Tim Angular Pro Material template due to my limited CSS/SCSS skills. Could someone provide examples of the necessary changes, whether it involves altering the HTML or multiple CSS files withi ...

htmlangulartypescriptangular-material

Tips to store Google fonts in the assets directory

I've included this link in my styles.scss @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); While it works locally, the API fails on production or is blocked. How can I host it within my p ...

javascriptcssangulartypescriptsass

Resolving the non-null assertion error in TypeScript and React: A step-by-step guide

My code snippet is as follows: type ItemProps = { status?: string; } <Items status={status!} /> // encountering an error with a warning about forbidden non-null assertion // @typescript-eslint/no-non- ...

reactjstypescript

The $http patch request is failing to transmit data to the server

Recently, I started utilizing AngularJS to create a CRUD functionality using Laravel and AngularJS. I have implemented a function that serves the purpose of both updating and saving data. Here is my function code: $scope.save = function (modalstate, id) ...

jqueryangularjsjsonlaravelpatch

Using Vuelidate with Vue 3, vue-class-component, and TypeScript combination

Is there anyone who has successfully implemented Vuelidate with Vue 3 using the Composition API? Although Vuelidate is still in alpha for Vue 3, I believe that if it works with the Composition API, there must be a way to make it work with classes as well. ...

typescriptvue.jsvuelidatevue-class-components

Personalized cursor image using jQuery.css()

I have designed a .png image that I want to use as a custom cursor for a particular element with the class "next". Here is the code I am using, but it doesn't seem to be working. Is there anything important that I may have overlooked? $('.next& ...

jquerycss

Is there a way to integrate TypeScript with styled components to display suggested properties on the component?

Hey there fellow developers! I'm currently diving into the world of TypeScript and trying to get the hang of it. One thing that's bothering me is not being able to see recommended props on a styled component while using TypeScript. For instance ...

reactjstypescriptstyled-components

Fetching data from the server using Angular and parsing it as JSON

Can anyone provide some insight on the best way to use jsonObjects in ng repeat? Here is my code: This is the response I get from PHP: die(json_encode(array('sts'=>'success', 'title'=>'*****', 'msg' ...

javascriptphpangularjsjson