StandAlone fields setting initial values from db /changing values when linked to another datatable

MarkAndersonUK

Apologies for asking this question again, I asked it a year ago and never got a response from the dev team (I know they are very busy), but the issue has come up again in my project.

I have a master datatable, and I want to use a few standalone fields (that belong to a different datatable), but I cannot
find a way to initially set the values in the Standalone fields, nor can I find a way to change them when a new record is selected in the master datatable. The example given in the 'example' section specifically mentions that it is not linked to any data source, I don't know if that means that it cannot be linked, or if it was just beyond the scope of the example.

Anyway, here is my code example. You will see I tried both form and inline methods of standalone.

I would really appreciate it if someone might be able to help, or send me an example that I could learn from. I am still very new and learning, so please forgive if I am asking something that is obvious to others..

NodeJS API
const router = require('express').Router();
const expressValidator = require('express-validator');
const middleware = require('./middleware.js');

let myDB = require('../recruiting');
let {
    Editor,
    Field,
    Validate,
    Format,
    Options
} = require("datatables.net-editor-server");

//All routes from /LifeCases are routed here.
router.get("/", middleware.loggedIn(), (req,res) => {
    res.render('demo', {showAdmin: true})
});

router.all('/api/recruits', async function(req, res) {
    let editor = new Editor(myDB, 'recruits', 'recruits.recruitID')
        .fields(
            new Field("recruits.recruitID")
                .setFormatter( Format.ifEmpty(null)),
            new Field("recruits.NPN")
                .setFormatter( Format.ifEmpty(null)),
            new Field("recruits.FirstName")
                .setFormatter( Format.ifEmpty( null )),
            new Field("recruits.MiddleName")
                .setFormatter( Format.ifEmpty( null )),
            new Field("recruits.LastName")
                .setFormatter( Format.ifEmpty( null ))
        )

        .where( function () {
            this.where( 'recruits.recruitID', '<', '100'  );
        } )

    await editor.process(req.body);
    res.json(editor.data());
});

router.all('/api/recruits_data', async function(req, res) {
    if (! req.body.recruitID) {
        res.json({data:[]});
        return;
    }

    let editor = new Editor(myDB, 'recruits_data', 'recruits_data.recruitID')
        .fields(
            new Field("recruits_data.recruitID")
                .setFormatter( Format.ifEmpty(null)),
            new Field("recruits_data.status")
                .setFormatter( Format.ifEmpty( 'New Recruit' )),
        )

        .where( function () {
            this.where( 'recruits_data.recruitID', req.body.recruitID );
        } )

    await editor.process(req.body);
    res.json(editor.data());

});

module.exports = router;

Javascript

