Get value of Hidden jQuery DataTable Column on Anchor Link Click in ASP.Net MVC

ruben00000
 
on Nov 18, 2022 09:53 PM
Sample_109344.zip
376 Views

I have a simple DataTable that contains 3 columns with hidden data id

I just want to test how that id and put on to alert get using jQuery

By get class name on render table as Edit button

<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>
                </tr>
            </thead>
        </table>
    </div>
</div>

 

$(document).ready(function () {
    var oTable = $('#employeesTable').DataTable({
        dom: "lBfrtip",
        ajax:{
            url: "Employees/GetEmployeeList",
            type: "POST",
            processing: true,
            filter: true,
            columns:[
                { data: "employeeId", name: "EmployeeId", width: "60px", className: "dt-center", visible: false },
                { data: "employeeFirstName", name: "EmployeeFirstName", width: "80px", autoWidth: true, className: "dt-center" },
                { data: "employeeLastName", name: "EmployeeLastName", width: "80px", autoWidth: true, className: "dt-center" },
                {
                    data: "employeeId",
                    orderable: false,
                    render: function (data) {
                        return '<a class="popupEdit" href="/Employees/_EditForm/' + data + '"><i class="fa fa-pencil"/></a>';
                    }
                }
            ]
        }
    });
     
    $('.container').on('click', 'a.popupEdit','tr', function (e) {
        e.preventDefault();
        var id = $(this).data("employeeId");
        alert(id);
     
    });
});

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Nov 22, 2022 12:11 AM

Hi ruben00000,

When Anchor Link is clicked, first reference the row and find the DataTable row using it.

Then from the DataTable row get the hidden column using the property.

Refer below example.

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 hidden>Employee Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var oTable = $("#employeesTable").DataTable({
                "processing": true,
                "serverSide": true,
                "filter": false,
                "ajax": {
                    "url": "/Home/GetEmployeeList",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": [
                    { 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,
                        render: function (data) {
                            return '<a class="popupEdit" href="/Employees/_EditForm/' + data + '"><i class="fa fa-pencil"/></a>';
                        }
                    }
                ]
            });

            $('.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