var DatatableAutoColumnHideDemo = function() {
var demo = function () {
var dataJSONArray = JSON.parse('[{% for order in orders %} ' +
'{"#": "{{ order.id }}","updateUrl":"{% url "staff:order-update" order.id %}", "link":"{% if order.has_payment_link %}{{ order.get_direct_payment_link }}{% endif %}", "client":"{{ order.client }}", "total":"{{ order.final_price }}", "servicesOrderedCount":"{{ order.ordered_services.count }}", "originalPrice":"{{ order.original_price }}","promoPrice":"{{ order.promo_price_impact }}", "clientCompany":"{{ order.client.company }}", "orderedServices":"{% for service in order.ordered_services.all %}<li>{{ service.service.name }}-{{ service.service.get_service_type_display }}-{{ service.service.quan_number }}-{{ service.service.price }}</li>{% endfor %}", "directLinkToPay":"{% if order.has_payment_link %}{{ order.get_direct_payment_link }}{% endif %}", "orderNotes":"{{ order.notes }}", "payment":"{{ order.get_payment_gateway_display }}","status":"{{ order.get_status_display }}"}\n' +
'{% if not forloop.last %},{% endif %}' +
'{% endfor %}]');
var datatable = $('.m_datatable').mDatatable({
data: {
type: 'local',
source: dataJSONArray,
pageSize: 10
},
// column sorting
sortable: true,
pagination: true,
toolbar: {
items: {
pagination: {
pageSizeSelect: [10, 20, 30, 50, 100],
},
},
},
search: {
input: $('#generalSearch'),
},
rows: {
autoHide: true,
},
// columns definition
columns: [{
field: "#",
title: "#",
type: "number",
width: 35,
textAlign: 'right'
}, {
field: "link",
title: "",
width: 15,
textAlign: 'left',
template: function(data) {
if (link = data.directLinkToPay){
return '<a class="fas fa-link dis" href="">' + data.directLinkToPay + '</a>';
} else {
return '<a class="" href="">' + '</a>';
}
}
}, {
field: "client",
title: "client",
width: 325
}, {
field: "total",
title: "total",
type: "number",
width: 100
}, {
field: "servicesOrderedCount",
title: "services ordered count",
type: "number"
}, {
field: "originalPrice",
title: "original price",
type: "number"
}, {
field: "promoPrice",
title: "promo price impact",
type: "number"
}, {
field: "clientCompany",
title: "company"
}, {
field: "orderedServices",
title: "ordered services",
width: 300
}, {
field: "directLinkToPay",
title: "direct link to pay",
width: 300,
template: function(data) {
return '<a class="m-link" href="' + data.directLinkToPay +
'">' +
data.directLinkToPay + '</a>';
}
}, {
field: "orderNotes",
title: "order notes",
width: 300,
template: function (row) {
return '<span class="notes">' + row.orderNotes +'</span>';
}
}, {
field: "payment",
title: "",
width: 10,
template: function (row) {
var payment = {
Stripe: {'title': 'stripe', 'class': 'fab fa-stripe'},
PayPal: {'title': 'paypal', 'class': 'fab fa-paypal'}
};
return '<i class="' + payment[row.payment].class + '">' + '</i>';
}
}, {
field: "status",
title: "status-gateway",
width: 125,
template: function (row) {
var status = {
NEW: {'title': 'new', 'class': ' m-badge--metal'},
PAYMENT_SUCCESSFUL: {'title': 'successful', 'class': ' m-badge--success'},
PAYMENT_IN_PROGRESS: {'title': 'in progress', 'class': ' m-badge--primary'},
FINISHED: {'title': 'finished', 'class': ' m-badge--primary'},
PAYMENT_ERROR: {'title': 'error', 'class': ' m-badge--danger'},
CANCELED: {'title': 'canseled', 'class': ' m-badge--danger'},
REFUNDED: {'title': 'refunded', 'class': ' m-badge--danger'}
};
return '<span class="m-badge ' + status[row.status].class + ' m-badge--wide">' + status[row.status].title + '</span>';
}
}, {
field: "Actions",
width: 110,
title: "Actions",
sortable: false,
overflow: 'visible',
visibility: true,
textAlign: 'center',
template: function (row, index, datatable) {
var dropup = (datatable - index) <= 4 ? 'dropup' : '';
return '\
<div class="dropdown ' + dropup + '">\
<a href="#" class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown">\
<i class="la la-ellipsis-h"></i>\
</a>\
<div class="dropdown-menu dropdown-menu-right">\
<a class="dropdown-item" href="' + row['updateUrl'] +'"><i class="la la-edit"></i> Edit Details</a>\
<a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>\
<a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>\
</div>\
</div>\
<a href="#" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="View ">\
<i class="la la-edit"></i>\
</a>\
';
},
}]
});
var query = datatable.getDataSourceQuery();
};
return {
init: function () {
demo();
}
};
}();
jQuery(document).ready(function() {
DatatableAutoColumnHideDemo.init();
});<table class="translate">
<tbody><tr>
<td colspan="2">Translations</td>
<td>Price</td>
<td></td>
</tr>
<tr class="form1">
<td><span id="trans-number-1" class="col">1</span></td>
<td></td>
<td><span class="currenty">$</span><span id="trans-price-1" class="price">$247</span><span class="vert">/</span><span id="price-one-1">$</span><span class="text">per optimization</span></td>
<td><button class="btn btn-buy" data-value="1">buy now</button></td>
</tr>
<tr class="form4">
<td><span id="trans-number-4" class="col">4</span></td>
<td></td>
<td><span class="currenty">$</span><span id="trans-price-4" class="price">908</span><span class="vert">/</span><span id="price-one-2">$</span><span class="text">per optimization</span></td>
<td><button class="btn btn-buy" data-value="4">buy now</button></td>
</tr>
<tr class="form12">
<td><span id="trans-number-12" class="col">12</span></td>
<td></td>
<td><span class="currenty">$</span><span id="trans-price-12" class="price">2364</span><span class="vert">/</span><span id="price-one-3">$</span><span class="text">per optimization</span></td>
<td><button class="btn btn-buy" data-value="12">buy now</button></td>
</tr>
</tbody></table>$('.translate').each(function(){
var amount = parseInt($('.col').html());
var cost = parseInt($('.price').html());
var res = amount ? cost / amount : 0;
$("#price-one").text('$' + res.toFixed(0));
console.log(amount, cost);
});
касательно самой проблемы, то вот на скорую руку jsfiddle