Question

我在datatables中有一个数据表，我想将鼠标移到要显示图形的单元格上。该图是由一个单独的php文件创建的，并获得了传递给它的事件ID。

我的数据表非常标准，我只是想不出如何在datattabe redner函数中调出iframe。一旦将鼠标移开，Id就会消失（图形）消失

我已经尝试过iframe，模态，但是我无法使其正常工作。我以为我需要使用render函数来修改代码，但是我的php不好我的javascript很差

Answer 1

您尝试过的某些代码会很有帮助。

但是这里有一个使用引导程序弹出窗口的示例，您可以将鼠标悬停在第一列上，并查看带有自定义html的弹出窗口。这使用了悬停触发器，因此当您将鼠标移开时它将隐藏。

这使用drawCallback事件处理程序注册引导程序弹出窗口，而不是将其包含在render函数中，但是您可以看到一个render函数如何发出html的示例，因此如果您有iframe或自定义代码来使用可以放在那里。

<table class="dataTable table table-striped" id="example"></table>

$(document).ready(function() {

  var dataSet = [
    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
    ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
    ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
    ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"]
  ];

  var myTable;

  myTable = $('#example').DataTable({
    "sPaginationType": "full_numbers",
    data: dataSet,
    columns: [{
      title: "Name",
      render: function(cell, type, row) {
        return '<span class="show-modal" data-modal-id="' + row[3] + '">' + row[0] + '</span>';
      }
    }, {
      title: "Position"
    }, {
      title: "Office"
    }, {
      title: "Extn."
    }, {
      title: "Start date"
    }, {
      title: "Salary"
    }],
    drawCallback: function(settings) {
      $(".show-modal").each(function() {
        var id = $(this).attr('data-modal-id');
        $(this).popover({
          content: function() {
            return '<h1>Your chart goes here</h1><p>The id passed in is <b>' + id + '</b> which is the extension in this example</p>';
          },
          trigger: 'hover',
          html: true,
          title: 'chart'
        })
      });
    }
  });
});

更新

更新了小提琴，以包含链接到外部资源的示例。

http://jsfiddle.net/khztLu9n/3/

在此示例中，我更改了popover方法以呈现iframe。请注意，这还需要一些CSS才能使用id（将新列添加到数据集）格式化弹出窗口。

.popover {
  max-width: 100%;
}
.popover-content{
      width: 480px;
      max-width: auto;
      height: 250;
  }


$(document).ready(function() {

  var dataSet = [
    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800", "FC65E5"],
    ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750", "FC65E5"],
    ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000", "FC65E5"],
  ];

  var columnDefs = [{
    title: "Name",
    render: function(cell, type, row) {
        return '<span class="show-modal" data-modal-id="' + row[6] + '">' + row[0] + '</span>';
    }
  }, {
    title: "Position"
  }, {
    title: "Office"
  }, {
    title: "Extn."
  }, {
    title: "Start date"
  }, {
    title: "Salary"
  }];

  var myTable;

  myTable = $('#example').DataTable({
    "sPaginationType": "full_numbers",
    data: dataSet,
    columns: columnDefs,
      drawCallback: function(settings) {
        $(".show-modal").each(function() { 
          var id = $(this).attr('data-modal-id');
            $(this).popover({
            content: function() {
                return '<div style="width: 440px; height=220px"><iframe src="https://soccerscanner.net/pressure/showgraph.php?gameid=' + id + '" width=440 height=220></iframe></div>';
            },
            trigger: 'hover',
            html: true,
            title: 'chart'
          }
        )
        });
      }
  });


});

如何在数据标签中使用onmouseover显示图形

1 个答案: