Could anyone help me with bootstrap 4 styling datatables editor?

Edus001

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

I'm following the example in this page:

https://editor.datatables.net/examples/styling/bootstrap4

What I don't understand is how the modal is opened pressing the butons new/edit/delete. I could open a modal defined by me in the html, but I would like to have the same behaviour as the page, when validating fields for example.

Then on the modal I had to capture this events..

$("#saveChanges").on ("click", () =>
{
});

$("#updateChanges").on ("click", () =>
{
}

But as don't see this things on the example I imagine that there is something bad I'm doing.

I'm working with typescript/html on the frontend and C++ on the backend.

Thank you in advance!

allan

If you have the Bootstrap 4 integration files for Editor loaded, and Bootstrap 4's Javascript, then Editor will use the Bootstrap 4 model whenever it needs to show the full form. It does that by having a plug-in system for the "display controller", and the Bootstrap 4 integration sets the Bootstrap 4 model for that.

If that isn't working for you, quite possibly you don't have all the right files being loaded. The download builder is the best way to make sure you have everything needed for DataTables and Editor.

If that doesn't resolve the issue, then we'd need a link to a page showing the issue please.

C++ on the backend

Much respect! Is there a package you are using for handling the HTTP parameters?

Allan

Edus001

Hi Alan, thank you for your answer.

I followed the download builder page and installed the packages as this:

npm install datatables.net-bs4
npm install datatables.net-editor
node node_modules/datatables.net-editor/install.js libs/Editor-2.2.2-Licensed.zip
npm install datatables.net-buttons-bs4
npm install datatables.net-responsive-bs4
npm install datatables.net-select-bs4

Then, imported the following files on my .ts file:

import "../node_modules/datatables.net/js/jquery.dataTables.js"
import "../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min";
import "../node_modules/datatables.net-buttons/js/dataTables.buttons.min.js"
import "../node_modules/bootstrap/dist/js/bootstrap.min";
import "../node_modules/datatables.net-buttons-bs4"
import "../node_modules/datatables.net-select-bs4"
import "../node_modules/datatables.net-responsive-bs4"
import Editor from "datatables.net-editor";
import DataTable, { AjaxData, Api, Config } from "datatables.net-bs4";

And on the html I added the following lines:

<link rel=stylesheet href=node_modules/bootstrap/dist/css/bootstrap.min.css type=text/css>

<link rel=stylesheet href=./node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css type=text/css>
<link rel=stylesheet href=./node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css type=text/css>
<link rel=stylesheet href=./node_modules/datatables.net-select-bs4/css/select.bootstrap4.min.css type=text/css>
<link rel=stylesheet href=./node_modules/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css type=text/css>

I don't know if there is something I'm doing wrong.

Regarding the C++ package, we made our own libraries for handling REST apis

Eduardo

allan

Do npm install datatables.net-editor-bs4 and then rerun the Editor install script.

Then change:

import Editor from "datatables.net-editor";

To be:

import Editor from "datatables.net-editor-bs4";

And that should do it.

It looks like at the moment the Bootstrap 4 Editor integration isn't being loaded in.

Allan

Edus001

Thank you Allan, I did the changes that you suggested, but I have a problem defining the buttons:

The 'editor' property is not accepted.

On the same way, I can't execute the following code:

// Display the buttons
new DataTable.Buttons(table, [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]);

This is defined on the example in

https://editor.datatables.net/examples/styling/bootstrap4

I will appreciate any help

Thank you!!

allan

Looks like you might need to add as any after the object ({extend: ...} as any) unfortunately. I think that was working, but something appears to have gone wrong there. I'll dig into it.

Allan

Edus001

Hi Alan now it's working, I added 'as any' for each button.

If you don't mind, could please help me to include some export buttons?

I would like to include a pdf button and followed this example:

https://editor.datatables.net/examples/extensions/exportButtons.html

So I installed pdfmake:

npm install --save pdfmake

Then, added the following line on my source:

import pdfmake from 'pdfmake';

Added this piece of code:

            {
                extend: 'collection',
                text: 'Export',
                buttons: ['pdf']
            },

But the button does not appear, this is a what I see:

There is no button when I press 'Export'

This is the package.json:

{
  "name": "hpos",
  "version": "3.0.0",
  "description": "HPOS Módulo de stock",
  "main": "./js/index.js",
  "scripts": {
    "webpack": "webpack",
    "production": "webpack --config webpack.prod.js",
    "development": "webpack --config webpack.dev.js",
    "preinstall": "npx npm-force-resolutions",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "resolutions": {
    "graceful-fs": "4.2.2"
  },
  "author": "Eduardo",
  "license": "ISC",
  "devDependencies": {
    "@types/bootstrap": "^4.6.2",
    "@types/bootstrap-select": "1.13.0",
    "@types/chart.js": "2.9.32",
    "@types/daterangepicker": "^3.0.1",
    "@types/jquery": "3.3.4",
    "@types/jspdf": "1.3.0",
    "@types/socket.io-client": "3.0.0",
    "bootstrap": "^4.6.0",
    "bootstrap-select": "1.13.18",
    "cssnano": "4.1.10",
    "daterangepicker": "^3.0.5",
    "es6-collections": "0.5.6",
    "export-to-csv": "0.2.1",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "html-webpack-plugin": "4.0.4",
    "jquery": "3.4.1",
    "jspdf-autotable": "3.1.1",
    "optimize-css-assets-webpack-plugin": "3.2.0",
    "terser-webpack-plugin": "2.3.5",
    "ts-loader": "6.2.2",
    "typescript": "3.7",
    "typings": "2.1.1",
    "webpack": "4.42.1",
    "webpack-cli": "3.3.11",
    "webpack-merge": "4.2.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@types/jqueryui": "^1.12.17",
    "chart.js": "3.3.2",
    "css-loader": "^0.28.10",
    "datatables.net-bs4": "^1.13.6",
    "datatables.net-buttons-bs4": "^2.4.2",
    "datatables.net-editor-bs4": "^2.2.0",
    "datatables.net-responsive-bs4": "^2.5.0",
    "datatables.net-select-bs4": "^1.7.0",
    "file-loader": "^6.2.0",
    "jquery-ui": "^1.13.2",
    "jspdf": "^2.5.1",
    "pdfmake": "^0.2.7",
    "socket.io-client": "4.5.2"
  }
}

Thank you in advance !!

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Have you also got this?:

DataTable.Buttons.pdfMake(pdfmake);

When using ESModules pdfmake doesn't get registered globally, so you need to "tell" Buttons about it.

Allan

Edus001

Hi Allan, I cannot make the call, I'm having this error:

I imported the following pdfmake as this:

import * as pdfMake from "pdfmake/build/pdfmake";
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

Any idea? Thank you for your help !!

allan

That's just a Typescript error. Try:

(DataTable.Buttons as any).pdfMake(pdfmake);

Allan