I'm trying to copy forum discussion function multiply but result is [object Object]
I'm trying to copy forum discussion function multiply but result is [object Object]
jcp
Posts: 2Questions: 1Answers: 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Expense</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/editor-demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "./php/expense.php",
table: "#expensetable",
fields: [ {
label: "Account:",
name: "expense.account",
type: "select"
}, {
label: "Currency:",
name: "expense.conversion"
}, {
label: "Quantity:",
name: "expense.quantity"
}, {
label: "Cost:",
name: "expense.cost"
}, {
"label": "Total:",
"name": "total",
type: "readonly",
}, {
label: "Comment:",
name: "expense.comment"
}
]
} );
function multiply () {
editor.field( 'total' ).val(
editor.field( 'expense.quantity' ).val() * editor.field( 'expense.cost' ).val()
);
}
editor.field( 'expense.quantity' ).input().on( 'keyup', multiply );
editor.field( 'expense.cost' ).input().on( 'keyup', multiply );
// Activate an inline edit on click of a table cell
$('#expensetable').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this, {
onBlur: 'submit'
} );
} );
$('#expensetable').DataTable( {
dom: "Bfrtip",
ajax: {
url: "./php/expense.php",
type: 'POST'
},
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "expense.id" },
{ data: "expense.budget_id" },
{ data: "expense.job" },
{ data: "accounts.account_name", editField: "expense.account" },
{ data: "expense.conversion" },
{ data: "expense.quantity" },
{ data: "expense.cost" },
{ data: null, type:"readonly"},
{ data: "expense.comment" }
],
order: [ 1, 'asc' ],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Expense</h1>
<div class="info">
</div>
<div class="demo-html"></div>
<table id="expensetable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Row</th>
<th>Budget ID</th>
<th>Job</th>
<th>Account</th>
<th>Conversion</th>
<th>Quantity</th>
<th>Cost</th>
<th>Total</th>
<th>Comment</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Row</th>
<th>Budget ID</th>
<th>Job</th>
<th>Account</th>
<th>Conversion</th>
<th>Quantity</th>
<th>Cost</th>
<th>Total</th>
<th>Comment</th>
</tr>
</tfoot>
</table>
</div>
</section>
</div>
</body>
</html>
Answers
Sorry it is so messy, not sure what to include in the question and have not figured out jsfiddle yet. Thanks