Javascript 向Datatables添加按钮-Jquery

如何向每行的数据表中添加按钮？在我的代码中，似乎有一些事情我做得不对

我怎样才能做到这一点

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>';
      }
         }
    }]
    });
});

$（文档）.ready（函数（）{
oTable=$（“#用户表”）.DataTable({
“处理”：对，
“服务器端”：正确，
“ajax”：“{route（'datatable.getpost'）}}”，
“栏目”：[
{data:'name'，name:'name'}，
{数据：'description'，名称：'description'}，
{数据：'no_of_items'，名称：'no_of_items'}，
],
“aoColumns”：[{
{
“mRender”：功能（数据、类型、完整）{
返回“”；
}
}
}]
});
});

}）

基本上这就是你正在寻找的代码

输出将类似于-

您还需要包括这些js文件

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

我希望这有帮助

编辑1

对于行编辑，您可以选中此项

编辑2

---

看看这个。你为什么用mRender？@VijayRathore，在你提供的参考资料上我找不到任何按钮。实际上，我是DataTables的新手，如果ajax源代码也返回按钮的HTML，则不必在Datatable初始化中编写任何内容。检查这里的ajax源数据表不，这不是我要找的。。。按钮应该在每一行。哦，好的，等等，让我给你详细的信息well@LearnLaravel选中Fiddle在该类中，除了编辑和删除按钮设计外，还可以添加一个类，并对该类中的按钮设计进行编码

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

$('#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'
    } );
} );