How to add delete rows without an ajax request.

How to add delete rows without an ajax request.

jason.sweetjason.sweet Posts: 4Questions: 1Answers: 0

I have a datatable with ajax. When I add a row with https://datatables.net/reference/api/row.add() it makes an ajax call that queries the database again, and I never see the row that I added. Is there a way to bypass the ajax call?

I found a question asking the same thing - https://datatables.net/forums/discussion/29417/how-to-manually-add-delete-row-without-ajax-request. The answer says that row.add doesn't cause the ajax call. Maybe that answer is out of date though.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    row.add() does not cause an ajax request. Likely you added draw() and have server side processing enabled. The draw() with server side processing would send an ajax request to fetch the current data. Or you could have some event occurring that is sending the ajax request.

    Please post your Datatables code so e can see what you are doing.

    Kevin

  • jason.sweetjason.sweet Posts: 4Questions: 1Answers: 0

    Sorry. I do have a call to draw(). My understanding is that the new row will not be seen until draw is called.

            var table = $('#table').DataTable();
            table.settings().ajax
            table.row.add({'field1': 'x', 'field2': 'x', 'field3': 'x'}).draw();
    

    What I would like to accomplish is to add some rows to the table. And then make the ajax call when the user presses a Save button. So I guess i need to prevent the ajax call for that draw.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

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

    Is this your Datatables init code? If not please post the init code.

    Just trying to get a full picture of what you have to offer suggestions.

    Kevin

  • jason.sweetjason.sweet Posts: 4Questions: 1Answers: 0

    OK, Took some digging, but I found it. We build this dynamically in server side code.

    var tableOptions = $.extend({}, {
                    processing: true,
        serverSide: true,
        searching: true,
        paging: true,
        ajax: {
            type: "POST",
            url: $table.data("url") || window.location.href,
            error: function (xhr) {
                if (xhr.status === 401) {
                    window.location.assign(window.location.href);
                }
                else if (xhr.status !== 0){
                    alert("Ajax request failed.");
                }
            },
        },
                    lengthMenu: [25,50,100,250,500],
        columnDefs: [
            {className: "cellEditable", "targets": "column-editable"},
            {className: "centerText", "targets": "align-center"},
            {className: "rightText", "targets": "align-right"},
            {sortable: false, "targets": "no-sort"},
            {searchable: false, "targets": "no-search"},
            {visible: false, "targets": "no-show"}
        ],
                    columns: [{"data":"tier","name":"tier","visible":true,"defaultContent":null},{"data":"allow_payroll","name":"allow_payroll","visible":true,"defaultContent":null},{"data":"maxamount","name":"maxamount","visible":true,"defaultContent":null},{"data":"edit","name":"edit","visible":true,"defaultContent":null},{"data":"delete","name":"delete","visible":true,"defaultContent":null}],
                    order: [],
        language: {
            search: "",
            lengthMenu: "_MENU_"
        },
        stateSave: true,
                    dom: "<'row table-top'<'col-sm-3 first leftText'f><'col-sm-6 centerText'p><'col-sm-3 last rightText'l>>r<'overflow-table't><'row table-bottom'<'col-sm-3 first leftText'i><'col-sm-6 centerText'p><'col-sm-3 last rightText go-to-page'>>"
    }, {"paging":false});
    
    $table.trigger('settings.dt', [tableOptions]);
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    Yep, you are doing server side processing. So each draw() will send an ajax request to the server.

    What I would like to accomplish is to add some rows to the table. And then make the ajax call when the user presses a Save button.

    row.add() is essentially a client side API. Once you use '-api draw()` the client side is updated with the new page from the server side processing request. The row added is no longer in the client and unless you submitted it to the server it will be gone.

    One option may be to use a client side Datatable that holds temporary data that is visible to the user. Once the user has added all the rows and verifies the temp table they can submit the rows from the temp table.

    Another would be to have the server calculate the page that the new data is on and return with the page number which you can use the page() API to request the page to see the newly added row. It would require sending extra parameters via the ajax data parameter to provide page length info to the server.

    Just a couple options off the top of my head. Not really sure what your process is or what you really need to accomplish.

    Kevin

  • jason.sweetjason.sweet Posts: 4Questions: 1Answers: 0

    OK. That is good information. We have an internal API that wraps the datatables stuff. It seems like the best approach is to have the server-side code has to keep track of the new "unsaved" data. I just need to work out how to make that happen. You have been very helpful. Thank you very much.

This discussion has been closed.