DataTables logo
≡

jQuery Signature Pad

Use jQuery Signature Pad library with Editor to allow Signatures to be added to cells in Editor.

  • Requires: jQuery Signature Pad Library

Signature is a Plugin to allow the user to add signatures to cells. This plugin provides integration between (https://www.jqueryscript.net/other/Smooth-Signature-Pad-Plugin-with-jQuery-Html5-Canvas.html) and Editor, adding the signature field type to Editor.

Use

This plug-in can be obtained and used in multiple different ways.

Browser

This plug-in is available on the DataTables CDN:

JS

The plug-in will then automatically register itself against a global DataTables instance. This file can also be used if you are using an AMD loader such as Require.js.

Note that if you are using multiple plug-ins, it can be beneficial in terms of performance to combine the plug-ins into a single file and host it on your own server, rather than making multiple requests to the DataTables CDN.

NPM

The plug-ins are all available on NPM (which can also be used with Yarn or any other Javascript package manager) as part of the datatables.net-plugins package. To use this plug-in, first install the plug-ins package:

npm install datatables.net-plugins

Then import datatables.net, any other DataTables extensions you need, plus the plug-in:

import DataTable from 'datatables.net';
import 'datatables.net-plugins/editorFields/editor.signature.mjs';

Example

var editor = new DataTable.Editor({
   table: "#example",
   fields: [
     ...
     {
       label: "Signature:",
       name: "signature",
       type: "signature"
     }
   ]
 });

 new DataTable("#example", {
   layout: {
     topStart: 'buttons'
   },
   columns: [
     { data: "name" },
     { data: "position" },
     { data: "start_date" },
     {
       data: "signature",
       render: function(data, type, row) {
         return data ? "Signed" : "Not Signed";
       }
     }
   ],
   select: true,
   buttons: [
     { extend: "create", editor: editor },
     { extend: "edit", editor: editor },
     { extend: "remove", editor: editor }
   ]
 });

Version control

If you have any ideas for how this plug-in can be improved, or spot anything that is in error, it is available on GitHub and pull requests are very welcome!