javascript - HTML DataTables 在单元格中呈现函数

Question

我有一个创建 DataTable 的 JavaScript 函数。对于每一行的第一个单元格，我想渲染一个可视化函数（使用 3Dmol.js 库）并在这个单元格中显示对象。3Dmol.js 需要一个放置函数结果的容器（元素变量）。我想选择当前单元格。我试过 $(this); 但我收到一条错误消息：“创建查看器时未捕获错误：TypeError：div.getBoundingClientRect 不是函数”

 <script type="text/javascript">

      var in_json = '{{ in_json }}'

      $(document).ready(function () {

        $('#fragmenterTable').DataTable({
          'ajax': { url: in_json, dataSrc: 'data' },
          "scrollX": true,
          "scrollY": 200,
          "autoWidth": false,

          "columnDefs": [
            {
                "render": function ( data, type, row ) {
                    return function viz_frag(data) {
                      var glviewer = null;
                      data = data 
                      let element = $(this);

                      glviewer = $3Dmol.createViewer(element, "gldiv");
                      glviewer.addModel(data,'mol2');
                      glviewer.setStyle({},{stick:{}});
                      glviewer.zoomTo()
                      glviewer.zoom(2,1000);
                      
                      glviewer.render();

                      glviewer.setBackgroundColor(0xffffff);

    };
                },
                "targets": 0
            },
            { "visible": false,  "targets": [ 3 ] }
        ]

        });
        $('.dataTables_length').addClass('bs-select');
      });
    </script>

我错过了什么？谢谢！

标签： javascripthtmldatatables