Data Table get disappeared on click of the header sorting

ensista.kanifnath

Hello Team,

I added below table structure in my project

Project Name	Project Number	Project Stage	Created By	Date Created	Date Last Modified
Project Name	Project Number	Project Stage	Created By	Date Created	Date Last Modified

i am creating the tr dynamically and appending it to the tbody by javascript.Every thing is fine here i can see all data also there in the data table but the problem is when i try to click on the sort or to search from the search box everything in the tbody get disappeared and i see only <td valign="top" colspan="6" class="dataTables_empty">No data available in table</td> in the tbody.

i am not doing any postback here.can somebody please help to get this issue sort.

Thanks in advance

johnvndnbrk

i am not doing any postback here.can somebody please help to get this issue sort.

After you add these records using JavaScript are you adding the data using DataTables row.add function? Here is a link to how to do this; https://datatables.net/reference/api/rows.add(). The data that DataTables manages is not always the same as what the data the DOM is using, especially when making changes to your data.

John

ensista.kanifnath

Hello John Thanks for reply,

I am using the tbody.append(tr) method to append the tr to the table by javascript dynamically.

I am not using the rows.add here.
How to use the rows.add method to add the txtboxes in the tbody of the Datatable when i try to use that i am getting the javascript exception for that.And

But how do i append my tr dynamicaly which contains the 5 td and in each td contains a input textbox control there.
i think textbox is the problem here that i added by javascript.

please see below is the code that i am using in my project

var tblCostByWkPkg = document.getElementById("Resource");
var tr = document.createElement("tr");

            var tdFirstName = document.createElement("td");
            var tdLastName = document.createElement("td");
            var tdDepartment = document.createElement("td");
            var tdResourceType = document.createElement("td");
            var tdDailyRate = document.createElement("td");
            var tdAddDelete = document.createElement("td");

            var index = 0;


            //tdFirstName.innerHTML = "<input type=\"hidden\"  id=\"GridView1_HiddenField_" + i + "\" value=\"" + value.kProjectResource + "\" /> ";
            tdFirstName.innerHTML = "<input type=\"hidden\"  id=\"GridView1_HiddenField_" + i + "\" value=\"" + value.kProjectResource + "\" /> ";

            tdFirstName.innerHTML += "<input type=\"text\" id=\"GridView1_txtFirstName_" + i + "\" value=\"" + value.vcResourceFirstName + "\" class=\"cssFirstName form-control\" onblur=\"updateFirstName(this)\" name=\"row-1-age\" />";
            tdLastName.innerHTML = "<input type=\"text\" id=\"GridView1_txtLastName_" + i + "\" value=\"" + value.vcResourceLastName + "\" onblur=\"updateLastName(this)\" class=\"cssLastName form-control\" name=\"row-1-position\" />";
            tdDepartment.innerHTML = "<input type=\"text\" id=\"GridView1_dp_Department_" + i + "\" value=\"" + value.vcResourceDepartment + "\" onblur=\"updateResourceDepartment(this)\" class=\"cssDepartment form-control\" name=\"row-1-position\" />";
            var selectElem = "<select size=\"1\" id=\"GridView1_dp_Resourse_Type_" + i + "\" name=\"row-1-office\" class=\"form-control\">";
            selectElem += "<option>Internal (Business)</option>";
            selectElem += "<option>External (Tech)</option>";
            selectElem += "</select>";



            tdResourceType.innerHTML = selectElem;
            index = (parseInt(value.vcResourceType) - 1).toString();

            if (value.mnResourceRate != null)
                tdDailyRate.innerHTML = "<input name=\"GridView1$ctl02$txtDailyRate\" type=\"text\" value=" + value.mnResourceRate + " id=\"GridView1_txtDailyRate_" + i + "\" onblur=\"UpdateDailyRate(this)\" class=\"cssDailyRate form-control\">";
            else
                tdDailyRate.innerHTML = "<input name=\"GridView1$ctl02$txtDailyRate\" type=\"text\" value=\"\" id=\"GridView1_txtDailyRate_" + i + "\" onblur=\"UpdateDailyRate(this)\" class=\"cssDailyRate form-control\">";

            if (value.kProjectResource != -1) {
                tdAddDelete.innerHTML = "<i id=\"GridView1_btnedit_" + i + "\" onclick=\"return editResourceRow(this)\" class=\"fa fa-pencil fa-2\" aria-hidden=\"true\"></i>    <i id=\"GridView1_btnDelete_" + i + "\" class=\"fa fa-minus-circle fa-2\" onclick=\"return deleteRow(this);\" aria-hidden=\"true\"></i>";
            }
            else {
                tdAddDelete.innerHTML = "<i id=\"GridView1_btnDelete_" + i + "\" class=\"fa fa-plus-circle fa-2\" onclick=\"javascript:addData(this)\" aria-hidden=\"true\"></i>";
            }
            tr.setAttribute("role", "row");        



            if (j == 0) {

                tr.className = "odd";
                                  j = 1;
            } else {
                tr.className = "even";                  
                j = 0;
            }
            tr.appendChild(tdFirstName);
            tr.appendChild(tdLastName);
            tr.appendChild(tdDepartment);
            tr.appendChild(tdResourceType);
            tr.appendChild(tdDailyRate);
            tr.appendChild(tdAddDelete);

            $("#Resource tbody").append(tr);

allan

We'd really need a link to a test case showing the issue here. It sounds like you are trying to manipulate the table's HTML yourself rather than using the API, but really we'd need a test page showing it to understand what is happening.

Allan