add edit button to datatable

Solutions on MaxInterview for add edit button to datatable by the best coders in the world

showing results for - "add edit button to datatable"
Gerardo
16 Aug 2018
1$(document).ready(function(){
2
3  // DataTable
4  var userDataTable = $('#userTable').DataTable({
5     'processing': true,
6     'serverSide': true,
7     'serverMethod': 'post',
8     'ajax': {
9        'url':'ajaxfile.php'
10     },
11     'columns': [
12        { data: 'name' },
13        { data: 'email' },
14        { data: 'gender' },
15        { data: 'city' },
16        { data: 'action' },
17     ]
18  });
19
20  // Update record
21  $('#userTable').on('click','.updateUser',function(){
22     var id = $(this).data('id');
23
24     $('#txt_userid').val(id);
25
26     // AJAX request
27     $.ajax({
28        url: 'ajaxfile.php',
29        type: 'post',
30        data: {request: 2, id: id},
31        dataType: 'json',
32        success: function(response){
33           if(response.status == 1){
34
35             $('#name').val(response.data.name);
36             $('#email').val(response.data.email);
37             $('#gender').val(response.data.gender);
38             $('#city').val(response.data.city);
39
40             userDataTable.ajax.reload();
41           }else{
42             alert("Invalid ID.");
43           }
44        }
45     });
46
47  });
48
49  // Save user 
50  $('#btn_save').click(function(){
51     var id = $('#txt_userid').val();
52
53     var name = $('#name').val().trim();
54     var email = $('#email').val().trim();
55     var gender = $('#gender').val().trim();
56     var city = $('#city').val().trim();
57
58     if(name !='' && email != '' && city != ''){
59
60       // AJAX request
61       $.ajax({
62         url: 'ajaxfile.php',
63         type: 'post',
64         data: {request: 3, id: id,name: name, email: email, gender: gender, city: city},
65         dataType: 'json',
66         success: function(response){
67            if(response.status == 1){
68               alert(response.message);
69
70               // Empty and reset the values
71               $('#name','#email','#city').val('');
72               $('#gender').val('male');
73               $('#txt_userid').val(0);
74
75               // Reload DataTable
76               userDataTable.ajax.reload();
77
78               // Close modal
79               $('#updateModal').modal('toggle');
80            }else{
81               alert(response.message);
82            }
83         }
84      });
85
86    }else{
87       alert('Please fill all fields.');
88    }
89  });
90
91  // Delete record
92  $('#userTable').on('click','.deleteUser',function(){
93     var id = $(this).data('id');
94
95     var deleteConfirm = confirm("Are you sure?");
96     if (deleteConfirm == true) {
97        // AJAX request
98        $.ajax({
99          url: 'ajaxfile.php',
100          type: 'post',
101          data: {request: 4, id: id},
102          success: function(response){
103             if(response == 1){
104                alert("Record deleted.");
105
106                // Reload DataTable
107                userDataTable.ajax.reload();
108             }else{
109                alert("Invalid ID.");
110             }
111          }
112        });
113     } 
114
115  });
116});