将自定义按钮添加到数据表不起作用

Posted 2023-05-07

【中文标题】将自定义按钮添加到数据表不起作用

【英文标题】：Add custom button to datatable not working

【发布时间】：2020-04-10 21:24:17

【问题描述】：

我想在名为 "view services" 的列中添加自定义按钮，因为我想在该列中显示多个值。如何添加具有自定义内容的自定义按钮来执行自定义功能？当用户单击该按钮时，我想打开一个引导模式来查看多个值。我怎样才能做到这一点？我是使用数据表的新手。

我的代码：

$('#appointment-datatable').DataTable(
    processing: true,
    serverSide: true,
    ajax: '/get_appointment_data',
    columns: [
         data: 'id', name: 'id' ,
         data: 'user_type', name: 'user_type' ,
         data: 'firstname', name: 'firstname' ,
         data: 'lastname', name: 'lastname' ,
         data: 'vehiclemodel', name: 'vehiclemodel' ,
         data: 'date', name: 'date' ,
         data: 'time', name: 'time' ,
         data: 'payment_status', name: 'payment_status' ,
         data: 'amount', name: 'amount' ,
         data: null, render: function(data, type, full, meta) 
            return '<button class="btn btn-mini btn-primary pull-right"> View Service</button>';
         
    ],
    dom: 'Bfrtip',
    buttons: [
         extend: 'print' ,
         extend: 'pdf' ,
         extend: 'excel' 
    ],
 );

【问题讨论】：

你加载jquery.min.js了吗？

是的。数据表正在工作。但我想为每个原始添加一个自定义按钮

我试过这个，不工作：` data: 'services', render: function( data, row, meta) return '查看服务'; `

尝试将return 的内容放入()。 return ('<button class="btn btn-mini btn-primary pull-right"> View Service</button>');`

试试这个data: null, mRender: function (data, type, full)

【参考方案1】：

你可以这样做：

$(document).ready(function () 
var oTable = $('#myDataTable').dataTable(
   // "bServerSide": true,
    "sAjaxSource": "fetchUserData.cfm",
    "bProcessing": true,
    "sPaginationType": "full_numbers",
    "aoColumns": [
         "mData": null ,
         "mData": "Name", "sTitle": "Name" , "sWidth": "20%",
         "mData": "UserName", "sTitle": "UserName", "sWidth": "20%" ,
         "mData": "Passowrd","sTitle": "Passowrd", "sWidth": "20%"  ,
         "mData": "Email","sTitle": "Email"  , "sWidth": "20%",
         "mData": "IsActive","sTitle": "IsActive" , "sWidth": "20%" ,
        
            "mData": null,
            "bSortable": false,
           "mRender": function (o)  return '<a href=#/' + o.userid + '>' + 'Edit' + '</a>'; 
        
    ]
);

 );

【讨论】：

我试过了，但还是不行：` data: 'services', render: function( data, row, meta) return '查看服务按钮>'; `

数据表没有用上面的代码渲染，有什么替代的解决方案吗？我想在每一行添加一个像 <button class="btn btn-primary">View Services</button> 这样的按钮

试试这样的***.com/questions/22471862/…

让我们continue this discussion in chat.

请点击聊天链接

【参考方案2】：

试试这个数据表。我添加了“defaultContent”检查它的工作-

    $('#appointment-datatable').DataTable(
            processing: true,
            serverSide: true,
            ajax: '/get_appointment_data',
            columns: 
                [
                  
                    data: 'id', 
                    name: 'id'
                  ,
                  
                    data: 'user_type', 
                    name: 'user_type'
                  ,
                  
                    data: 'firstname', 
                    name: 'firstname'
                  ,
                  
                    data: 'lastname', 
                    name: 'lastname'
                  ,
                  
                    data: 'vehiclemodel', 
                    name: 'vehiclemodel'
                  ,
                  
                    data: 'date', 
                    name: 'date'
                  ,
                  
                    data: 'time', 
                    name: 'time'
                  ,
                  
                    data: 'payment_status', 
                    name: 'payment_status'
                  ,
                  
                    data: 'amount', 
                    name: 'amount'
                  ,
                  
                    data: null,
                    "defaultContent": '<button class="btn btn-mini btn- 
          primary pull-right"> View Service</button>'
                  
                ],
            dom: 'Bfrtip',
            buttons: [
                  
                    extend: 'print'
                  ,
                  
                    extend: 'pdf'
                  ,
                  
                    extend: 'excel'
                  
              ],
          )