Datatable not working on clicking the button second time.

ushaduddu

I am trying to use datatable to perform pagination and filtering. The workflow is as follows-
1. I get the data from ajax call from webservice.
2. I construct regular html table using DOM components.
3. I use the above constructed html table to construct datatable
4. When I click a button, datatable should get rendered.

The problem is pagination and filter functionalities are working first time I click the button. Second time if I click the same button datatable is not working(I mean pagination and filtering). I am new to datatable please help me.****

Below is the code-
## ** Ajax code that calls buildValidationTable**

                                        $("#getDetailsallhierarchy").click(
                            function() {
                                    $.ajax({
                                    url : batGroupsURI,
                                                                          success : function(data) {
                                    $("#validationallhierarchyDiv #loadingDiv")
                                            .hide();
                                        console.log("before building");
                                        **buildValidationTable(
                                                "validationallhierarchyTable",mismatch,data);**
                                            },
                                                                                       error : function(xhr, status, error) {
                                        $("#validationallhierarchyDiv #loadingDiv")
                                                .hide();
                                        alert(xhr.responseText); 
                                                                            }   }); });



                                       ##       **  //Function that constructs DOM table and calls datatable**

                    function buildValidationTable(tablename,mismatch,data){
                                               var table = document.getElementById("validationallhierarchyTable");
                        var header = table.createTHead();
                        var row = header.insertRow(0);
                        var cell = row.insertCell(0);
                        var cell1 = row.insertCell(1);

                        cell.innerHTML = "<b>Email Groups</b>";
                        cell1.innerHTML = "<b>Hierarchy Validation</b>";


                        var tableBody = document.createElement('TBODY');
                        table.appendChild(tableBody);

                        var numItems = data.length;    

                        for (var i = 0; i < numItems; ++i){
                            if (mismatch === true
                                    && (data[i].hierarchyValidation == "Hierarchy matches!" || data[i].hierarchyValidation == "Not an Exchange Group"))
                                continue;
                        var tr = document.createElement('TR');
                        row.setAttribute("class", "rowClass");
                        tableBody.appendChild(tr);

                          var td1 = document.createElement('TD');
                          var td2 = document.createElement('TD');
                             var anchorElement = document.createElement("a");
                            var attrHref = document.createAttribute("href");
                            var attrId = document.createAttribute("id");
                            var attrName = document
                                    .createAttribute("data-name");
                            var attrClass = document
                                    .createAttribute("class");
                          td1.innerHTML = data[i].displayName;
                            tr.appendChild(td1);
                            anchorElement.innerHTML = data[i].hierarchyValidation;;
                            td2.appendChild(anchorElement);
                            tr.appendChild(td2);
                            attrHref.value = batGroupURI + '?' + "groupName="
                            + data[i].displayName;
                            attrId.value = "validateGroup";
                            attrName.value = data[i].displayName;
                            attrClass.value = "batGroup";
                            anchorElement.setAttributeNode(attrHref);
                            anchorElement.setAttributeNode(attrId);
                            anchorElement.setAttributeNode(attrName);
                            anchorElement.setAttributeNode(attrClass);

                        }
                        **$("#validationallhierarchyTable").dataTable({ 
                                "stateSave" : true,
                                "stateDuration" : -1}); **
                        $("#validationallhierarchyTableDiv").show();

                        });
                        }

jLinux

Throw it in a live.datatables.net instance so I can troubleshoot it for ya.

But if its this part:

 $("#getDetailsallhierarchy").click(
     function() {
         $.ajax({
             url: batGroupsURI,
             success: function(data) {
                 $("#validationallhierarchyDiv #loadingDiv")
                     .hide();
                 console.log("before building"); **
                 buildValidationTable(
                     "validationallhierarchyTable", mismatch, data); **
             },
             error: function(xhr, status, error) {
                 $("#validationallhierarchyDiv #loadingDiv")
                     .hide();
                 alert(xhr.responseText);
             }
         });
     });

Then, first, try changing it to this:

$('body').on('click', '#getDetailsallhierarchy', 
    function() {
         $.ajax({
             url: batGroupsURI,
             success: function(data) {
                 $("#validationallhierarchyDiv #loadingDiv")
                     .hide();
                 console.log("before building"); **
                 buildValidationTable(
                     "validationallhierarchyTable", mismatch, data); **
             },
             error: function(xhr, status, error) {
                 $("#validationallhierarchyDiv #loadingDiv")
                     .hide();
                 alert(xhr.responseText);
             }
         });
     });

See if that works