Row refreshing after every submit
Row refreshing after every submit
rocketreading
Posts: 8Questions: 6Answers: 0
in Editor
Hi there,
I'm having trouble stopping the row from being fully refreshed after every update. Is it possible to change this behaviour? Below is my js code.
$('.expenses').each(function() {
var id = $(this).data('id');
editors[id] = new $.fn.dataTable.Editor( {
ajax: "/ajax/expenses/editor",
table: ".expenses[data-id='"+id+"']",
fields: [
{
"label": "Test",
"name": "test_id",
"type": "select",
"options": [
{
label: 'PTP',
value: 0
},
@foreach(Auth::user()->recentTests() as $test)
{
label: '{{ $test->job->company->name . "-" . $test->name . "-" . $test->job_id}}',
value: {{ $test->id }}
},
@endforeach
]
},
{
"label": "Category",
"name": "category",
"type": "select",
"options": [
"Customer entertainment",
"Hotels and subsistence",
"Travel",
"Other"
]
},
{
"label": "Postcode from",
"name": "postcode_from"
},
{
"label": "Postcode to",
"name": "postcode_to"
},
{
"label": "Mileage",
"name": "mileage_amount"
},
{
"label": "Return",
"name": "return",
"type": "checkbox",
"separator": "|",
"options": [
{ label: "", value: 1 }
]
},
{
"label": "Details",
"name": "details",
"type": "textarea"
},
{
"label": "VAT",
"name": "vat_receipt",
"type": "checkbox",
"separator": "|",
"options": [
{ label: "", value: 1 }
]
},
{
"label": "VAT amount",
"name": "vat_amount"
},
{
"label": "Gross amount",
"name": "gross_amount"
},
{
"label": "Date",
"name": "receipt_date",
"type": "date",
"dateFormat": "dd-mm-yy"
}
],
formOptions: {
inline: {
onBlur: true
}
}
} );
editors[id].on('onSubmitSuccess', function(e, json, data) {
//console.log( tables[id].cell( this ) );
//console.log( tables[id].row( this ) );
for (var table in tables) {
tables[table].ajax.reload();
}
});
$(this).on( 'click', 'tbody td', function () {
if ($(this).hasClass('add-images')) return;
editors[id].inline( this, {
submitOnBlur: true
} );
} );
tables[id] = $(this).DataTable( {
dom: 'Bfrtip',
ajax: '/ajax/expense-groups/'+id,
aaSorting: [],
autoWidth: false,
columns: [
{
"data": "test_name",
"editField": "test_id",
"width": "10%"
},
{
"data": "category",
"width": "10%"
},
{
"data": "postcode_from",
"width": "10%"
},
{
"data": "postcode_to",
"width": "10%"
},
{
"data": "mileage_amount",
"width": "5%"
},
{
"data": "return",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="editor-active">';
}
return data;
},
className: "dt-body-center",
"width": "2%"
},
{
"data": "details",
"width": "10%"
},
{
"data": "vat_receipt",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="editor-active">';
}
return data;
},
className: "dt-body-center",
"width": "2%"
},
{
"data": "vat_amount",
"width": "5%"
},
{
"data": "gross_amount",
"width": "5%"
},
{
"data": "receipt_date",
"width": "10%"
},
{
data: null,
className: 'add-images',
orderable: false,
"render": function(data, type, full, meta) {
return '<a title="Add receipts" class="btn btn-sm btn-success show-images" data-id="'+full.id+'" href="javascript:void(0);"><i class="glyphicon glyphicon-picture"></i></a> ' +
// '<a title="Edit images" class="btn btn-sm btn-info edit-images" data-id="'+full.id+'" href="javascript:void(0);"><i class="fa fa-edit"></i></a> ' +
'<a title="Delete expense" class="btn btn-sm btn-danger delete-expense" data-group-id="'+id+'" data-id="'+full.id+'" href="javascript:void(0);"><i class="fa fa-remove"></i></a>';
}
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
],
rowCallback: function ( row, data ) {
// Set the checked state of the checkbox in the table
$('input.editor-active', row).prop( 'checked', data.vat_receipt == true );
}
} );
});
This discussion has been closed.
Answers
I've posted a reply in this thread.
Allan