DataTable is not firing.
DataTable is not firing.
strum
Posts: 1Questions: 1Answers: 0
I am developing MVC Web program using Jquery DataTables.
If the user click the cancel button then the javascript redirects to the index page but the action method of DataTables of Main Page shoudld not called.
The method in the controller (GetApplicationUser) should be called but it doesn't seem to be called.
~~~
/**********************************************************************************
1 : click the cancel button
***********************************************************************************/
$('#btnCancel').click(function () {
window.location.href = '/ApplicationUser/Index?&SearchText=' + sSearchText +
'&page=' + sCurPage +
'&RowId=' + sCurRow;
});
/**********************************************************************************
2 : DataTable in Main Page
***********************************************************************************/
$('#tbl_User').DataTable({
"processing": true,
"serverSide": false,
"stateSave": true,
"select": true,
'stateSaveParams': function (settings, data) {
data.selected = this.api().rows({ selected: true })[0];
},
'stateLoadParams': function (settings, data) {
savedSelected = data.selected;
},
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": true,
"bInfo": true,
"autoWidth": false,
//"scrollY": "600px",
//"pagingType": "full_numbers",
"pagingType": "full_numbers",
"filter": true,
"searching": true,
"columns": [
{ "data": "Id", "type":"readonly" },
{ "data": "Name"},
{ "data": "Email"},
{ "data": "FirstName"},
{ "data": "LastName" },
{ "data": "SysUserName" }
],
"lengthMenu": [
[10, 25, 50, 100, -1],
['10 rows', '25 rows', '50 rows', '100 rows', 'Show all']
],
"buttons": [
{
"extend": 'pageLength'
},
{
"extend": 'searchPanes'
},
{
"text": 'Add New',
"class": "buttonToHide",
"action": function (e, dt, node, config) {
sCreateEditMode = 'C';
openCreate();
}
},
{
"text": 'View/Edit',
"class": "buttonToHide",
"action": function (e, dt, node, config) {
sCreateEditMode = 'E';
getSelectedKey();
openCreate();
}
},
/*
{
"text": 'Clone',
"class": "buttonToHide",
"action": function (e, dt, node, config) {
getSelectedKey();
//cloneAddress();
}
},
*/
{
"text": 'Delete',
"class": "buttonToHide",
"action": function (e, dt, node, config) {
getSelectedKey();
BootstrapDialog.confirm({
title: 'WARNING',
message: 'Do You Want To Delete <b>' + sUserName + '</b>',
type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
closable: true, // <-- Default value is false
draggable: true, // <-- Default value is false
btnCancelLabel: 'Cancel', // <-- Default value is 'Cancel',
btnOKLabel: 'Ok', // <-- Default value is 'OK',
btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,
callback: function (result) {
if (!result) {
return;
}
else {
deleteUser(sUserId);
}
}
});
}
}
],
"dom": 'Bfrtip',
"ajax": {
"url": "/ApplicationUser/GetApplicationUser",
"type": "POST",
"datatype": "json"
},
"columnDefs": [
{
"width": "5px",
"type":"readonly",
"targets": 0
},
{
"searchPanes": {
"show": true
},
"width": "10px",
"targets": 1
},
{
"searchPanes": {
"show": true
},
"width": "10px",
"targets": 2
},
{
"searchPanes": {
"show": true
},
"width": "10px",
"targets": 3
},
{
"searchPanes": {
"show": true
},
"width": "10px",
"targets": 4
},
{
"searchPanes": {
"show": true
},
"width": "10px",
"targets": 5
}
],
//"fixedColumns": true,
initComplete: function () {
this.api().rows(savedSelected).select();
this.api().state.save();
}
});
/********************************************************************************
3 Action Method of the controller
********************************************************************************/
[HttpPost]
public IActionResult GetApplicationUser()
{
try
{
//if Select All Data
List<UserListViewModel> users = new List<UserListViewModel>();
users = userManager.Users.Select(r => new UserListViewModel
{
Id = r.Id,
Name = r.UserName,
Email = r.Email,
FirstName = r.FirstName ?? "",
LastName = r.LastName ?? "",
SysUserName = r.SysUserName
}).ToList();
recordsTotal = users.Count();
return Json(new { recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = users });
//return Ok(jsonData);
}
catch (Exception)
{
throw;
}
}
}
}
Answers
DataTables only initialises when you run that code, so it's going to have something to do with the flow of your application.
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin