Accessing data from datatables in a typescript component in HTML format

I need to retrieve the selected mfRowsOnPage data, which is currently set at 10. The user can later choose a different value such as 5 or 15. I also require information on which page the user is viewing, for example, the 1st or 2nd page.

This is the table I am working with. 

<table class="table" [mfData]="stacklist_table| selectedcolumn | search : searchQuery | filter: addFilter : selected" #stacklist="mfDataTable" [mfRowsOnPage]="10">
          <thead>
            <tr>
              <th *ngFor="let colValues of stacklist.data | column: '' : ''">
                <mfDefaultSorter by="{{colValues}}">{{colValues|translate}}</mfDefaultSorter>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr draggable *ngFor="let stack of stacklist.data" [dragOverClass]="'drag-over-border'" [dragData]="stack" [class.active]="checkIfStackElementIsSelected(stack)" (click)="setStacklistRow(stack, $event)">
              <td *ngFor="let rowValues of stack | row">{{ rowValues }}</td>
            </tr>
          </tbody>
          <tfoot>
            <tr style="height: 50px;">
              <td colspan="6">
                <mfBootstrapPaginator [rowsOnPageSet]="[50,100,150]" style="position:fixed; margin-top: -15px"></mfBootstrapPaginator>
                <!-- <mfBootstrapPaginator [hidden]='!hideElement' (dblclick)="eventEmitDoubleClick($event)" [rowsOnPageSet]="totalVisibleCount"></mfBootstrapPaginator> -->
                <!-- <input [hidden]='hideElement' [(ngModel)]="newCount" (click)="doneEditing(newCount)" autofocus /> -->
              </td>
            </tr>
            <tr (click)="loadMoreStackElements()">Load more</tr>
          </tfoot>
        </table>

Can anyone guide me on how to achieve this task? I am new to it and finding it difficult to access this data.

https://www.npmjs.com/package/angular2-datatable

javascriptangulartypescriptdatatables

Answer №1

Have you attempted using [attr.mfRowsOnPage]='10' to see if it resolves the issue?

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

Is there a way to determine the number of code lines in all TypeScript files by utilizing tslint?

Looking to retrieve line count of code in all .ts files using tslint? Is there a way to obtain the total line count of code in all .ts files with the help of tslint? I haven't been able to find any information about this feature in the ...

angulartypescripttslint

Targeting lightgallery.js on dynamically added elements in Javascript: The solution to dynamically add elements to

I am facing a challenge in targeting dynamically added elements to make them work with lightgallery.js. Take a look at the example below: <div id="animated-thumbs" class="page-divs-middle"> <!-- STATIC EXAMPLE --> ...

javascript

The inversify middleware is executed a single time

