Datatable ajax Delete confirmation popup & loading message

Question

Is it possible to have an animated loading text / spin while loading data to my Datatables also for my Delete Columns is it possible to display confirmation pop up?

$(document).ready(function() {
            $('#ProvTable').DataTable({
            "ajax": {
                "url": "/Users/Prov",
                "type": "Get",
                "data": { "idUser": "@userid", "idCity": "@cityId" },
                "datatype": "json"

            },

            "columns": [
                { "data": "Id", "visible": false, "searchable": false },
                { "data": "Name", "autowidth": true },
                { "data": "City", "autowidth": true },
                { "data": "UID", "autowidth": true },
               {
                   "title": "Delete",
                   "data": "Id",
                   "searchable": false,
                   "sortable": false,
                   "render": function (data, type, full, meta) {
                       return '<a href="@Url.Action("Delete", "Users")?id=' + data + '" class="editUser"><span class="glyphicon glyphicon-trash btn-sm btn-danger"></span></a>';
                    }
               },
            ]


        });

Yes you can Display a Confirmation Popup for Delete operation — Ghanshyam Singh, Feb 14 '17 at 10:43
Yes it is obviously possible. Read [this SO post](http://stackoverflow.com/questions/1964839/how-can-i-create-a-please-wait-loading-animation-using-jquery) to get to know how to create a loading animation using jQuery. For the popup make use of [jQuery Dialog](https://jqueryui.com/dialog/) — ViVi, Feb 14 '17 at 10:54

score 0 · Accepted Answer · answered Feb 14 '17 at 10:54

This is how you show a confirmation dialog on Database

$(document).ready(function() {
     var provTable=$('#ProvTable').DataTable({
        "ajax": {
            "url": "/Users/Prov",
            "type": "Get",
            "data": { "idUser": "@userid", "idCity": "@cityId" },
            "datatype": "json"

        },

        "columns": [
            { "data": "Id", "visible": false, "searchable": false },
            { "data": "Name", "autowidth": true },
            { "data": "City", "autowidth": true },
            { "data": "UID", "autowidth": true },
            {
                     data: null,
                     orderable: false,
                     className: "dt-center",
                     defaultContent: ' <a href="#" id=del>Delete</a>'

           },
        ]


    });

  $('#ProvTable tbody').on('click', 'tr td #del', function () {
       var row = $(this).parents('tr')[0];
       var mydata = (provTable.row(row).data());
       var con=confirm("Are you sure you want to delet this "+ mydata["Id"])
     if(con){
          // Do Something
     }
     else
      {
         // Nothing to do here
      }
});

  });

You will get whole row data in MyData

Datatable ajax Delete confirmation popup & loading message

1 Answers1