0

在示例页面上度过了一个上午，似乎无法发现为什么这不起作用。

目的是用 ajax（当前是一个示例 txt 文件）填充表，并在每一行中添加一列以允许编辑和删除。尝试了以下代码的各种变体（已演变为丑陋），但可以看出为什么它不起作用。没有任何类型的错误（在萤火虫或其他任何地方）它只是没有像代码“应该”那样添加列。

jQuery(document).ready(function($) {
    $(function() {
        tableActions();

        function initTable ()
        {
            var myTable = $('#example').dataTable( {
                "iDisplayLength": 10,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bProcessing": true,
                "bStateSave": false,
                "sAjaxSource": 'datatables_example_arrays.txt',
                "aLengthMenu": [[10, 15, 25, -1], [10, 15, 25, "All"]],
                "bRetrieve": true
            } );
            return myTable;
        }

        function tableActions ()
        {
            var oTable = initTable();
            /* Insert an 'edit' column with image to the table */
            var nCloneTh = document.createElement( 'th' );
            var nCloneTd = document.createElement( 'td' );
            nCloneTd.innerHTML = '<img src="title_edit.png">';
            nCloneTd.className = "center";

            $('#example thead tr').each( function () {
                oTable.insertBefore( nCloneTh, this.childNodes[0] );
            } );

            $('#example tbody tr').each( function () {
                oTable.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
            } );
        }
    });
});
4

1 回答 1

1

根据http://api.jquery.com/insertBefore/

你要这个：

$('#example thead tr').each( function () {
    $(nCloneTh).insertBefore(this.childNodes[0]);
});

虽然可能更“jQuery”的方式来做到这一点是：

$('#example thead tr').prepend(nCloneTh); //untested but should work

编辑：

好的，我在他的示例与您的示例中看到的唯一真正区别是他在初始化 dataTables 之前附加了“行扩展器”td。

我不确定你的 JSON 输入是什么样的，但这就是我的做法（我会尽量让它有点通用）：

aoColumns: [{
    mDataProp: 'Id',
    sClass: 'center',
    bUseRendered: false,
    fnRender: function (o) {
        return '<img src="media/open.png" class="row-expander" alt="" />';
    }
}, {
    mDataProp: 'NoteCount',
    sClass: 'center',        
    bUseRendered: false,
    fnRender: function (o) {
        return String.format('<img src="media/blue/{0}.png" alt="" class="notes-count" />', o.aData.NoteCount);
    }
}, {
    mDataProp: 'Name',
    bUseRendered: false,
    fnRender: function (o) {
        return String.format('<a href="./MyObjHome.aspx?ID={1}">{0}</a>', o.aData.Name, o.aData.Id);
    }
}, // add more columns
]

这样，您无需在每次重新渲染表格时都添加额外的单元格...... dataTables 的内部将处理您的“假”列，该列仅用于保存扩展状态的图像。

如果您使用的是二维数组而不是对象数组，这会变得有点棘手。上述示例的数据源如下所示：

[{
    Id: some-guid,
    Name: 'My Object Name',
    NoteCount: 4
}, {
    Id: some-guid-2,
    Name: 'My Second Name',
    NoteCount: 10
}]
于 2012-07-05T18:59:44.597 回答