No edit or Remove icon button

[luckyzor]

head.php :

<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>        
<script src="./plugins/jquery.tabledit.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="utf-8">

the table is OK but no edit or remove icon:

jquery code:

<script> $(document).ready(function(){ $('#editable_table').Tabledit({ url:'action.php', hideIdentifier: true, columns:{ identifier:[0, "product_id"], editable:[[6, 'product_stock']] }, restoreButton:false, onSuccess:function(data, textStatus, jqXHR) { if(data.action == 'delete') { $('#'+data.id).remove(); } } }); }); </script>

Can you please help me?

Thanks for your help

[ertw0405]

hi there, i got the same issue too >.<

[master4eg]

How fix it ?! And i have this problem... Bootstrap 4.1.1

[eureka2]

Hi,

Replace "btn-default" (bootstratp 3) by "btn-secondary" (bootstratp 4) and "glyphicon" by "fa" :

			buttons: {
				edit: {
					class: 'btn btn-sm btn-secondary',
					html: '<span class="fa fa-pencil"></span>',
					action: 'edit'
				},
				delete: {
					class: 'btn btn-sm btn-secondary',
					html: '<span class="fa fa-trash"></span>',
					action: 'delete'
				},

Glyphicons icon font is dropped in bootstrap4, use font-awesome : <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

[sumitwaghmare]

btn-default

where to change this?

[rizwanswati]

i had the same issue. you have to change this into tabledit() function section. here is how i did it:

$('#datatable-buttons').on('draw.dt',function(){ $('#datatable-buttons').Tabledit({ url:request_url+'getUpdate', // method:"POST", dataType:'json', columns:{ identifier : [0, 'orders_id'], editable:[[1, 'invoice_number'], [2, 'mobile_number'], [3, 'total_items'] ] // [3, 'gender', '{"1":"Male","2":"Female"}']] },

               buttons: {
                edit: {
                    class: 'btn btn-sm btn-secondary',
                    html: '<span class="fas fa-pencil-alt"></span>',
                    action: 'edit'
                },
                delete: {
                    class: 'btn btn-sm btn-secondary',
                    html: '<span class="fas fa-trash"></span>',
                    action: 'delete'
                }
            },

               restoreButton : false,
               onSuccess : function(data, textStatus, jqXHR){
                   console.log($data);
                if(data.action == 'delete')
                {
                    $('#' + data.id).remove();
                    $('#datatable-buttons').ajax.reload();
                }
            }
        });
    });

some part maybe irrelevant for u, but it will give u an idea where to make changes.