Editor select field with attr example

edm · April 2017

How can i recognise the correct select field with multiple tables/select fields on one page?

If i use a select field in an inline editor table (inline editing), eg:
HTML:

<tr id="jobgroup-1_joID-3">...<td class="jobgroupName editable">Linie 1</td></tr>

JavaScript:

fields: [{
    name: "jobgroupName",
    type: "select",
    placeholder: "Choose:",
    options: { "Linie 2":"2", "Linie 3":"3", "Linie 4":"4","Linie 5":"5" }
    },{ ...

The resulting AJAX post looks like:

array(
  ['action'] => 'edit'
  ['data'] => array(
    ['jobgroup-1_jobId-3'] => array(
      ['jobgroupName'] => 2
    )
  )
)

So im able to recognise the correct action with the string 'jobgroup-1_jobId-3'.

But with an "new" bubble in an other table, i got:

array(
  ['action'] => 'create'
  ['data'] => array(
    [0] => array(
      ['employee'] => 2
      ['mo'] => 8
      ['tu'] => 8
      ['we'] => 8
      ['th'] => 8
      ['fr'] => 8
      ['sa'] => 0
    )
  )
)

But i want to get it like this:

array(
  ['action'] => 'create'
  ['data'] => array(
    ['jobgroup-1_newEmployee'] => array(
      ['employee'] => 2
      ['mo'] => 8
      ['tu'] => 8
      ['we'] => 8
      ['th'] => 8
      ['fr'] => 8
      ['sa'] => 0
    )
  )
)

attr: { multiple: true } works, but something like
attr: { "id":"jobgroup-1_newEmployee" } does not work for me.

allan · April 2017

The 0 in the submitted data for the create indicates that it is a single new row. Editor actually can submit multiple new rows at the same time for creation (create()) which is why that index exists at all.

Are you able to modify the server to expect the data that Editor is sending?

Allan

edm · April 2017

Ok, i understand. But how can i distinguish the different selects on one page? I need a unique attribute for each select.

Are you able to modify the server to expect the data that Editor is sending?

Yes, of course.

allan · April 2017

Editor should submit a different value for each select field.

Could you show me the Javascript for your Editor initialisation please?

Allan

edm · April 2017

var editor_jobgroup_1;
$(document).ready (function () {
...
    editor_jobgroup_1 = new $.fn.dataTable.Editor ({
        ajax: "ajax.php",
        table: "#table_weeksGroupsTable1",
        fields: [{
            label: "Mitarbeiter",
            name: "employee",
            type: "select",
            placeholder: "Choose:",
            options: { "ABC":"1", "DEF":"2", "GHI":"3", "JKL":"4","MNO ...":"5" }
            },{
            label: "Mo",
            name: "mo",
            def: "8"
            },{
            label: "Di",
            name: "tu",
            def: "8"
            },{
            label: "Mi",
            name: "we",
            def: "8"
            },{
            label: "Do",
            name: "th",
            def: "8"
            },{
            label: "Fr",
            name: "fr",
            def: "8"
            },{
            label: "Sa",
            name: "sa",
            def: "0"
            }
        ],
        i18n: {
            create: {
                button: "Add",
                title:  "Add employee ...",
                submit: "Save"
            }
        }
    });
    $('#table_weeksGroupsTable1').on ('click', 'tbody td.editable', function (e) {
        editor_jobgroup_1.inline (this);
    });
    table_jobgroup_1 = $("#table_weeksGroupsTable1").DataTable ({
        paging: false,
        ordering: false,
        searching: false,
        info: false,
        dom: "Bfrtip",
        buttons: [
        { extend: "create", editor: editor_jobgroup_1 }
        ],
        columns: [
            { data: "employee_workload" },
            { data: "mo" },
            { data: "tu" },
            { data: "we" },
            { data: "th" },
            { data: "fr" },
            { data: "sa" }
        ]
    });
...

Or can i change ['action'] => 'create' into something like ['action'] => 'createNewEmployee'?

allan · April 2017

You only have a single field called employee. I'm not sure where jobgroup-1_newEmployee is coming from?

You can use the ajax.data option to modify the data being submitting to the server, for example changing the value of the action property.

Allan

edm · April 2017

You only have a single field called employee. I'm not sure where jobgroup-1_newEmployee is coming from?

It (jobgroup-1_newEmployee) should have been there (my wish).

You can use the ajax.data option to modify the data being submitting to the server, for example changing the value of the action property.

Ok, this works fine, eg:

editor_jobgroup_1 = new $.fn.dataTable.Editor ({
    ajax: {
        url: "ajax.php",
        data: {
            "user_id": 451
        }
    },
...

Result:

array(
  ['action'] => 'create'
  ['data'] => array(
    [0] => array(
      ['employee'] => ABC
      ['mo'] => 8
      ['tu'] => 8
      ['we'] => 8
      ['th'] = >8
      ['fr'] => 8
      ['sa'] => 1
    )
  )
  ['user_id'] => 451
)

Thank you so much.

edm · April 2017

Last remark: Now i can override the action value, too:

        data: {
            "action": "jobgroup-1_newEmployee"
        }

Result:

array(
  ['action'] => 'jobgroup-1_newEmployee'
  ['data'] => array(
    [0] => array(
      ['employee'] => ABC
      ['mo'] => 8
      ['tu'] => 8
      ['we'] => 8
      ['th'] = >8
      ['fr'] => 8
      ['sa'] => 1
    )
  )
)

This is very good. Thanks and bye.

allan · April 2017

Fantastic. Good to hear you've got it working as you need to now!

Allan

Editor select field with attr example

Editor select field with attr example

Answers

Howdy, Stranger!

Categories

DataTables

Editor select field with attr example

Editor select field with attr example

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables