Exported excel files cannot contain multiple footer rows in Datatable

Currently, I'm working on creating a Datatable Excel file that can support multiple footers along with an export option.

However, I've run into an issue where the footer is only being generated in a single cell without support for multiple lines.

I'd like to know if it's possible to create multiline footers in the exported excel file. If so, how would I go about implementing this using javascript?

Alternatively, is there another workaround that could achieve the desired result?

Below is a snippet of code showcasing how I have set up the datatable in JavaScript and added a tfoot element to the table:

'<tfoot id="reportTblFoot' + chartIndex+ '">'+
'</tfoot>'

Here is a variable representing the table footer:

var footer1 = $("<tr />");

The data is then appended to the footer as follows:

footer1.append(
    "<th>" +
    "<div style='font-style:italic;font-size:10px'>" +
    "* Applicable row 1<br>\n" +
    "** Not Applicable row 2<br>\n" +
    "*** Not Applicable row 3\n" +
    "</div>" +
    "<div>" +
    "<font size='1' color='grey'>**** Not Applicable row 4</font>" +
    "</div>" +
    "</th>"
);

footer1.append("<th style='display:none'/>");
footer1.append("<th style='display:none'/>");

$(tfoot).append(footer1);

To enable the footer in the datatable properties, ensure that 'TRUE' is applied:

buttons: [
{
extend: 'excel',
footer :true,
filename : fileName,
title : rprtTtl,
orientation: "landscape",
pageSize : "A3",
}]

Answer №1

I successfully discovered the solution to my own inquiry.

In this case, I need to replace data with a new line (\n) and then pass it to the footer function. Essentially, this serves as a workaround for passing data into the footer.

 exportOptions : {
                stripNewlines: false,
                format : {
                         footer : function (data, column, row){
                         console.log(data.replace(/<br\s*[\/]?>/gi,'\n'));
                         return data.replace(/<br\s*[\/]?>/gi,'\n');
                                                              }
                          }
                 },

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

Saving information on localStorage is not possible

Recently, I created a demo for a basic Login and Logout application that utilizes an access token. If a user attempts to access another page without logging in (meaning the access token is null), they are redirected back to the Login page. Initially, I use ...

Retrieving the chosen option from a dropdown menu using AngularJS

<tr (click)="onRowClick(myDropDownList.value)"> <td> <select #myDropDownList (click)="$event.stopPropagation()" (change)="onChange($event.target.value)"> <option *ngFor="let n of numbers" [value]="n">{{n}}</option> </se ...

What is the reason behind the execution of componentDidMount occurring after componentWillUnmount?

I have been exploring the differences between componentDidMount and componentWillUnmout by experimenting with the following code: class App extends React.Component { constructor(props) { super(props); this.state = { name: "", ...

The MUI Theming feature with primary color set to light seems to be causing confusion with the light color property

Trying to grasp the concept of MUI theming. There is a section dedicated to theming where it mentions the ability to change the theme. My query is: Within the primary color, there are three colors that can be defined: main, dark, and light. I'm unsur ...

Avoid form submission when the 'enter' key is pressed in Edge, but not in Chrome or Firefox

I'm dealing with an issue in HTML where a 'details' tag is set to open and close when the user presses enter. However, on Edge browser, pressing enter on the 'details' tag actually submits the form. I've been tasked with preve ...

What is the best way to retrieve the current value of a range slider?

Having some trouble with the "angular-ranger" directive that I loaded from a repository. Can anyone assist me in figuring out how to retrieve the current value of the range slider? Any guidance or suggestions would be greatly appreciated! For reference, ...

Using ngFor results in duplicate instances of ng-template

I'm facing a challenge with the ngFor directive and I'm struggling to find a solution: <ng-container *ngIf="user.images.length > 0"> <div *ngFor="let image of images"> <img *ngIf="i ...

VueJS is unable to identify the variable enclosed within the curly braces

I recently started learning VueJS and I've hit a roadblock. My goal is to display a variable, but for some reason, instead of seeing the product name, all I get is {{product}} Here's the HTML code I'm using: <!DOCTYPE html> <html l ...

Tips for Adding Items to an Infinite Loop

Could you please review This Demo and advise me on how to continuously load items into the ul list in an endless manner? Currently, I have this code set up to display the list but I want it to keep adding new items to the end every time. var item = $(". ...

Manipulate the DOM elements within the ng-repeat directive

Hello, I am currently new to AngularJS and have just begun learning how to create directives. While working on a sample project, I encountered an issue with accessing DOM elements rendered inside my directive. Some elements were not accessible in the link ...

Bootstrap modal not displaying in full view

I recently ran into some issues while using a jQuery plugin with my bootstrap modal on my website. After implementing jQuery.noConflict(), I encountered a problem where the program no longer recognized $, forcing me to replace all instances of it with jQue ...

Moving back and forth between tabs and frames

Recently, I came across a website that requires entering the IEC code, Bank IFSC codes, and a captcha. The website can be accessed at: IEC codes : 0392032449 0906008051 IFSC code : HDFC0000102 DEUT0797TRS After providing the necessary details and ...

What is the best way to securely store a sensitive Stripe key variable in an Angular application?

When implementing Stripe payment system in my Angular App, I often wonder about the security of storing the key directly in the code as shown below. Is this method secure enough or should I consider a more robust approach? var handler = (<any>windo ...

Having trouble with radio button validation in JS?

I'm having difficulty understanding why the radio button is not staying checked when I select another option. To demonstrate, I created a fiddle where initially the "diy" button is selected but switching to "paid" causes the radio button to jump back ...

Troubleshooting issues with extending Material UI theme using Module Augmentation

I want to customize the background field in the palette by adding an "input" property and updating the Theme to include different types, like this: export const lightTheme = createTheme(commonTheme, { palette: { mode: 'light', backgroun ...

Can you explain the distinctions between Vue JS and React JS?

As I delve into learning Vue Js and React Js, my search for a detailed comparison between the two on Google left me unsatisfied. I came across resources answering the singular questions "What is Vue js?" and "What is React Js," but none that directly comp ...

Express.js Passport authentication automatically fails to skip the strategy

UPDATE The code has been relocated from the inner passport local-signup to a separate handler and it is functioning correctly. The issue seems to be with Passport and its utilization of the local-signup, however, the reason behind this is unknown to me. ...

Employing absolute picture placement

I have a collection of clipped images, each with an absolute position: <img style='position:absolute;clip(xpx xpx xpx xpx);'/> <img style='position:absolute;clip(xpx xpx xpx xpx);'/> <img style='position:absolute;cl ...

What is the best approach for designing the architecture of a server-side node.js application?

Can you recommend a suitable architecture or pattern for building server-side applications using node.js? For the front-end, I plan on implementing a backbone.js MVC framework and utilizing websockets for communication. If you could provide some examples ...

Animating background color change with scroll in React using fade effect

Can someone help me with implementing a fading animation for changing the background color on scroll in React? I have successfully achieved the background change effect, but I'm struggling to incorporate the fading effect. import React from "reac ...