Inconsistency in jquery dataTable Using in embedded Html

Hello everyone,

I am tring to use jquery dataTable in my embedded html form. when I run the process and execute the html form in tasklist , I kept getting dataTable is not a function error .
but when I reload the page it works fine.
sometimes its works fine and sometime it gives error. there is inconsistency on using jquery dataTable in camunda embedded form.

can anyone please help me with this.

I really need to use dataTable . I don’t have any other option.

Hi @abhi1o3,

Following the basic example (DataTables example - Zero configuration), below javascript libraries are required.

jquery.dataTables.min.js file needs to be downloaded and placed in camunda\app\tasklist\scripts
jquery library is already included in camunda web apps so no need to download.
.

to guarantee jquery being loaded prior to jquery.dataTables.min.js, script dependencies need to be configured.
Using camunda version 7.13, below snip should be included in camunda\app\tasklist\scripts\config.js file

customScripts: {
    // AngularJS module names
    ngDeps: [],
    // RequireJS configuration for a complete configuration documentation see:
    // http://requirejs.org/docs/api.html#config
    deps: ['jquery', 'datatable'],
    paths: {
	  'datatable': 'scripts/jquery.dataTables.min'
    },
	shim: {
	  'datatable': ['jquery']
	}
  },

https://cdn.datatables.net/1.11.0/css/jquery.dataTables.min.css file is required.
so you can copy the content of it and include in camunda\app\tasklist\styles\user-styles.css

config.js.txt (2.3 KB)
jquery.dataTables.min.js.txt (85.3 KB)start-form.html.txt (15.3 KB)

Using camunda 7.15, below is the snip to be included in camunda\app\tasklist\scripts\config.js file

requireJsConfig: {
    // AngularJS module names
    ngDeps: [],
    // RequireJS configuration for a complete configuration documentation see:
    // http://requirejs.org/docs/api.html#config
    deps: ['jquery', 'datatable'],
    paths: {
	  'datatable': 'scripts/jquery.dataTables.min'
    },
	shim: {
	  'datatable': ['jquery']
	}
  },