Question

我使用jQuery DataTables以表格格式显示Ajax响应。我想为每条记录添加两个按钮（开始和停止）。我使用以下格式：

$(document).ready(function() {
  $('#example').DataTable( {
      "processing": true,
      "serverSide": true,
      "ajax": {
      url:ur,
      data:{userid:id}, 
      type:"post",
      dataType: 'json',
      dataSrc: function ( json ) {
         return json.data;
      },   
      error: function {
         alert('error');                                           
      }
    },
  });
});

Answer 1

使用columnDefs和render选项为特定列生成动态内容。

var table = $('#example').DataTable({
    ajax: 'https://api.myjson.com/bins/qgcu',
    columnDefs: [
        {
            targets: 5,
            render: function(data, type, full, meta){
               if(type === 'display'){
                  data = 
                      '<button class="btn-start" type="button">Start</button>'
                      + '<button class="btn-stop" type="button">Stop</button>';
               }

               return data;
            }
        }       
    ]
});

// Handle click on "Start" button
$('#example').on('click', '.btn-start', function(){
   var data = table.row($(this).closest('tr')).data();
   console.log('Start', data);       
});

// Handle click on "Stop" button
$('#example').on('click', '.btn-stop', function(){
   var data = table.row($(this).closest('tr')).data();
   console.log('Stop', data);       
});

请参阅this jsFiddle以获取代码和演示。

Answer 2

我通常使用Render选项解决此类挑战。而且我通常在表格的第一列包含像id这样的东西 - 例如，它不需要在表格中显示。因此，我将为col1分配一个render-method，这将简单地创建必要的HTML来插入按钮控件（这可能会在服务器上触发一些可能与id链接的操作 - 该单元格的数据。所以然后它们很好地融合在一起; - ））

显示一些代码：

  ...
render: function(data,type,row,meta)
   {
    var img=data;
    if (type=="display") {img = '<img src="</Examples/Data/index/' + data + '.png" />';}
    return img;
   }
   ...

或者，插入default-content并使用onClick-Event注入id。所以，col的定义就像......

             {
             "className": "details-control" ,
             "data": null ,
              "defaultContent": '<span class=" fa fa-info-circle"></span>' ,
             "width": "12px" , 
             "orderable":false
           }

并在DataTable-Call之后，将onClick-Handler指定为插入显示详细信息的行：

   $('#DieListe tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );     // get DataTable Row-Object
        var the_id = row.data()[0];    // Data[0]=id of record!

           $.ajax({
                method: "GET" ,
                dataType: "text" ,
                url: path + "listen_details",
                data: {id: the_id} ,
                success: function(result){
                if (row.child.isShown()){
                    tr.removeClass('shown');
                    row.child.hide();
                }
                else {
                    tr.addClass('shown');
                    row.child(format(result)).show();
                }
                } ,
                error: function(xhr,status,error) {
                    // log error:
                    console.log(xhr);
                    console.log(status);
                    console.log(error);
                }
           });

    });

如何为数据表中的列生成动态内容？

2 个答案: