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

編集：

OK、彼の例とあなたの例で私が見る唯一の本当の違いは、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
}]
于 2012-07-05T18:59:44.597 に答える