3

我正在尝试td使用来自 AJAX 提要的数据表创建动态元素。

这是该aoColumnDefs列的相关内容：

"aoColumnDefs": [
    {
        "mRender":function(data, type, row) {
            return '<td class="ms">' +
                        '<div class="btn-group1">' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="left" data-original-title="Edit">' +
                                '<i class="gicon-edit"></i>' +
                            '</a> ' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="top" data-original-title="View">' +
                                '<i class="gicon-eye-open"></i>' +
                            '</a>' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="bottom" data-original-title="Remove">' +
                                '<i class="gicon-remove"></i>' +
                            '</a>' +
                        '</div>' +
                    '</td>';
        },
        "aTargets":[7]
    },

如您所见，我需要在创建行后处理此插件以将bootstrap.tooltips插件应用于<a>元素。

这是我尝试过的，以及其他 jQuery 选择器组合：

"fnCreatedRow": function(nRow, aData, iDataIndex) {
    $("a").tooltip();
},

我没有尝试过尝试让插件增强我的按钮并使工具提示出现在悬停时，它们具有正确的 CSS，因此它们不是不可见的，因为这个确切的 HTML 和 CSS 在没有动态的静态 HTML 文件中工作元素的创建。

4

1 回答 1

8

我相信您可以使用mRender和fnCreatedCell使工具提示与 ajax 数据源一起工作。请注意数据表参考页面并将fnCreatedCell与fnCreatedRow进行比较。

HTML 

<table id="example" class="table table-condensed">
    <thead>
        <tr>
            <th>Vegetable</th>
            <th>Fruit</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

JavaScript（或至少调用数据表的相关部分）

$('#example').dataTable({
    "aaData": aaData,
    // other set up for datatables left out for the sake of getting to the main issue...
    "aoColumnDefs": [
        { "aTargets": [0],
            "mData": "VegetableName",
            "sWidth": "150px"
        },
        { "aTargets": [1],
            "mData": "FruitName",
            "sWidth": "150px"
        },
        { "aTargets": [2],
            "mData": "LoansOpenedThisDay",
            "mRender": function (data, type, full) {
            // Note: 
            // not manually coding the '<td>' as in the question.           
                return   '<div class="btn-group1">' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="left" data-original-title="Edit">' +
                                '<i class="gicon-edit"></i>' +
                            '</a> ' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="top" data-original-title="View">' +
                                '<i class="gicon-eye-open"></i>' +
                            '</a>' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="bottom" data-original-title="Remove">' +
                                '<i class="gicon-remove"></i>' +
                            '</a>' +
                        '</div>';               
            },
            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                //  console.log( nTd );
                $("a", nTd).tooltip();
            }
        }
    ],
    // more datatables set up...
于 2013-05-31T00:09:52.490 回答