Populting initial values for Select2 which allows multiple selections

NettSite

Link to test case:
Currently on localhost

Debugger code (debug.datatables.net):

Information about 1 table available
#indexTable
Data source:    Ajax
Processing mode:    Server-side
Draws:  1
Columns:    21
Rows - total:   10
Rows - after search:    10
Display start:  0
Display length: 10

The version check didn't work, but everything is the latest version.

Check for common issues
Run automated tests to check for common and previously reported issues.
15 tests complete. No failures or warnings found!

I have tried to upload the configuration, but it seems to have failed.

Error messages shown:
None.

Description of problem:
I am trying to implement a Select2 control using Datatables Editor, with the Select2 plugin. Options are retrieved via Ajax when a search is done, tags and multiple selections are allowed.

This all works well, except only for when it comes to populating the Select2 with previously selected options when editing the record.

This is my editor code:

  var editor = (window.LaravelDataTables[
    "indexTable-editor"
  ] = new $.fn.dataTable.Editor({
    instance: "editor",
    idSrc: "id",
    fields: [
      // Some other fields
      {
        name: "tags",
        label: "Tags",
        type: "select2",
        opts: {
          tags: true,
          multiple: true,
          allowClear: true,
          ajax: {
            url: "/api/select2/tags/tag",
            dataType: "json",
            delay: 250,
            cache: true,
          },
        },
        className: "full",
      },
      // Some more fields
    ],
    table: "#indexTable",
    ajax: "http://lifestays/client",
  }));

This is the datatales code:

window.LaravelDataTables["indexTable"] = $("#indexTable").DataTable({
    serverSide: true,
    processing: true,
    ajax: {
      url: "http://lifestays/client",
      type: "GET",
      data: function (data) {
        for (var i = 0, len = data.columns.length; i < len; i++) {
          if (!data.columns[i].search.value) delete data.columns[i].search;
          if (data.columns[i].searchable === true)
            delete data.columns[i].searchable;
          if (data.columns[i].orderable === true)
            delete data.columns[i].orderable;
          if (data.columns[i].data === data.columns[i].name)
            delete data.columns[i].name;
        }
        delete data.search.regex;
      },
    },
    columns: [
     // Other columns
      {
        data: "tags",
        name: "tags",
        title: "Tags",
        orderable: true,
        searchable: true,
        visible: true,
        className: "full",
        render: "[, ].tag",
      },
      // more columns
    ],
    responsive: true,
    dom: "Bfrtip",
    select: { style: "os" },
    order: [[1, "desc"]],
  });

This is an example of the response when the initial value is requested from the server:

[
    {"id":"f31f74e3-b07a-4410-9717-5befc1a6160b","text":"Buyer"},
    {"id":"48f84d66-e3de-4c90-a1cb-116c316a0d28","text":"Gold"}
] 

The Select2 remains blank.

NettSite

Update:

I have made some changes which Arjay recommended, and now the returned result is as follows:

{
  "results":[
    {"id":"f31f74e3-b07a-4410-9717-5befc1a6160b","text":"Buyer"},
    {"id":"48f84d66-e3de-4c90-a1cb-116c316a0d28","text":"Gold"}
  ],
  "pagination":{"more":false}
}

Unfortunately, the Select2 remains blank (no initial values).

colin

This all works well, except only for when it comes to populating the Select2 with previously selected options when editing the record.

Can you say what happens in that situation, please? THat would help understand the problem,

Colin