editor = new $.fn.dataTable.Editor({ ajax: "/ActiveContracts/Editor", table: "#myTable", idSrc: "ACKey", fields: [{ label: "Commodity:", name: "Commodity" }, { label: "Accounting Code:", name: "AccountingCode" }, { label: "Prospect Code:", name: "ProspectCode" }, { label: "Prospect Name:", name: "ProspectName" }, { label: "Well Name:", name: "WellName" }, { label: "Well ID:", name: "WellID" }, { label: "Booking Well ID:", name: "BookingWellID" }, { label: "Unit ID:", name: "UnitID" }, { label: "Tract ID:", name: "TractID" }, { label: "Fund:", name: "Fund" }, { label: "Start Date:", name: "StartDate", type: "datetime", format: "MM/DD/YYYY", data: function (data) { const $t = data; $.each($t, function (a, b) { if (a === "StartDate" && data[a]) { console.log(data[a]); // value arrives in json format if (data[a].substr(0, 1) === "/") { data[a] = convertJsonDateToShortDate(b); } console.log(data[a]); // proof that value converted to short date } }); return data.StartDate; // THIS IS THE KEY! Return only the specific parameter. } }, { label: "End Date:", name: "EndDate", type: "datetime", format: "MM/DD/YYYY", data: function (data) { const $t = data; $.each($t, function (a, b) { if (a === "EndDate" && data[a]) { console.log(data[a]); // value arrives in json format if (data[a].substr(0, 1) === "/") { data[a] = convertJsonDateToShortDate(b); } console.log(data[a]); // proof that value converted to short date } }); return data.EndDate; // THIS IS THE KEY! Return only the specific parameter. } }, { label: "Gas Processor:", name: "GasProcessor" }, { label: "Purchaser:", name: "Purchaser" }, { label: "Scout K Number:", name: "ScoutKNum" }, { label: "Outside Contract Number:", name: "OutsideContractNum" }, { label: "Meter Numbers:", name: "MeterNumbers" }, { label: "T and F:", name: "TandF" }, { label: "Fixed Price:", name: "FixedPrice" }, { label: "Base Price:", name: "BasePrice" }, { label: "Price Component 1:", name: "PriceComponent1" }, { label: "Percent 1:", name: "Percent1" }, { label: "Price Component 2:", name: "PriceComponent2" }, { label: "Percent 2:", name: "Percent2" }, { label: "Price Component 3:", name: "PriceComponent3" }, { label: "Percent 3:", name: "Percent3" }, { label: "Price Component 4:", name: "PriceComponent4" }, { label: "Percent 4:", name: "Percent4" }, { label: "Marketing Deduct:", name: "MarketingDeduct" }, { label: "Rollover:", name: "Rollover" }, { label: "Days Notice:", name: "DaysNotice" } ] }); var table = $("#myTable").DataTable({ "processing": true, // for show progress bar "serverSide": true, // for process server side //"filter": true, // this is for disable filter (search box) "orderMulti": false, // for disable multiple column at once "scrollX": false, "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], "ajax": { "url": "/ActiveContracts/LoadData", "type": "POST", "data": function (d) { d.commodity = $('#commodity').val(); d.activedate = $('#activedate').val(); d.acctcode = $('#acctcode').val(); d.gasprocessor = $('#gasprocessor').val(); d.prospectname = $('#prospectname').val(); d.purchaser = $('#purchaser').val(); d.pricecomponent1 = $('#pricecomponent1').val(); d.pricecomponent2 = $('#pricecomponent2').val(); d.pricecomponent3 = $('#pricecomponent3').val(); d.pricecomponent4 = $('#pricecomponent4').val(); d.fund = $('#fund').val(); } }, "columns": [ { "className": 'details-control', "orderable": false, "data": null, "defaultContent": '', "render": function () { return ''; }, width: "15px" }, { "data": "Commodity", "name": "Commodity", "autoWidth": true }, { "data": "AccountingCode", "name": "Accounting Code", "autoWidth": true }, { "data": "ProspectCode", "name": "Prospect Code", "autoWidth": true, "visible": false }, { "data": "ProspectName", "name": "Prospect Name", "autoWidth": true }, { "data": "WellName", "name": "Well Name", "autoWidth": true }, { "data": "WellID", "name": "Well ID", "autoWidth": true }, { "data": "BookingWellID", "name": "Booking Well ID", "autoWidth": true }, { "data": "UnitID", "name": "Unit ID", "autoWidth": true, "visible": false }, { "data": "TractID", "name": "Tract ID", "autoWidth": true, "visible": false }, { "data": "Fund", "name": "Fund", "autoWidth": true, "visible": false }, { "data": "StartDate", "name": "Start Date", "type": "date", "render": function (data, type, full) { return (data) ? moment(data).format('MM/DD/YYYY') : ''; }, "visible": false }, { "data": "EndDate", "name": "End Date", "type": "date", "render": function (data, type, full) { return (data) ? moment(data).format('MM/DD/YYYY') : ''; }, "visible": false }, { "data": "GasProcessor", "name": "Gas Processor", "autoWidth": true, "visible": false }, { "data": "Purchaser", "name": "Purchaser", "autoWidth": true }, { "data": "ScoutKNum", "name": "Scout K Num", "autoWidth": true }, { "data": "OutsideContractNum", "name": "Outside Contract Num", "autoWidth": true }, { "data": "MeterNumbers", "name": "Meter Numbers", "autoWidth": true, "visible": false }, { "data": "TandF", "name": "T and F", "autoWidth": true, "visible": false }, { "data": "FixedPrice", "name": "Fixed Price", "autoWidth": true, "visible": false }, { "data": "BasePrice", "name": "Base Price", "autoWidth": true }, { "data": "PriceComponent1", "name": "Price Component 1", "autoWidth": true, "visible": false }, { "data": "Percent1", "name": "Percent 1", "autoWidth": true, "visible": false }, { "data": "PriceComponent2", "name": "Price Component 2", "autoWidth": true, "visible": false }, { "data": "Percent2", "name": "Percent 2", "autoWidth": true, "visible": false }, { "data": "PriceComponent3", "name": "Price Component 3", "autoWidth": true, "visible": false }, { "data": "Percent3", "name": "Percent 3", "autoWidth": true, "visible": false }, { "data": "PriceComponent4", "name": "Price Component 4", "autoWidth": true, "visible": false }, { "data": "Percent4", "name": "Percent 4", "autoWidth": true, "visible": false }, { "data": "MarketingDeduct", "name": "Marketing Deduct", "autoWidth": true, "visible": false }, { "data": "Rollover", "name": "Rollover", "autoWidth": true, "visible": false }, { "data": "DaysNotice", "name": "Days Notice", "autoWidth": true, "visible": false }, { "data": "ACKey", "name": "ACKey", "autoWidth": true, "visible": false } ], "order": [[1, 'asc']], select: true, dom: 'B<"top"l>rt<"bottom"ip><"clear">', buttons: [ { extend: "create", editor: editor }, { extend: "edit", editor: editor }, { extend: "remove", editor: editor }, { extend: "selected", text: 'Future Edit', action: function (e, dt, node, config) { // Start in edit mode, and then change to create editor .edit(table.rows({ selected: true }).indexes(), { title: 'Future Edit', buttons: 'Create from existing' }) .mode('create'); } }, { extend: 'collection', text: 'Export', buttons: [ 'copy', 'excel', 'csv', 'pdf', 'print' ] }, { text: 'Import CSV', action: function () { uploadEditor.create({ title: 'CSV file import' }); } }, { extend: 'selectAll', className: 'btn-space' }, 'selectNone', ] });