Delete and refresh

hlukey

I've got a datatable set up that's populated using custom code via an ajax call. To make the interface more visually appealing, I have a fixed number of rows on the table. i.e. If there are 3 records in a table, 2 extra are added in order to make 5. The problem is when changes are made to the data. if a row is removed, the data in the table is not refreshing. With the code that I have, the editor removes a row from the table, but the code to reload the table happens before the message is clicked. What is the best way to refresh a table after the underlying data has changed?
'''
// Define editor for grid
parts_editor = new $.fn.dataTable.Editor({
table: "#subscriptionlines",
idSrc: "TableLine_ID",
ajax: {
url: "/api/DeleteSubscriptionLine",
},
fields: [{ name: "PartCode" }, { name: "Quantity" }, {name: "UnitPrice"}]
}); // End - define editor

  var parts = $('#subscriptionlines').DataTable({
        dom: "rti",
        info: false,
        ajax: { url: "?handler=SubscriptionLines", dataSrc: "" },
        pageLength: "50",
        rowID: "TableLine_ID",
        columns: [
           { data: "TableLine_ID", visible: false },
           { data: "SubscriptionLine_ID", visible: false },
           { data: "Part_ID", visible: false },
           { data: "PartCode" },
           { data: "Description" },
           { data: "Quantity" },
           { data: "UnitPrice", render: DataTable.render.number(",", ".", 2, "$"), title: "Price" },
           { data: "Amount", render: DataTable.render.number(",", ".", 2, "$") },
           {
                 data: null,
                 className: 'dt-center editor-delete',
                 defaultContent: '<i class="fa fa-trash"/>',
                 orderable: false
             }
        ],
        columnDefs: [
           { target: 3, className: "dt-center" },
           { target: 5, className: "dt-center" }
        ]
  });
  parts.draw();
  $('#subscriptionlines').on('click', 'td.editor-delete', function (e) {
     e.preventDefault();
     parts_editor.remove($(this).closest('tr'), {
     title: 'Delete record',
     message: 'Are you sure you wish to remove this record?',
     buttons: 'Delete'
   });
   parts.ajax.reload();
  });

'''

kthorngren

See if using the postRemove event to execute parts.ajax.reload(); works.

Kevin

hlukey

That was exactly right parts_editor.on('remove', ...) Thank-you!