데이터 테이블에 단추 추가 - Jquery

Question

어떻게 각 행의 데이터 테이블에 단추를 추가 할 수 있습니까? 내 코드로, 내가 옳지 않은 일이있는 것처럼 보입니다.

어떻게하면됩니까?

HTML

<table id="users-table" class="table table-hover table-condensed" style="width:100%"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Grade</th> 
      <th>Action</th> 
     </tr> 
    </thead> 
    </table> 

JS

$(document).ready(function() { 

    oTable = $('#users-table').DataTable({ 
     "processing": true, 
     "serverSide": true, 
     "ajax": "{{ route('datatable.getpost') }}", 
     "columns": [ 
      {data: 'name', name: 'name'}, 
      {data: 'description', name: 'description'}, 
      {data: 'no_of_items', name: 'no_of_items'}, 

     ], 
     "aoColumns": [{ 
     { 
     "mRender": function(data, type, full) { 
     return '<a class="btn btn-info btn-sm" href=#>' + 'Edit' + '</a>'; 
     } 
     } 
    }] 
    }); 
}); 

Answer 1

$(document).ready(function() { 
$('#example').DataTable({ 
    dom: 'Bfrtip', 
    buttons: [ 
     'copyHtml5', 
     'excelHtml5', 
     'csvHtml5', 
     'pdfHtml5' 
    ] 
}); 

});

기본적으로이 코드는 찾고있는 코드입니다. 당신은뿐만 아니라 이들의 js 파일을 포함 할 필요가

for more details check this link

- 같은

출력 될 것입니다.

https://cdn.datatables.net/buttons/1.5.0/js/dataTables.buttons.min.js 
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js 
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js 
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js 
https://cdn.datatables.net/buttons/1.5.0/js/buttons.html5.min.js 

이 정보가 도움이되기를 바랍니다.

EDIT 1

행 편집을 위해이 js fiddle

편집 2

DataTable also provide InTable feature check this link

을 확인할 수 있습니다

$('#example').DataTable({ 
    ajax: "../php/staff.php", 
    columns: [ 
     { data: null, render: function (data, type, row) { 
      // Combine the first and last names into a single table field 
      return data.first_name+' '+data.last_name; 
     } }, 
     { data: "position" }, 
     { data: "office" }, 
     { data: "extn" }, 
     { data: "start_date" }, 
     { data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$') }, 
     { 
      data: null, 
      className: "center", 
      defaultContent: '<a href="" class="editor_edit">Edit</a>/<a href="" class="editor_remove">Delete</a>' 
     } 
    ] 
}); 

편집 & 코드가 될 것입니다 삭제와 같은 :

// Edit record 
$('#example').on('click', 'a.editor_edit', function (e) { 
    e.preventDefault(); 

    editor.edit($(this).closest('tr'), { 
     title: 'Edit record', 
     buttons: 'Update' 
    }); 
}); 

// Delete a record 
$('#example').on('click', 'a.editor_remove', function (e) { 
    e.preventDefault(); 

    editor.remove($(this).closest('tr'), { 
     title: 'Delete record', 
     message: 'Are you sure you wish to remove this record?', 
     buttons: 'Delete' 
    }); 
});