Я хочу, чтобы, когда пользователь щелкает по значению имени в строке, для модального окна всплывала информация. Как это сделать?
Я хочу точно так же, как это демо Демо .
Я не знал, как реализовать код, показанный в демонстрационной ссылке в моем коде. Я новичок в редакторе таблиц данных, и я не знаю, как его синтаксис.
$('.page-header').html('Operations');
$('thead tr').append($('<th />', { text: 'Name' }));
$('thead tr').append($('<th />', { text: 'Machine Type' }));
$('thead tr').append($('<th />', { text: 'Stock' }));
$('thead tr').append($('<th />', { text: 'Customer' }));
$('thead tr').append($('<th />', { text: 'Employee' }));
$('thead tr').append($('<th />', { text: 'Price /$' }));
$('thead tr').append($('<th />', { text: 'Date of selling' }));
$('#table').on('click', 'tr', function () {
try {
row_id = table.row(this).data().id;
editor.s.ajax.edit.url = '/api/items_sold';
editor.s.ajax.remove.url = '/api/items_sold';
} catch (e) {
}
});
var table = $('#table').DataTable({
"autoWidth": true,
'responsive': true,
"modalEditor": true,
"ajax": {
"url": "/api/items_sold",
"type": "GET",
},
"columns": [
{ "data": "name" },
{ "data": "machineType.name" },
{
data: null,
render: function (data, type, row) {
return data.stock.productName + ',' + data.stock.productSubtype + ',' + data.stock.width + '*' + data.stock.height + '*' + data.stock.thickness;
},
editField: ['stock.productName', 'stock.productSubtype', 'stock.width', 'stock.height', 'stock.thickness']
},
{
data: null,
render: function (data, type, row) {
return data.customer.name + ', ' + data.customer.phone;
},
editField: ['customer.name', 'customer.phone']
},
{ "data": "employee.name" },
{ "data": "price" },
{ "data": "dos" },
],
'bPaginate': false,
'select': true,
"bInfo": false,
"bLengthChange": false,
});
editor = new $.fn.dataTable.Editor({
ajax: {
create: {
type: 'POST',
url: '/api/items_sold',
data: function (d) {
d.name = $("#DTE_Field_name").val();
d.machineType_id = $("#DTE_Field_machineType_id").val();
d.stock_id = $("#DTE_Field_stock_id").val();
d.customer_id = $("#DTE_Field_customer_id").val();
d.employee_id = $("#DTE_Field_employee_id").val();
d.price = $("#DTE_Field_price").val();
d.dos = $("#DTE_Field_dos").val();
delete d.data;
delete d.action;
},
success: function () {
$.notify('New Stock added.', 'success');
table.ajax.reload();
},
error: function (response) {
var json = $.parseJSON(response.responseText);
for (var key in json) {
$.notify(json[key]);
}
}
},
edit: {
type: 'PATCH',
url: '/api/items_sold',
data: function (d) {
d.id = row_id;
d.name = $("#DTE_Field_name").val();
d.machineType_id = $("#DTE_Field_machineType_id").val();
d.stock_id = $("#DTE_Field_stock_id").val();
d.customer_id = $("#DTE_Field_customer_id").val();
d.employee_id = $("#DTE_Field_employee_id").val();
d.price = $("#DTE_Field_price").val();
d.dos = $("#DTE_Field_dos").val();
delete d.data;
delete d.action;
},
success: function () {
$.notify('Operation updated.', 'success');
table.ajax.reload();
},
error: function (response) {
var json = $.parseJSON(response.responseText);
for (var key in json) {
$.notify(json[key]);
}
}
},
remove: {
type: 'DELETE',
url: '/api/items_sold',
data: function (d) {
d.id = row_id;
delete d.data;
delete d.action;
},
success: function () {
$.notify('Operation has been trashed.', 'success');
table.ajax.reload();
},
error: function (response) {
var json = $.parseJSON(response.responseText);
for (var key in json) {
$.notify(json[key]);
}
}
}
},
table: "#table",
'idSrc': 'id',
fields: [{
label: "Name:",
name: "name",
}, {
label: "Machine Type:",
name: "machineType_id",
type: "select"
}, {
label: "Stock:",
name: "stock_id",
type: "select"
}, {
label: "Customer:",
name: "customer_id",
type: "select"
}, {
label: "Employee:",
name: "employee_id",
type: "select"
}, {
label: "Price /$:",
name: "price",
attr: {
"type": "number"
}
},
{
label: "Date of Sale:",
name: "dos",
type: "date",
attr: {
"placeholder": "DD-MM-YYYY"
},
def: function () { return new Date(); },
dateFormat: "DD-MM-YYYY",
},
],
i18n: {
create: {
title: "Add Operation"
},
edit: {
title: "Edit Operation"
},
remove: {
title: "Trash Operation"
}
}
});
$.ajax({
url: '/api/items_sold_info',
type: 'GET',
data: {},
success: function (response) {
response = $.parseJSON(response);
var solditem_stock = [];
var solditem_customer = [];
var solditem_employee = [];
var solditem_machineType = [];
var stocks = response['data']['stocks'];
var customers = response['data']['customers'];
var employees = response['data']['employees'];
var machineTypes = response['data']['machineTypes'];
for (var i = 0; i < stocks.length; i++) {
if (stocks[i]['productSubtype'] == "") {
solditem_stock.push({ label: stocks[i]['productName'] + ',' + stocks[i]['width'] + '*' + stocks[i]['height'] + '*' + stocks[i]['thickness'], value: stocks[i]['id'] });
} else {
solditem_stock.push({ label: stocks[i]['productName'] + ',' + stocks[i]['productSubtype'] + ',' + stocks[i]['width'] + '*' + stocks[i]['height'] + '*' + stocks[i]['thickness'], value: stocks[i]['id'] });
}
}
for (var i = 0; i < customers.length; i++) {
solditem_customer.push({ label: customers[i]['name'] + ' , ' + customers[i]['phone'], value: customers[i]['id'] });
}
for (var i = 0; i < employees.length; i++) {
solditem_employee.push({ label: employees[i]['name'], value: employees[i]['id'] });
}
for (var i = 0; i < machineTypes.length; i++) {
solditem_machineType.push({ label: machineTypes[i]['name'], value: machineTypes[i]['id'] });
}
editor.field('stock_id').update(solditem_stock);
editor.field('customer_id').update(solditem_customer);
editor.field('employee_id').update(solditem_employee);
editor.field('machineType_id').update(solditem_machineType);
},
error: function () {
$.notify('There was an error fetching additional data.');
}
});
new $.fn.dataTable.Buttons(table, [
{ extend: "create", className: 'btn btn-success btn-outline Btn', editor: editor },
{ extend: "edit", className: 'btn btn-primary btn-outline Btn', editor: editor },
{
extend: "remove",
className: 'btn btn-danger btn-outline Btn',
editor: editor,
formMessage: function (e, dt) {
return 'Are you sure you want to trash the operation?';
}
},
]);
table.buttons().container()
.appendTo($('.col-sm-6:eq(0)', table.table().container()));