How to create new row with data from ajax call & add custom data-attributes to elements in row?

logan3043

I need to create a new row with this structure:

<tr id="" class="text-muted odd row-scaffold-datatable" role="row">
    <td id="" class="font-weight-bold sorting-slot">

    </td>
    <td>
        <div class="btn-group pull-right">
            <a href="#"
               id=""
               class="btn btn-sm btn-outline-secondary text-right edit-button"
               data-toggle="modal"
               data-target=""
               data-name=""
               data-id=""
               >Edit
            </a>
            <a
                href="javascript:void(0);"
                id="delete-role"
                class="btn btn-sm btn-outline-danger rounded-right text-right delete-button"
                data-id=""
                data-type="1"
                role="button"
                >
                <i class="fa fa-trash fa-lg"></i>
            </a>
        </div>
    </td>
</tr>

And make it searchable/sortable, but i'm not sure how to do that with row().add and row().data - it's not possible for me to provide a working example in jsfiddle or codepen of my code.

This is how I deleted the row

success: function (response) {
                if (response.ajax_success) {
                    // $('#role-table-row' + id).remove();
                    var table = $('#roles_table').DataTable();

                        table
                            .row($('#role-table-row'+id) )
                            .remove()
                            .draw();

                    $("#ajax-success").html('<div class="alert alert-success">Successfully deleted record.</div>');
                    window.setTimeout(function () {
                        $(".alert").fadeTo(500, 0).slideUp(500, function () {
                            $(this).remove();
                        });
                    }, 3000);
                }
            },

But i'm still unsure of how to add the new row with html.

logan3043

I get error

DataTables warning: table id=roles_table - Requested unknown parameter '0' for row 1, column 0. For more information about this error, please see http://datatables.net/tn/4

when trying to

var table = $('#roles_table').DataTable();
table.row.add({
name: "new row"
}).draw();

kthorngren

Requested unknown parameter '0' for row 1, column 0.

Suggests you are using array based data not object based data, as described here:
https://datatables.net/manual/data/#Data-source-types

Meaning that you are not using columns.data. You will need to add your data as an array, like this:

table.row.add([
  "new row"
]).draw();

That is not enough though because you have two columns. Either you need to add two columns or use columns.defaultContent or columns.render to fill in the second column. Here is an example using defaultContent:
http://live.datatables.net/vaziyoqe/2/edit

If you continue to have troubles please update my example to show the issue.

Kevin

logan3043

okay, i wrote a comment (twice)... then edited it.. and it deleted it... Do you have discord? I imagine it's deleting it because I use PHP to populate my datatable.

logan3043

kthorngren

I imagine it's deleting it because I use PHP to populate my datatable.

Not sure. I've seen others post PHP code. The GIF shows the problem but without seeing what you are doing its hard to debug. The purpose of the test case is to demonstrate the problem not replicate your environment. Ideally you can break the code down to necessary code to show the issue.

How are you adding the row in the GIF?

What is your Datatables initialization code?

Sorry, I don't use Discord.

Kevin

logan3043

Lol maybe it's deleting because my post is too long. Would be nice to have validation on that instead of just clicking post comment to have everything you type deleted repeatedly.

logan3043

Here's success function that called $.newRow to make the new row.

success: function (response) {
            if (response.name) {
                $('#create-role-name').addClass('is-invalid');
            } else {
                $('#create-role-name').removeClass('is-invalid');
            }
            if (response.ajax_success) {
                $("#ajax-success").html('<div class="alert alert-success">Successfully updated record.</div>');
                window.setTimeout(function () {
                    $(".alert").fadeTo(500, 0).slideUp(500, function () {
                        $(this).remove();
                    });
                }, 5000);

                $('#create-role-modal').modal('hide')
                $('.create-perm-row').removeClass('collapse');

                let newID = response.role.id;
                let newName = response.role.name;
                // let tdClass = 'sorting' + newID;
                // let tdID = 'role-td' + newID;
                // let newRowID = 'role-table-row'+newID;
                // let newTDID = 'role-td'+newID;


                $.newRow({
                    appendEl: $('#roles_tbody'),
                    itemID: newID,
                    newRowID: 'role-table-row'+newID,
                    newTDID: 'role-td'+newID,
                    name: newName,
                });

            }
        },