I utilize Inversify for object binding in the following manner: container.applyMiddleware(loggerMiddleware); let module = new ContainerModule((bind: interfaces.Bind) => { bind<Logger>(TYPES.Logger).toConstantValue(logger); bind<ILogger ...

javascripttypescriptinversifyjs

What is the method for consistently rotating the object regardless of the camera's orientation?

I am trying to rotate an object along the world axis while considering the direction of the camera, so that the rotation remains consistent even when the camera changes direction. The current code allows me to rotate a sphere along the world axis. However ...

javascriptthree.jsquaternions

Discovered a total of 55 security flaws, categorized as 1 low-risk, 32 moderate-risk, 21 high-risk,

npm install 1 package removed, and 1819 packages audited in 30 seconds 100 packages are seeking funding run `npm fund` for more information 55 vulnerabilities found (1 low, 32 moderate, 21 high, 1 critical) To fix issues that don't need immediate ...

angular

CORS problem in Chrome when using AngularJS and Symfony 3

I've been dealing with a bug on my backend and frontend for the past week. I created a REST API (php/symfony) to manage books and authors. Initially, I had trouble with cross-origin requests on DELETE, which has been resolved. However, now I am facin ...

javascriptphpangularjssymfonygoogle-chrome

Utilizing jQuery's find() method to locate elements and retrieve their attributes

Here is a basic example of an XML file: const mpd = `<AdaptationSet id="1" lang="eng" mimeType="audio/mp4"> <Representation codecs="mp4a.40.2" id="5" mimeType="audio/mp4"></Repr ...

javascriptjquery

What is the best method for extracting information from quills and transmitting it to the server?

Currently, I have incorporated the Quill text editor into my project. If you are interested in learning more about Quill Editor, you can check it out here. My main objective is to obtain the data from the editor and send it to the server using an AJAX cal ...

javascriptjqueryquill

Assign a CSS class when the page is loaded

I have the following HTML code: <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-sidebar-closed" style="background-color: #F5F5F5"> When the page loads, the sidebar closed CSS will be applied. Currently, I am us ...

javascriptjqueryhtmlcss

How to implement a delay for submenu dropdown in Bootstrap 3

I am trying to implement a delay on a submenu that I have created, rather than the entire bootstrap3 dropdown menu. The goal is to allow users to easily move their cursor to the submenu without it closing unexpectedly. Although the jquery code should still ...

javascriptjqueryhtmlcsstwitter-bootstrap

TensorflowJS Error: The property 'fetch' cannot be read as it is undefined

I am working on an Angular 7 application and attempting to load the mobilenet model by following the instructions in this example. To do this, I first installed tensorflowjs using the command npm install @tensorflow/tfjs (based on the steps provided in th ...

javascriptangulartypescripttensorflowtensorflow.js

Issue with jQuery 'on' event not triggering following 'load' event

I am facing an issue on a page where similar events occur but when new content is loaded halfway through, most of the jQuery functionalities stop working. The scenario involves answering questions in a 'game' format using AJAX calls. Once all que ...

javascriptphpjqueryhtmlajax

What is the importance of having an index.js file, even when the main entry point in package.json is changed to app.js?

I recently made a modification in my react application by switching the main entry point from index.js to app.js. However, I noticed that if I do not import app.js into my index.js, the program crashes. Does anyone have any insight into why this may be h ...

javascriptreactjspackage.jsonentry-point

Using ng-bootstrap table to select multiple rows in a range with the SHIFT key

Is there a way to choose multiple rows at once in an ng-bootstrap table by holding down the SHIFT key? (similar to how it works in react-data-grid) ...

angularng-bootstrap

Exploring Angular 9: Experimenting with iterating over a collection of objects and performing validations

Forgive me if this is a basic question, but I am new to Angular 9 and json. I am attempting to iterate through a list and only create a table row if the correct ID matches the ID passed from the previous page link. I am struggling to make the if statement ...

jsonangulartypescript

The JavaScript function Date().timeIntervalSince1970 allows you to retrieve the time

For my React Native app, I currently set the date like this: new Date().getTime() For my Swift App, I use: Date().timeIntervalSince1970 Is there a JavaScript equivalent to Date().timeIntervalSince1970, or vice versa (as the data is stored in Firebase clo ...

javascriptreact-native

Retrieve the value of an object property within a function

I'm facing a bit of a challenge here and couldn't find a solution. Here's an illustration of the object I am working with: obj = { key1 : {val : "hi", val2 : "pizza"}, key2 : {val : "hello", val2 : "cheese"} ...

javascriptjquery

Is there a bug in NodeJS that causes an error when a return statement is used with a line feed before the string to be returned?

I am attempting to call a function from a module in order to generate an HTML string. When the function is written with a line feed (LF) between the return statement and the string declaration as shown below, the return value becomes "undefined"... export ...

javascriptstringnode.jsreturnnewline

What could be causing my array/collection/list to not display properly while using the `map()` method for iteration?

I often come across this question, but have never found a suitable duplicate target. Most of the time, there is too much irrelevant code to sift through. In this question, I am attempting to create a simple example that can serve as a duplicate target. He ...

javascriptreactjs

Troubleshooting problems with AJAX in WordPress

I have been attempting to transfer an array from PHP to JavaScript in order to display search results from a database. After converting the array into JSON format, I am facing difficulties in retrieving it. Despite having colleagues experienced in AJAX, we ...

javascriptphpjsonajaxwordpress