CODEWITHSUNDEEP
jquerydatatables
GDP
GDP

Reputation: 8178

How to insert TD in datatables

Have spent the morning on the examples page, and can't seem to spot why this isn't working.

The intent is to populate the table with ajax(currently a sample txt file), and add a column to each row to allow editing and deletion. Have tried all sorts of variations of the below code (which has evolved to ugly), but can see why it won't work. No errors of any kind (in firebug or anywhere else) it just doesn't do add the columns as the code "is supposed" to do.

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

Upvotes: 0

Views: 995

Answers (1)

BLSully
BLSully

Reputation: 5939

According to http://api.jquery.com/insertBefore/

you want this:

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

although maybe the more "jQuery" way to do this would be:

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

EDIT:

OK, the only real difference I see in his example vs. yours is that he's appending the "row-expander" td's before initializing dataTables.

I'm not sure what your JSON input looks like, but this is how I do mine (I'll try to make it somewhat generic):

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
]

This way you don't need to mess around with adding the extra cells every time the table re-renders... the internals of dataTables will handle your 'fake' column which only exists to hold an image for the expansion state.

This gets a bit trickier if you are using a 2D array rather than an array of objects. My data source for the above example looks something like:

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

Upvotes: 1

Related Questions