DataTable bootstrap 3 user select row issue

DataTable bootstrap 3 user select row issue

DavidgallivanDavidgallivan Posts: 1Questions: 0Answers: 0
edited March 2014 in DataTables 1.9
I have a ASP.Net MVC page with datatable. Everything is working great until I change the table data. I have an edit button that submits changes via ajax. I return the results via a partial view, the defined table is in the partial view. The data comes back and the changes are shown. The events get hooked back up because I can see when I click on the row, the row_selected CSS class is getting assigned. The problems comes in when the css style does not get applied. I can see in the debugger that the class was applied, but as I click on the other rows, it gets the row selected class as well. normally it only adds the class to the selected row and removes it from the other ones. In addition, the bootstrap classes, odd and even are now missing from the table.

If I manually add the odd and even classes, the highlight starts to show but then any row you click becomes highlighted because it is not removing the row_selected class.

any suggestions would be helpful. maybe there is a better way of updated the data in the table besides a partial view.

thanks
David

ajax call
[code]
function postEntityWithTableUpdate(postData, apiURL)
{
var result = '';
$.ajax(
{
type: "POST",
url: apiURL,
data: postData,
async: false,
success: function (data) {
if (data.msg == "ServerError") {
toastr.error("Record was not able to be modified, see your system administrator");
}
else {
$("#mainContent").html(data);
setTableEvents();
}
}
});
return result;
}

function to set selected row

function setTableEvents()
{
$("#dataGrid tbody").click(function (event) {
$(oTable.fnSettings().aoData).each(function () {
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
populateSelectedRecord(event.target.parentNode);
});
}
[/code]

Replies

  • allanallan Posts: 63,489Questions: 1Answers: 10,469 Site admin
    > oTable.fnSettings().aoData

    Bad! You should try to avoid using anything in fnSettings as much as possible! Use the public fnGetNodes() API method for what you have above. Or even better the `$` method - `oTable.$('tr').removeClass( 'row_selected' );` . The reason to avoid using fnSettings is that its properties are considered to be private. They can, will and do change between versions.

    I suspect that isn't the issue though... But I think I'd need to be able to see the page to be able to determine exactly what is going wrong.

    Allan
This discussion has been closed.