The "New" button or adding a record/row to table

sjordan · September 10

Unfortunately, our legacy site is not using DT2 and Editor v2 yet, so the layout config is not an option.

Can someone point me to a simple example of adding a new record to a DataTable using Editor v1?

Either the "new" button above the table OR dynamically adding a new editable row?

Thanks in advance

PS. One of the columns in the table is a select field, if that mattes. Meaning when the new record is created, one of the values will be selected from a list (ex. location)

kthorngren · September 10

You can use the legacy dom option as shown here. The Editor buttons are still defined like this example except they will be in the "global" buttons config shown in the legacy example. For example:

  $("#example").DataTable({
    dom: "Bfrtip",
    columns: [
      { data: "name" },
      { data: "position" },
      { data: "start_date" },
      { data: "salary" }
    ],
    select: true,
    buttons: [
      { extend: "create", editor: editor },
      { extend: "edit", editor: editor },
      { extend: "remove", editor: editor }
    ]
  });

The examples may not run, due to mixing old and new library versions, but see if Colin's example in this thread helps with inline row creation.

If you upgrade to Editor 2.0 it introduced a new button to allow inline row creation. See this example.

Kevin

sjordan · September 10

If I am reading the docs correctly here, I need the Buttons extension which I believe are the following files:

Buttons
The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. The core library provides the based framework upon which plug-ins can built. Plug-in buttons are also provided for data export, printing and column visibility control.

css: https://cdn.datatables.net/buttons/3.1.2/css/buttons.dataTables.min.css
js: https://cdn.datatables.net/buttons/3.1.2/js/dataTables.buttons.min.js

However, when I try that, I get an error:

Uncaught Warning: Buttons requires DataTables 2 or newer

kthorngren · September 10

Try the Legacy Download Builder instead to get a version compatible with Datatables 1.10.

Kevin

sjordan · September 10

Thank you Kevin

I think we may be moving in the right direction.

I got legacy files, but now seeing the following error:

datatables-editor.min.js:120 Uncaught TypeError: Cannot read properties of null (reading 'i18n')
    at text (datatables-editor.min.js:120:422)
    at i (datatables.min.js:26:6013)
    at B._buildButton (datatables.min.js:26:7237)
    at B._expandButton (datatables.min.js:26:5145)
    at B.add (datatables.min.js:26:1705)
    at B._constructor (datatables.min.js:26:4199)
    at new B (datatables.min.js:26:1115)
    at HTMLDocument.<anonymous> (datatables.min.js:26:25367)
    at HTMLDocument.dispatch (jquery-1.10.2.js:5099:9)
    at HTMLDocument.<anonymous> (jquery-1.10.2.js:4770:28)

I suspect in getting the "new" legacy files, I missed a dependency

Thoughts?

allan · September 10

If you could link to the page, that would really help. Although Editor 1 and DataTables 1 are now both no longer supported, I'd be happy take a look and see what is happening.

Allan

sjordan · September 10

Hi Allan

I really appreciate that. Unfortunately, this is local development on a Docker container. I could create a tunnel using something like https://ngrok.com/ but would need to coordinate it.

sjordan · September 10

With a hint from this comment, I have moved past the "Cannot read properties of null (reading 'i18n')" error

kthorngren · September 10

Searching the forum for the error resulted in this thread. Looks like the problem was due to how the OP defined the buttons by using the incorrect Editor variable, for example:

  buttons: [
    { extend: "create", editor: editor },
    { extend: "edit", editor: editor },
    { extend: "remove", editor: editor }
  ]

Please post your Editor and Datatables configs and maybe we can see something obvious.

Kevin

sjordan · September 10

Yes sir, Kevin. That's the same post I found, and I have got that bug fixed.

I'm still running into UI issues trying to use the "latest version" of the legacy code.

I might help if I could get just the button extension js and css related files. It seems the js and css that's produced as part of the Legacy Builder, which includes the DataTables code core and css is causing me fits.

kthorngren · September 10

Two options:

At the bottom of the legacy download page uncheck the concatenate option. You can grab the individual CDN urls.
Use https://cdn.datatables.net/ to get the version you want. Click buttons on the right then Previous Releases.Click the version you want. Looks like 2.4.2 is the last for Datatables 1.10.

Possibly you are using the concatenated CDN without removing the original datatables.js and .css from your page. You don't want to load them twice.

Kevin

sjordan · September 10

Kevin

Much appreciated, we're definitely getting close now!!! I have the "New" button showing.

New issues:

Clicking New button does not open the form in a modal, rather the form opens below the table (actually in the footer of the page as the very last element on the page).

Any tips?

allan · September 10

Sounds like you haven't loaded the Editor CSS file.

Allan

sjordan · September 10

I have reproduced a stripped down (unit test) of my code here that replicates the issue with modal not appearing.

Thank you in advance for any assistance.

kthorngren · September 10

Looks like you are loading editor.js version 1.9.7 but loading ediitor.css from version 1.6.4. Here is a screenshot:

You can download the Editor .js and .css files from here. I suspect there is an issue with using .css version 1.6.4 with Editor version 1.9.7.

Kevin

sjordan · September 11

Thank you very much Kevin and Allan.

I think we're there now. Feel free to peek at the link.

Thank you for your help, quick responses, and support in sorting this out despite the EOL codebase.

I'll keep testing and playing with this a bit to see if I've overlooked anything.

I'll update or close this soon.

sjordan · September 12

Hopefully it's acceptable to ask a related question rather than start a completely new thread.

Using using my form here as an example, when clicking the New button, how would I make a field have a default, non-editable field?

For instance, in the example, all new records are set with the same last name of "Jordan?

Cheers

kthorngren · September 12

Use fields.def to set the default value. Use /fields.type to set the type to readonly. See the field Type docs for a list of supported types.

Kevin

sjordan · September 12

Thank you Kevin, works a treat!

sjordan · September 14

I'm nearly there with this form.

When I attempt to edit an inline value, I'm getting the following error:

dataTables.editor.min.js:2416 Uncaught TypeError: k is not a function
    at Object.<anonymous> (dataTables.editor.min.js:2416:19)
    at Function.each (jquery-2.2.4.min.js:2:2911)
    at m._submitTable (dataTables.editor.min.js:2413:9)
    at dataTables.editor.min.js:2389:66
    at m._event (dataTables.editor.min.js:2103:15)
    at m._submit (dataTables.editor.min.js:2386:12)
    at dataTables.editor.min.js:1553:55
    at m._event (dataTables.editor.min.js:2103:15)
    at r (dataTables.editor.min.js:1552:11)
    at m.submit (dataTables.editor.min.js:1566:5)

I realize I'm still in the mocking stage, but what should the response be from the server after an edit?

OR is there something else going on? The error suggests that a function is not defined (likely missing a dependency).

kthorngren · September 14

I realize I'm still in the mocking stage, but what should the response be from the server after an edit?

The Client / server data docs describe the expected responses for edit, create, etc.

OR is there something else going on? The error suggests that a function is not defined (likely missing a dependency).

Its hard to say without seeing the problem. Start by posting your Editor and Datatables code. Better is a link to a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

sjordan · September 14

Hi Kevin, the link to the test case is in the question you replied to.

Cheers

allan · September 14

Looks like your version of DataTables is too old. You are using 1.10.11 (which is about 8 years old). Update to the latest in the 1.x series which is 1.13.11.

Allan

kthorngren · September 14

the link to the test case is in the question you replied to.

Sorry missed the link

Kevin

sjordan · September 15

Thank you, Allan and Kevin. Updated the DataTables js and is now working. Will continue to test before closing this question.

sjordan · September 15

Thank you, Allan and Kevin, I think I am just about across the line on this work.

Finishing touches ...

How do I modify the header in the new form (see screenshot).

For example, in the context of the screenshot, I might wish to write "Create a new employee".

Thanks

kthorngren · September 15

A couple options are to use i18n.edit.title or set the formTitle option of the edit.

Kevin

sjordan · September 15

Thank you, Kevin

sjordan · September 15

UPDATE: Ignore. I figured out the issue.

I thought I was across the line with this work; then I got ambitious and added a delete button. Test case here

I'm seeing the following warning:

Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11

See image:

The fix mentioned here (https://datatables.net/manual/tech-notes/11) talks about setting editField. However, this does not make sense to me because:

This is a delete action and not an edit.
There is no true data associated with that field (i.e. field data set to null as in the example in the docs here - https://editor.datatables.net/examples/inline-editing/fullRow.html).

kthorngren · September 15

The test case seems to work. I don't see the Unable to automatically determine field from source when clicking the delete button nor clicking any other cell. The error suggests the click event invoking inline edit is executed when clicking the delete button. Or possibly it occurred earlier when clicking another cell.

Kevin

sjordan · September 16

Hi Kevin, yep see the UPDATE in the question.

I fixed it.

The "New" button or adding a record/row to table

The "New" button or adding a record/row to table

Answers

Howdy, Stranger!

Categories

DataTables

The "New" button or adding a record/row to table

The "New" button or adding a record/row to table

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables