如何使用运行时创建的对象渲染数据表单元格

Question

对于了解 javascript 的人来说，这将是小菜一碟。我想将 wavesurfer 对象放入数据表的渲染函数中。当我单击数据表中的按钮时，渲染会在运行时创建一个带有 id="demo" 的 div。

datatable渲染函数

"renderer": function ( api, rowIdx ) {
 ....
 return data ?
 $('<table/>').append( data ).prop('outerHTML') + $("<div></div>", {"id":"demo"}).prop('outerHTML') : false;
 }

要填充容器的音频对象 id="demo"

var wavesurfer = Object.create(WaveSurfer);
wavesurfer.init({
    container: document.querySelector('#demo'),
    waveColor: 'violet',
    progressColor: 'purple'
 });

wavesurfer.load('//upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg');

页面加载时出现此错误：

Uncaught Error: Container element not found

这是因为我还没有点击创建 div 的按钮。

我希望能够使用不同的文件 (.load) 为每一行呈现对象？你能帮我解决一下吗

Answer 1

我建议您使用 .wawe class 而不是多个 id，并将文件 url 设置为元素本身的属性，例如{"class":"wawe", url:"//upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"} :

return data 
  ?  $('<table/>').append( data ).prop('outerHTML') + $("<div></div>", {"class":"wawe", url:"//upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"}).prop('outerHTML') 
  : false;

当单击某行触发子行时，它会立即获得 class .parent。因此，您可以在 .parent 上创建点击处理程序，找到 .child 行（始终是下一行）.wawe 元素，并在初始化 WaveSurfer 时使用其中的 url 属性：

table.on('click', 'tr.parent', function() {
   var wavesurfer = Object.create(WaveSurfer),
       container = $(this).next('tr').find('.wawe')[0];
    wavesurfer.init({
      container: container,
      waveColor: 'violet',
      progressColor: 'purple'
   });
  wavesurfer.load(container.getAttribute('url'));
});

演示 -> http://jsfiddle.net/fxojLmvd/

希望这能解决问题。我以前不知道 WaveSurfer，谢谢你:)

如何使用运行时创建的对象渲染数据表单元格

How to render a datatable cell with an object created at runtime

javascript

jquery

datatables