(function ($) {
    $(document).ready(function () {

        var recruitEditor = new $.fn.dataTable.Editor({
            ajax: '/demo/api/recruits',
            table: '#recruits',
            fields: [
                {label: "Recruit ID:", name: "recruits.recruitID",type:  "readonly"},
                {label: "NPN ID:", name: "recruits.NPN"},
                {label: "First Name:", name: "recruits.FirstName"},
                {label: "Middle Name:", name: "recruits.MiddleName"},
                {label: "Last Name:", name: "recruits.LastName"}
            ]
        });

        var recruit_table = $('#recruits').DataTable({
            dom: 'Blfrtip',
            ajax: {
                url: '/demo/api/recruits',type: "POST"},
            serverSide: true,
            processing: false,
            select: true,
            columns: [
                {data: "recruits.recruitID", class: "small dt-body-center", visible: false},
                {data: "recruits.NPN", class: "small dt-body-center", visible: false},
                {data: "recruits.FirstName", class: "small",searchable: false},
                {data: "recruits.MiddleName", class: "small",searchable: false},
                {data: "recruits.LastName", class: "small",searchable: false}
            ]
        });

        var r_dataEditor = new $.fn.dataTable.Editor({
            ajax: {
                url: '/demo/api/recruits_data',
                async: true,
                data: function (d) {
                    var selected = recruit_table.row({selected: true});
                    if (selected.any()) {
                        d.recruitID = selected.data().recruits.recruitID;
                    }
                }
            },
            fields: [
                {label: "recruitID:", name: "recruits_data.recruitID"},
                {label: "Status:",name: "recruits_data.status",type: "select",placeholder: "Select the Status",options: ["New Recruit", "Not Contacted", "Contacted", "Callback", "Meeting Set", "No Show", "Agent Info Sent", "Agent Info Completed", "Contract", "Compass Agent", "Lost - Not Interested", "Lost - Not a Candidate", "Lost - Remove from Marketing"]}
            ]
        });

        $('*[data-editor-field]').on( 'click', function (e) {
            r_dataEditor
                .inline( this, {
                    buttons: '_basic'
                } );
        } );
        $('#rd_data_edit').on( 'click', function () {
            r_dataEditor
                .buttons( {
                    label: "Save",
                    fn: function () { this.submit(); }
                } )
                .edit();
        } );

        recruit_table.on('select', function (e) {
            $("#rd_data_div").attr("data-editor-id",recruit_table.row({selected: true}).data().recruits.recruitID);

            r_dataEditor
                .field('recruits_data.recruitID')
                .def(recruit_table.row({selected: true}).data().recruitID);
        });


        r_dataEditor.on('submitSuccess', function () {
            recruit_table.ajax.reload();
        });

        r_dataEditor.on('submitError', function (e, xhr, err, thrown, data) {
            this.error(xhr.responseText);
        });


    });
}(jQuery));

NodeJS HTML (Jade/Pug format)

extends layout

block content
    #datamain.container-fluid(style='margin-top: 20px;')
        .row
            .col
                .box.mr-1.ml-1.mt-0
                    table#recruits.display.compact(cellpadding='0' cellspacing='0' border='0' width='100%')
                        thead
                            tr
                                th.small Recruit ID
                                th.small NPN ID
                                th.small First
                                th.small Middle
                                th.small Last
        .row.flex-nowrap
            .col
                .box.d-flex.mr-1.ml-1.mt-0
                    div#rd_data_div(data-editor-id='0').d-flex.flex-row
                        dl
                            dt recruitID:
                            dd(data-editor-field='recruits_data.recruitID')
                            dt Status:
                            dd(data-editor-field='recruits_data.status')
                            dd
                                button#rd_data_edit Edit

rf1234

My experience with "standalone" - just in case you are referring to this example:
https://editor.datatables.net/examples/standalone/simple.html
had been fairly poor: I never made it to get it working. And I tried virtually anything for weeks.

My workaround has always been to use Editor with a "pseudo"-datatable that is invisible and contains only one meaningless column. Then everything works fine.

MarkAndersonUK

Hi @rf1234

Thank you for your comment, I took came to the same conclusion a year ago when I first tried this, I am hoping perhaps some further development has been done to progress this. I have also used "pseudo"-datatables but as I use more and more there is a performance hit, and so I am hoping there is a better way or StandAlone has been improved..
thanks

allan

Hi Mark,

I asked it a year ago and never got a response from the dev team (I know they are very busy)

Sorry I missed your other post on this topic!

The example given in the 'example' section specifically mentions that it is not linked to any data source, I don't know if that means that it cannot be linked, or if it was just beyond the scope of the example.

It is outside the scope of the server-side libraries that we provide. They are table editors, and are not designed to be able to be used with non-repeating data.

I have a master datatable, and I want to use a few standalone fields (that belong to a different datatable), but I cannot find a way to initially set the values in the Standalone fields

Can you give me a link to a page showing the issue or create a test case? I'm struggling to picture exactly what it is that you are looking for - sorry!

Values for fields will be read from the data-editor-value property of a field, or you can use the set() API as described here.

The standalone editor certainly takes more work to use than with a regular DataTable unfortunately. It is more flexible, but that comes at a cost.

Allan