Datatables-AltEditor ajax и select2 ajax

96
12 февраля 2022, 09:20

Использую datatables-alteditor с select2.

Но при открытии окна редактирования данные типа select не выводятся

Вот мой javascript код:

$(document).ready(function() {
    var columnDefs = [
    {
      data: "id",
      title: "#",
      type: "readonly"
    },
    {
      data: "name",
      title: "Name"
    },
    {
      data: "category_id",
      title: "Category",
      type: "select",
      select2: {
        width: "100%",
        templateResult: function(repo) {
          return repo.name;
        },
        templateSelection: function(repo) {
          return repo.name || repo.text;
        },
        ajax: {
            url: '../api/table/category',
            type: 'GET',
            // dataType: 'json',
            delay: 250,
            data: function (params) {
              var query = {
                search: params.term,
              }
              return query;
            },
            processResults: function (data) {
              return {
                results: data
              };
            },
            cache: true,
            success: function(data){
                console.log(data);
            }
        },
      },
      render: function (data, type, row, meta) {
          if (data == null || row == null) return null;
          return row.category.name;
      }
    }
];
var myTable;
var url_get = '../api/test';
var url_post = '../api/test';
var url_put = '../api/test';
var url_DELETE = '../api/test';
myTable = $('#example').DataTable({
  "sPaginationType": "full_numbers",
  ajax: {
      url : url_get,
      dataSrc : ''
  },
  columns: columnDefs,
    dom: 'Bfrtip',
      select: 'single',
      responsive: true,
      altEditor: true,
      buttons: [{
          text: 'Add',
          name: 'add'
      },
      {
          extend: 'selected',
          text: 'Edit',
          name: 'edit'
      },
      {
          extend: 'selected',
          text: 'Delete',
          name: 'delete'
      },
      {
          text: 'Refresh',
          name: 'refresh'
      }],
      onAddRow: function(datatable, rowdata, success, error) {
          $.ajax({
              url: url_post,
              type: 'POST',
              data: rowdata,
              success: success,
              error: error
          });
      },
      onDeleteRow: function(datatable, rowdata, success, error) {
          $.ajax({
              url: url_DELETE,
              type: 'DELETE',
              data: rowdata,
              success: success,
              error: error
          });
      },
      onEditRow: function(datatable, rowdata, success, error) {
          $.ajax({
              url: url_put,
              type: 'PUT',
              data: rowdata,
              success: success,
              error: error
          });
      }
   });
});

Вот данные, получаемые ajax'ом:

Сама таблица:

[
  {
    "id": 2,
    "name": "s",
    "category_id": 5,
    "category": {
      "id": 5,
      "name": "gsdfgsdfg"
    }
  },
  {
    "id": 3,
    "name": "34234",
    "category_id": 6,
    "category": {
      "id": 6,
      "name": "555555555"
    }
  }
]

category для select2:

[
  {
    "id": 1,
    "name": "sdfgsdfgsdfgsdfg"
  },
  {
    "id": 2,
    "name": "sdfgsdfasdffgsdfgsdfg"
  },
  {
    "id": 5,
    "name": "gsdfgsdfg"
  },
  {
    "id": 6,
    "name": "555555555"
  }
]

1.Можно ли, используя ajax запрос в datatables altEditor и select2, загрузить необходимые данные для отображения?

2.Если да, то как?

Answer 1

В итоге сам нашел решение. DataTables-AltEditor не выводит в окне редактирования данные, если не указан "options"

Сделал примерно так:

$(document).ready(function() {
    var CatOptions = {};
    var columnDefs = [
    {
      data: "id",
      title: "#",
      type: "readonly"
    },
    {
      data: "name",
      title: "Name"
    },
    {
      data: "category_id",
      title: "Category",
      options: CatOptions,
      type: "select",
      select2: {
        width: "100%",
        templateResult: function(repo) {
          return repo.name;
        },
        templateSelection: function(repo) {
          return repo.name || repo.text;
        },
        ajax: {
            url: '../api/table/category',
            type: 'GET',
            // dataType: 'json',
            delay: 250,
            data: function (params) {
              var query = {
                search: params.term,
              }
              return query;
            },
            processResults: function (data) {
              return {
                results: data
              };
            },
            cache: true,
            success: function(data){
                console.log(data);
            }
        },
      },
      render: function (data, type, row, meta) {
          if (data == null || row == null) return null;
          CatOptions[row.category.id] = row.category.name;
          return row.category.name;
      }
    }
];
var myTable;
var url_get = '../api/test';
var url_post = '../api/test';
var url_put = '../api/test';
var url_DELETE = '../api/test';
myTable = $('#example').DataTable({
  "sPaginationType": "full_numbers",
  ajax: {
      url : url_get,
      dataSrc : ''
  },
  columns: columnDefs,
    dom: 'Bfrtip',
      select: 'single',
      responsive: true,
      altEditor: true,
      buttons: [{
          text: 'Add',
          name: 'add'
      },
      {
          extend: 'selected',
          text: 'Edit',
          name: 'edit'
      },
      {
          extend: 'selected',
          text: 'Delete',
          name: 'delete'
      },
      {
          text: 'Refresh',
          name: 'refresh'
      }],
      onAddRow: function(datatable, rowdata, success, error) {
          $.ajax({
              url: url_post,
              type: 'POST',
              data: rowdata,
              success: success,
              error: error
          });
      },
      onDeleteRow: function(datatable, rowdata, success, error) {
          $.ajax({
              url: url_DELETE,
              type: 'DELETE',
              data: rowdata,
              success: success,
              error: error
          });
      },
      onEditRow: function(datatable, rowdata, success, error) {
          $.ajax({
              url: url_put,
              type: 'PUT',
              data: rowdata,
              success: success,
              error: error
          });
      }
   });
});
READ ALSO
Перебор массива и вывод ключа

Перебор массива и вывод ключа

Есть select с записанными значениями из массиваНужно с помощью перебора вывести в какой части массива находится значение select

130
jQuery 1.9.0 - jQuery UI DatePicker

jQuery 1.9.0 - jQuery UI DatePicker

Создаю форму с кучей форм ввода даты datepickerов (вызов датепискеров onclick)

89
CallBack с фрейма в родитель

CallBack с фрейма в родитель

Заранее прошу прощения за странный вопрос

109
В vscode не работает intelligence

В vscode не работает intelligence

Переустановил виндуОткрываю проект на vscode 1

150