1

我在使用 JQuery Datatables 的表的标题内有一个问号。我尝试禁用排序（这并不理想），但我的图像不会触发 onclick 事件。

本质上，DataTables 劫持了整个单元格。

有谁知道我怎样才能让数据表只使用单元格内的文本或跨度，这样我仍然可以在其 onclick 事件中留下问号，并使用 DataTables 进行排序？

我在html头中有这个：

 $(function() {
    $('#dcsales').dataTable(
    {
    "aoColumns": [
    { "bSortable": false },
    null,
    { "bSortable": false },
    null,
    null,
    { "bSortable": false },
    { "bSortable": false }
    ]
    }
    );
});

我在表头中有这个：

<thead>
 <tr>
  <td><span id="qa_one"><img id="qa_one_t" src="img/question.png"/></span>Col 1</td>
<td> Col Two</td> ...
</tr>
</thead>

使用萤火虫，我可以看到 DataTables 将一个类插入到 td. 我想将生成的类插入到具有某个类的跨度中，所以我的标题单元格可能看起来像这样。

<td><span id="qa_one"><img id="qa_one_t" src="img/question.png"/></span><span class="datatables">Col 1</span></td>

我在他们的网站上阅读文档和论坛帖子，但找不到任何相关信息。

编辑

基于以下帖子 Jquery datatable with checkbox in header and in row: select all checkbox not working

这也让我看到了这个 http://datatables.net/usage/columns

我将 head 部分中的脚本更改为以下内容以及 html 中的所有内容：

$(function() {
    $('#dcsales').dataTable(
    {
    "aoColumns": [
    { "bSortable": false, "sTitle": "<span id='qa_one><img id='qa_one_t' src='img/question.png'/></span><span>Col One</span>", "mDataProp":null },
    null,
    { "bSortable": false },
    null,
    null,
    { "bSortable": false },
    { "bSortable": false }
    ]
    }
    );
});

但这并没有什么不同，html标记是正确生成的，但是当我单击图像时，光标会单击整个单元格。

以下是更改后生成的标记的样子：

<td class="sorting_disabled" tabindex="0" rowspan="1" colspan="1" style="width: 142px;" aria-label="Col One">
<span id="qa_points">
<span>Type of Points</span>
</td>
4

1 回答 1

0

我不确定这是否是您想要的，但您使用它

示例 JS：

$(document).ready( function() {
  $('#example').dataTable( {
    // you can use another callback if you want
    "fnInitComplete": function(oSettings, json) {
      $("#qa_one_t").on('click',function(){
          alert('click fire on img !');
      });
    }
  });
});

笔记

在你的 js 代码中，你有：

[...]<span id='qa_one><img id='qa_one_t'[...]

'为了拥有而失踪：<span id='qa_one'>

它可以解决问题。对你有帮助吗？

于 2013-08-24T18:44:10.387 回答