Использую 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.Если да, то как?
В итоге сам нашел решение. 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
});
}
});
});
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Есть select с записанными значениями из массиваНужно с помощью перебора вывести в какой части массива находится значение select
Создаю форму с кучей форм ввода даты datepickerов (вызов датепискеров onclick)