Callback createdRow dataIndex

jLinux

I had a question about the createdRow callbacks dataIndex parameter.

Heres the DT code thus far first:

var $fields_dt = $fields_table.DataTable({
    rowReorder: {
        snapX: 10,
        selector: '.row-grip'
    },
    bPaginate: false,
    bFilter: false,
    bSort: true,
    columnDefs: [
        { targets: 0, visible: false },
        { targets: '_all', orderable: false }
    ],
    fnCreatedRow: function( nRow, aData, iDisplayIndex ) {

        // Row id attr
        $( nRow ).attr( 'data-row-id', iDisplayIndex);

    }
});

So as you can see, when the row is created, I add a data-row-id attribute with the iDisplayIndex value, which is the row index.

Plenty of items in the row will use that as a reference point, for example, to add a select value in the row, it will grab the value of $(this).closest( 'tr' ).data('row-id') and pass it to the modal, then the modal will grab that value, and add it to the select thats found in the $('#data-table').find('tbody').find("tr[data-row-id='" + row_id + "']") row.

This has worked fine, until I realized that the iDisplayIndex value is actually the exact row number that its in, meaning if I add 3 rows, the ID's will be:

• 1
• 2
• 3

Then if I delete the 2nd row, and click add again, the ID's will be:

• 1
• 3
• 3

This is, I'm assuming, because the CreatedRow callback will see its going to be added as the third row to the table, as opposed to the 4th.

I tried to just use $('#data-table').find('tbody').find('tr:last').data('row-id')++ for the data-row-id value, but the problem with that, is when you first get to the page, the initial first row is hardcoded into the HTML, with data-row-id="0", and for some reason, that really throws DataTables off, it seems to try to re-initialize the first row and reset the data-row-id="1", but then for some reason it starts the count over again at 1, so the second row is data-row-id="1", the third row is data-row-id="1"... and its just driving me crazy.

So basically, when the age is loaded, the table is loaded with one row, with a hardcoded data-row-id="0", what I need, is for when DataTables is initialized, for that to stay as data-row-id="0", then every row after that to increment the row id +1, and when a row is deleted, to keep that number going, instead of going back to what the row number is.

Thanks!

P.S. Think this is the first time ive used the markdown, definitely useful! lol

glenderson

I would suggest passing the row ID by the actual DOM or JSON call instead by the createdRow method.

<tr id="1"> td data </tr>
<tr id="2"> td data </tr>
<tr id="3"> td data </tr>
<tr id="4"> td data </tr>

or if in Json

{ data: [
{ "DT_RowId": "1", rowdata ....}
{ "DT_RowId": "2", rowdata ....}
{ "DT_RowId": "3", rowdata ....}
{ "DT_RowId": "4", rowdata ....}
]
}

jLinux

Oh, I probably should have posted an update. I kinda stumbled onto the solution, which at first didnt seem like it should work, but it seems to be working fine thus far.. Heres the code

var $fields_table = $('#data-table');

var $fields_dt = $fields_table.DataTable( {
    fnCreatedRow: function ( nRow, aData, iDisplayIndex ) {
        $( nRow ).attr( 'data-row-id', iDisplayIndex );
    }
});


// Add row function
function add_row() {
    var counter = $fields_table.find('tbody' ).find('tr:last' ).data('row-id')+1;

    // Add an HTML table to the confirmation tab with the field details
    $( "#partition-confirm-accordion").append(Mustache.render(html.partition_confirm, {counter: counter}));

    // Add row to fields table while parsing
    $fields_dt.row.add( [
        // Hidden Sequence Col
        Mustache.render( parse_mustache( $src[0].cells[0].innerHTML  ), {
            counter: counter
        }),
        // Handle & Hidden Order Input
        Mustache.render( parse_mustache( $src[0].cells[1].innerHTML  ), {
            counter: counter
        }),
        // Delete
        Mustache.render( parse_mustache( $src[0].cells[2].innerHTML  ), {
            counter: counter
        }),
        // Visibility
        Mustache.render( parse_mustache( $src[0].cells[3].innerHTML  ), {
            counter: counter,
            visible: true
        }),
        // Key
        Mustache.render( parse_mustache( $src[0].cells[4].innerHTML  ), {
            counter: counter
        }),
        // Name
        Mustache.render( parse_mustache( $src[0].cells[5].innerHTML  ), {
            counter: counter
        }),
        // Description
        Mustache.render( parse_mustache( $src[0].cells[6].innerHTML  ), {
            counter: counter
        }),
        // Placeholder
        Mustache.render( parse_mustache( $src[0].cells[7].innerHTML  ), {
            counter: counter
        }),
        // Required
        Mustache.render( parse_mustache( $src[0].cells[8].innerHTML  ), {
            counter: counter
        }),
        // Unique
        Mustache.render( parse_mustache( $src[0].cells[9].innerHTML  ), {
            counter: counter
        }),
        // Regex
        Mustache.render( parse_mustache( $src[0].cells[10].innerHTML  ), {
            counter: counter
        }),
        // Min
        Mustache.render( parse_mustache( $src[0].cells[11].innerHTML  ), {
            counter: counter
        }),
        // Max
        Mustache.render( parse_mustache( $src[0].cells[12].innerHTML ), {
            counter: counter}),
        // Type
        Mustache.render( parse_mustache( $src[0].cells[13].innerHTML ), {
            counter:    counter,
            fields:     fields
        }),
        // Value
        Mustache.render( parse_mustache( $src[0].cells[14].innerHTML ), {
            counter:     counter,
            type_string: true,
            fields:      fields,
            allow_one:   true
        })
    ]).draw();
}

So, like I said, that seems to work, but if you see any holes in it, let me know.

And FYI, I use Mustache because some it works in JS and PHP, and if you are editing a "thing", then the rows will already exist, if its new, then you will add rows via JS, and this way, I can edit the row in one source, and it will reflect in both. If anyone knows of a better way, or a better template engine that works in JS or PHP (preferably with at least some basic logic), let me know.