StandAlone fields setting initial values from db /changing values when linked to another datatable
StandAlone fields setting initial values from db /changing values when linked to another datatable
MarkAndersonUK
Posts: 44Questions: 17Answers: 0
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
Answers
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.
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
Hi Mark,
Sorry I missed your other post on this topic!
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.
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-valueproperty of a field, or you can use theset()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