データ型にボタンを追加する - 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' 
    }); 
});