logan30433

yeah it does NOT let me post this code... not in a new post, not by editing an old post... if i copy my code that creates the HTML for the new row and then appends it... it just deleted the post. Even if i copy it into an already existing comment by using the edit button... deletes THAT comment too lmfao

logan30433

lets me post it as an image though. Lol, gotta get discord -.-

logan30433

Here's how i'm creating the table on the page...

And here is how i'm initializing the datatable:

$('#roles_table').DataTable({
        pageLength: 100,
        scrollY: 400
    });

I'd love to copy that code for you above and post here with markdown, but... it deletes the post if i do.

logan30433

i'm probably just gonna switch to mdbootstrap for all my table needs.

kthorngren

Not sure why you aren't able to post that code. There may be something with the way the forum works but the forum owners certainly haven't banned you from posting anything. I'm sure once the developers check the forum and see your messages they will respond.

The problem is the same as I mentioned in your other thread. You either need to use Datatables APIs or one of the invalidate() APIs like rows().invalidate().

Your newRow function is appending the row to the HTML which Datatables doesn't know about. Using rows().invalidate() would have Datatables refresh is cache. However using row.add() is more efficient and the preferred method.

Kevin

kthorngren

I built an example to show you each option:
http://live.datatables.net/dibicehe/2/edit

Note in the Add via API option table.row.add( $(newRowHtml) ).draw(); is being used. The HTML row is a jQuery object $(newRowHtml).

Interestingly table.rows().invalidate('dom').draw(); doesn't work with the new row. So, I added another button to change a row via jQuery then use rows().invalidate(). This works.

@allan or @colin can confirm if it is expected that rows().invalidate('dom') will find new rows.

In any case my suggestion is to use row.add().

Kevin

logan30433

I tried

var table = $('#roles_table').DataTable();

                table.rows().invalidate('dom').draw();

when you first mentioned it, but then it completely stops my new row from being created in the dom.

same with

var table = $('#roles_table').DataTable();
        table.row.add( $(newRowHtml) ).draw();

It doesn't even create the new row in the dom if i use those, but it does create them in the DB of course since i'm calling them in success fuction.. at the end.

logan30433

oh my god... Kevin! Thank you! Sorry i had a mistake in

table.row.add( $(newRowHtml) ).draw();

forgot JS is majorly case sensitive. Thank you for all your help and for taking the time to draw up those examples. You're the best!

logan30433

also, they did ban me for asking for help.. Notice this account has an extra 3 than the one i used in the beginning...

logan30433

kthorngren

also, they did ban me for asking for help.

They have never banned anyone from posting - except spammers. There are forum configurations to help stop the spam posts which I suspect might have affected your posts. The developers haven't been on the forum much this weekend so they haven't seen your other posts regarding deleted posts. You really should give them a chance to look at why your posts are missing instead of jumping to conclusions. I think you will find this is the most open forum and the developers are the some of the best at helping everyone.

Kevin

logan30433

Hmm, so it was an automated system that banned me then huh? Yeah, that wasn't my first guess lol, never had an automated system suspect me of something before. =/

kthorngren

Yep, a couple years ago the forum would be filled with spam messages so Allan turned up the filters. Once an awhile it affects legitimate posts.

Kevin

colin

I don't know why the post banned you, @allan would be better placed to comment on that. I deleted your other thread for you!

Colin

colin

Kevin asked:

@allan or @colin can confirm if it is expected that rows().invalidate('dom') will find new rows.

The header for rows().invalidate() says:

Invalidate the data held in DataTables for the selected rows

As the the new row isn't in the internal dataset at that point, rows() won't select it, so it won't be picked up. As Kevin suggested, use rows.add or row.add()

Cheers,

Colin

allan

so it was an automated system that banned me then huh? Yeah, that wasn't my first guess lol, never had an automated system suspect me of something before. =/

Yup - we use Akismet for spam filtering and unfortunately sometimes it picks up posts with large chunks of code as spam. I've got it setup to with a three strikes and you are out rule as well. Its not ideal, but its the best we've come up with so far (and there is a bonkers amount of spam we get...!).

For the rest of your question - what Kevin and Colin say is spot on .

Allan