Question

早上在示例页面上花了一些时间，似乎无法发现为什么这不起作用。

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

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] );
            } );
        }
    });
});

Answer 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之前附加了“row-expander”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的内部将处理你的'假'列，它只存在一个图像用于扩展状态

如果您使用的是2D数组而不是对象数组，这会变得有点棘手。我上面示例的数据源类似于：

[{ Id: some-guid, Name: 'My Object Name', NoteCount: 4 }, { Id: some-guid-2, Name: 'My Second Name', NoteCount: 10 }]

如何在数据表中插入TD

1 个答案: