Hi @allan
I understand that Editor cant be used with stored procedures but I did a bit if research and found a way to do it with raw SQL query.
1) JS code
<script type="text/javascript" language="javascript">
var table;
var filter_product_code;
var filter_product_name;
editor = new $.fn.dataTable.Editor( {
ajax: "/xxxx_fetch.php",
table: "#example",
idSrc: 'contract_id',
fields: [
{
label: "Contract ID:",
name: "contract_id"
},
{
label: " Size1:",
name: "This has to be a dynamic field"
},
{
label: "Size2:",
name: "This has to be a dynamic field"
}
]
} );
var columns = [];
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this, {
} );
} );
Function to populate table
function getDT(filter_product_code,filter_product_name) {
$.ajax({
type:'POST',
url: "/xxx_fetch.php",
data: {filter_product_code: JSON.stringify(filter_product_code),
filter_product_name: JSON.stringify(filter_product_name)},
success: function (data) {
data = JSON.parse(data);
columnNames = Object.keys(data.data[0]);
for (var i in columnNames) {
columns.push({data: columnNames[i],
title: columnNames[i]});
}
if ( $.fn.dataTable.isDataTable( '#example' ) ) {
$('#example').DataTable().destroy();
$('#example').empty();
}
table = $('#example').DataTable( {
data: data.data,
columns: columns,
colReorder: true,
dom: "Bfrtip",
destroy: true,
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
//When the editing is done the datable has to be refreshed again to reflect / show the changes
editor.on( 'postSubmit', function ( e, json, data, action, xhr ) {
getDT(filter_product_code,filter_product_name);
});
//This select function gets the data which will be used in WHERE sql query to insert data in base table
table.on( 'select', function ( e, dt, type, indexes ) {
var abc = table.rows({selected:true} ).data().toArray();
var pcode = abc[0].product_code;
var sdate = abc[0].start_date;
var mname = abc[0].member_name;
$.ajax({
type:'POST',
url: "/Editor/Editor-1.9.5/controllers/contracts/contracts_forecast_fetch.php",
data: {pcode: JSON.stringify(pcode),
sdate: JSON.stringify(sdate),
mname: JSON.stringify(mname)
},
});
} );
}
});
}
$(document).ready(function() {
//When the button is clicked the function is called again ro populate the tablke with filtered data
$('#filter').click(function(){
filte_product_code = $('#filter_product_code').val();
filter_product_name = $('#filter_product_name').val();
if(filter_product_code != '' && filter_product_name != '')
{
getDT( filter_product_code, filter_product_name);
}
else
{
alert('Select Both filter option');
}
});
} );
Two main issues I am facing is
1) When is click in the filter , the expected data gets sent to server and server returns correct data but the issue is , the previous datatable doesn't get destroyed , it add the data vertically with each filtered data. In other words, each filtered data will be added vertically to already displayed table
2) As you might have noticed with the editor , the editor field names need to be changed dynamically with each returned json. because each time data is returned either number of columns change or the heading name change.
Is there a way to populate the editor fields dynamically much like we did for datatable?
Thank you
Kind Regards,
KT