Tabbed DataTables Not Working In Tabs, Showing One Under Another

zgoforth

Link to test case: https://jsfiddle.net/BeerusDev/5nLg4bt0/182/

Above is my test case, I have used tabbed DataTables before so I am not sure why they are sitting on top of each other.

Another question I had, is when I move the row from one table to another, how can I get it to save/stay there? After I do that, it refreshes and goes back to the main table. Would I save the row, move it, then after click as well, perform a DELETE REST operation? If so, I am confused how to know what list item to delete just based off selecting the row?

kthorngren

Your code for the tabs is not correct. I removed all the Javascript and you can see the HTML tables aren't in tabs. You will need to fix this first.
https://jsfiddle.net/v5Lxaw3z/

Here is an example of Datatables in Bootstrap tabs.

When you move the row you can use ajax to send the delete rest request to the server. You have the row information at that point since you are adding it to the other table.

Kevin

zgoforth

Thank you for your response, I was able to fix the HTML as well as insert my JS back in. The one issue now that I am having is the collapsible/expandable rows.

Instead of using the same variables for both tables (I figured that would probably not work). I created new variables with 1 after them,

var collapsedGroups1 = {};
var top1 = '';
var parent1 = '';

Before doing this, when I move a row to the new table it is automatically open/expanded. Now when I changed the null variables by adding 1, the row is collapsed but I cannot expand them and I receive no error in console.

Here is my newly updated test case: https://jsfiddle.net/BeerusDev/m1qsvzey/34/

kthorngren

What debugging have you done? What did you find?

Kevin

zgoforth

I tried putting debugger statements in my rowGroup.startRender for the completedTaskTable, as well as wrapping the following in a try{...} catch(err){alert(err.message);} block, and none of the following gave me any errors nor did it pause on exceptions in my console. I switch backed to using all the same variables as it is a different table and I don't expect it will effect it, but still cannot figure out why.

https://jsfiddle.net/BeerusDev/m1qsvzey/51/

kthorngren

One problem is you are drawing the wrong table in this event:

$('#completedTaskTable tbody').on('click', 'tr.dtrg-start', function() {
        var name = $(this).data('name');
        collapsedGroups1[name] = !collapsedGroups1[name];
        table.draw(false);
    });

Kevin

zgoforth

I figured that out, thought I commented not sure where it went?

I have everything working now except my post request, which I am going to create a new function for and call it in the following event after the new table is drawn:

Lets say for example that the function where I am going to perform the rest DELETE operation is called function deleteData().

    $('#button').click(function() {
        var data = table.row('.selected').data();
        table.row('.selected').remove().draw(false);

        completedTaskTable
            .row.add(data)
            .draw();
        deleteData();
    });

Before I can even get to that function, I need to figure out one thing:

As soon as the completedTaskTable reaches the .draw(). The SharePoint page immediately refreshes and the table row returns to the original table. If I execute the delete before I finish the draw, will the new table stay updated?

zgoforth

UPDATE

I was able to get the DELETE operation to work perfectly so it removes the data row from the task Table, but it is supposed to write the row to the new completedTaskTable which it does not. The page automatically reloads after execution, and the item is deleted from the original table, but the new completedTaskTable is also empty?

Here is my effective code (let me know if I need to provide more):

$('#taskTable tbody').on('click', 'tr', function() {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        } else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });

    $('#button').click(function() {
        var selRowData = table.row('.selected').data();
        table.row('.selected').remove().draw(false);
        console.log(selRowData.ID);
        var listItemID = selRowData.ID;
        completedTaskTable
            .row.add(selRowData)
            .draw();
            deleteCertTask(listItemID);
    });

    function deleteCertTask(listItemID){
    var url2 = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TestDynamicTaskList')/items("+listItemID+")";
    $.ajax({
        url: url2,
        method: "DELETE",
        contentType: "application/json; odata=verbose",
        headers: {
            "Accept": "application/json; odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "IF-MATCH": "*",
            "X-HTTP-Mthod": "DELETE",
        },
        success: function(data){
            alert("Item has been successfully deleted!");
        },
        error: function(error) {
            alert("Status: " + textStatus);
            alert("Error :" + errorThrown);
        }
    });
    }

kthorngren

If you comment out line 18 is the row added to the completedTaskTable table?

Kevin

zgoforth

@kthorngren Yes. But after like 2-3 seconds the page reloads and it returns to the original table. In my JSFiddle. It stays and doesn't reload. Do I need to use something like stateSave?

kthorngren

Why is the page reloading? That is not something Datatables does.

The stateSave option doesn't save the table data. You could do so through the use of stateSaveParams and stateLoadParams. Or you can persist the data with your own function to save the data in local storage. Or use ajax to save and load the table data.

Or determine why the page is reloading and stop it from doing so.

Kevin

zgoforth

Thank you Kevin, I will check those options out. I found an article on technet,

unfortunately that's the way Web Part Connections work: they do a postback. You can definitely do things with AJAX that will prevent the postback from occurring. You'll need to use the Lists Web Service (GetListItems) to pull the items from the list. Take a look at my jQuery library below for a leg up.

The first word of that quote wraps my thoughts up perfectly "unfortunate". Before I checkout those options, what do you think about calling the deleteCertTask, but creating variables for each column, posting to a new list, then calling another GET to post to the new table? Seems like a lot...