Hi ruben00000,
Refer below sample.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployeeList()
{
NorthwindEntities entities = new NorthwindEntities();
var data = entities.Employees.Select(x => new EmployeeDetail()
{
EmployeeId = x.EmployeeID,
FirstName = x.FirstName,
LastName = x.LastName
}).AsQueryable();
int totalRecord = 0;
int filterRecord = 0;
var draw = 10;
int pageSize = 10;
int skip = 0;
totalRecord = data.Count();
filterRecord = data.Count();
var empList = data.OrderBy(x => x.EmployeeId).Skip(skip).Take(pageSize).ToList();
var returnObj = new
{
draw = draw,
recordsTotal = totalRecord,
recordsFiltered = filterRecord,
data = empList
};
return Json(returnObj, JsonRequestBehavior.AllowGet);
}
public class EmployeeDetail
{
public int EmployeeId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="//github.com/downloads/lafeber/world-flags-sprite/flags32.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.5.0/css/select.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.2/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" />
<script src="//cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/datetime-moment.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"></script>
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table id="employeesTable" class="display nowrap">
<thead>
<tr>
<th></th>
<th hidden>Employee Id</th>
<th>First Name</th>
<th>Last Name</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
<input type="button" id="selectAll" value="SelectAll" />
<script type="text/javascript">
$(document).ready(function () {
var oTable = $("#employeesTable").DataTable({
"dom": 'lBfrtip',
"processing": true,
"serverSide": true,
"filter": false,
"ajax": {
"url": "/Home/GetEmployeeList",
"type": "POST",
"datatype": "json"
},
"columns": [
{
targets: 0,
data: null,
className: 'text-center',
searchable: false,
orderable: false,
render: function (data, type, full, meta) {
return '<input type="checkbox" class="select-checkbox" name="check" value="' + data.EmployeeId + '">';
},
width: "5%"
},
{ data: "EmployeeId", name: "EmployeeId", width: "60px", className: "dt-center", visible: false },
{ data: "FirstName", name: "FirstName", width: "80px", autoWidth: true, className: "dt-center" },
{ data: "LastName", name: "LastName", width: "80px", autoWidth: true, className: "dt-center" },
{
data: "EmployeeId",
orderable: false,
width: "60px",
render: function (data) {
return '<a class="popupEdit" href="/Employees/_EditForm/' + data + '"><i class="fa fa-pencil"/></a>';
}
}
]
});
$('#selectAll').on('click', function (e) {
var selectedIds = [];
e.preventDefault();
$('.select-checkbox').each(function () {
if ($(this).prop("checked")) {
data = oTable.row($(this).parents('tr')).data();
selectedIds.push(data.EmployeeId);
}
});
alert(JSON.stringify(selectedIds));
});
$('.container').on('click', 'a.popupEdit', 'tr', function (e) {
e.preventDefault();
data = oTable.row($(this).parents('tr')).data();
var id = data.EmployeeId;
alert(id);
});
});
</script>
</body>
</html>
Screenshot
