Guide on building a personalized Print Preview interface with Datatables.Net in Angular

I'm utilizing Datatables.Net within my Angular project and everything is functioning properly. I have successfully added a Print Button and can preview the table contents. However, I am looking to customize it further by adding additional details just above the table, allowing me to display specific data in the Preview mode. My goal is to be able to print or save the content as a .pdf.

I am seeking a solution that will enable me to insert dynamic HTML code that will be rendered in the Print Preview.

Here is the initialization method of my Datatable:


$('#myTable').DataTable({
    data: this.data,
    retrieve: true,
    orderClasses: false,
    responsive: true,
    scrollX: true,
    paging: true,
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'excelHtml5',
            title: 'Excel',
        },
        {
            extend: 'print',
            title: 'Print Table',
        }
    ],
    "columns": [
        { "data": "Col1", className: "text-center", width: "17%" },
        { "data": "Col2", className: "text-center", width: "17%" },
        { "data": "Col3", className: "text-center", width: "20%" },
        { "data": "Col4", className: "text-center", width: "20%" },
        { "data": "Col5", className: "text-center", width: "17%" }
    ]
});

CSS references in index.html:


<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">

Script reference in my angular-cli:


"assets/datatable/js/jquery.dataTables.min.js",
"assets/datatable/js/dataTables.buttons.min.js",
"assets/datatable/js/buttons.flash.min.js",
"assets/datatable/js/jszip.min.js",
"assets/datatable/js/pdfmake.min.js",
"assets/datatable/js/vfs_fonts.js",
"assets/datatable/js/buttons.html5.min.js",
"assets/datatable/js/buttons.print.min.js",
javascriptjqueryhtmlcssangular

Answer №1

If you're looking to enhance your DataTables printing capabilities, try the following code snippet.

Simply insert the code below beneath your print title in your script:

 {
       extend: 'print',
       title: '',
       customize: function (win) {

       $(win.document.body)
      .css('font-size', '10pt')
      .prepend(
      '<img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />');

       $(win.document.body).find('table')
       .addClass('compact')
       .css('font-size', 'inherit');

       var innerHtmlData = "<div class=" + '"row text-center" style="font-size:22px;font-weight:bold;">Header</div>';
       win.document.activeElement.innerHTML = innerHtmlData;

                                    }
}

You have the flexibility to personalize the preview and incorporate it into the activeElement's innerHtml.

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

"Encountering a delay with the Ajax form submission

I am facing an issue with my PHP page which contains a form with hundreds of fields. I am utilizing Ajax to fetch content for each field as data is being typed in. Unfortunately, at times I encounter the following error: net::ERR_CONNECTION_TIMED_OUT ...

javascriptphpjqueryajax

Safari 7.0 Experiencing Unpredictable Ajax Errors

Encountered an issue with Ajax requests through jQuery on a web app while using Safari 7.0 for Mac OS X 10.9 Mavericks (specifically 9537.71). This problem was occurring intermittently and could not be reproduced consistently on Safari 7.0. Environment: ...

javascriptjqueryajaxsafari

How to make QWebView background translucent

My goal is to make the background of a QWebView element transparent. +---------------------------+ | x | Window title | <<< Hidden borders and title bar +---------------------------+ view->setWindowFlags(Qt::FramelessWindowHint); | ...

c++htmlcssqt

What is the best way to retrieve the current value of a React useState hook within a setInterval function while using Highcharts

import Error from 'next/error' import React, { useState, useEffect } from 'react' import Highcharts from 'highcharts' import HighchartsReact from 'highcharts-react-official' function generateChart() { const [co ...

javascriptreactjshighchartsnext.jssetinterval

How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Here is the CSS code that specifically targets the child element "#overlay" when its parent, ".collection", is being hovered over: .collection { position: relative; overflow: hidden; } .collection:hover #overlay { position: absolute; opa ...

cssreactjsnext.js

Issue with panel not responding to clicks after switching pages

Currently, I am developing a small web application using jQuery Mobile and PHP. One issue that I have encountered is related to an onclick event within a menu in a panel. The problem arises when trying to trigger the event after changing pages; it does not ...

javascriptajaxjquery-mobilejquery-mobile-panel

Prevent premature termination of slow HTTP requests in Node.js/Express server

Having an issue with long duration http requests in my React/Nodejs application. Whenever a request takes more than 4 minutes to respond, it gets aborted before reaching the client. Could there be a timeout setting for requests or something else I am overl ...

javascriptnode.jsexpress

Ways to display various images by clicking on the previous page

I recently started using Angular and I am facing a challenge with my 2-page setup. On the first page, there is a list of main category icons displayed. I would like to show the subcategory icons on the next page based on the selected main category. For e ...

angulartypescript

The function Expo.Fingerprint.isEnrolledAsync will provide an output that includes information about fingerprint

Attempting to incorporate fingerprint authentication into my react native app. Utilized Expo SDK for this purpose. Although the Expo.Fingerprint.authenticateAsync() method claims to return a boolean, it actually returns an object when examined closely. E ...

javascriptiosreactjsreact-native

Currently, I am in the process of constructing a DSpace repository on an Ubuntu 16.04

I have successfully set up a DSpace repository on Ubuntu 16.04 LTS by following the installation instructions provided in this manual. After deploying the webapps, I encountered an issue when trying to add new items. Upon clicking the search link, I recei ...

csssolrubuntu-16.04dspace

Utilize Angular to enclose columns within rows for optimal organization

Updated with angular code snippet (for demonstration purposes only) I have been exploring ways in AngularJS to automatically wrap columns into rows after a certain number of columns while keeping the index intact. <div class="row"> {{for (var i = 0 ...

javascriptangularjs

Toggle visibility of a div based on a dropdown option using the getElementsByClassName method

Seeking assistance for switching style properties of divs based on selection from a select menu. Any guidance would be appreciated! Here is the code: The select tag (where I pass the value to the script function): <div style="float: right; margin-rig ...

javascriptselectgetelementsbyclassname

Tips for preserving input field data in an AngularJS scope variable

I am having trouble storing textbox values in my 'Values' variable. When I enter values in the textboxes, it seems to be getting the hard-coded values instead. Can someone please help me with this AngularJS issue as I am new to it? Here is the co ...

javascriptangularjsangularjs-directiveangularjs-scope

What is the best way to incorporate a URL link in Java while utilizing a CSS element?

Below is the provided code snippet: <span class='maincaptionsmall'> Test </span> Due to certain constraints in my page related to ajax and jquery scripts, I am unable to use HREF as a link. In other words, I can't implement som ...

javascripthtmlcssajaxlocation-href

Embed a stackoverflow.com iframe within a jsbin

While exploring code using jsbin, I mistakenly linked the iframe to . When my work in loads, it triggers an alert that redirects back to . I am unable to figure out how to modify my jsbin code. Is there a solution or should I start from scratch? ...

javascriptjsbin

Is it possible to verify whether a function contains a call to another function within it?

Consider a scenario in which we have the following nested functions: function function1(n) { function function2() { function function3() { function function4() { return n * 2; } return function4() } return ...

javascript

Tips for combining Meshes and Textures seamlessly

I am faced with a situation where I have multiple meshes, each with its own unique texture. My goal is to combine these meshes into one: mergedGeo.merge( mesh.geometry, mesh.matrix); Surprisingly, this process works seamlessly. However, when I attempt t ...

javascriptthree.js

Incorporate axios within getStaticProps while utilizing Next.js

I am working on a new project where I am utilizing axios to handle request data. However, I am facing an issue when using axios in the getStaticProps function which results in an error on my index.js page. Here is a snippet of my index.js code: import ...

javascriptreactjstypescriptaxiosnext.js

Tips on spotlighting Table of Contents with IntersectionObserver in NEXT JS

Currently working on my NextJS app and hoping to find a way to highlight the table of contents entry when its content is visible. Stumbled upon this helpful solution: https://css-tricks.com/table-of-contents-with-intersectionobserver/ but unsure how to a ...

javascriptreactjsnext.jsintersection-observer

Restricting the number of items allowed in an ajax request

I need to retrieve information from a json file in order to populate a table. I only want to request a maximum of 5 items. jQuery.getJSON("data/data.json", function(data) { var table = $("table"); $.each(data, function(id, elem) { table.ap ...

javascriptajaxlimit