JQuery DataTables - Not Displaying Data from Button Clicked event to the javascript function Please helpRSS

1 reply

Last post Mar 03, 2020 03:10 AM by Sean Fang

‹ Previous Thread|Next Thread ›

Shortcuts

polachan

Member

337 Points

1124 Posts

JQuery DataTables - Not Displaying Data from Button Clicked event to the javascript function Pl...

Mar 02, 2020 07:03 AM|polachan|LINK

I have the given

<div class="table-responsive">
<table id="tblData" class="table table-striped table-bordered" style="width:100%">
 <thead>
    <tr>
         <th>Id</th>
         <th>EmployeeName</th>
         <th>Date</th>
         <th></th>
    </tr>
 </thead>
</table>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        GetClockList()    
});
</script>
function GetClockList() {
   try {
           var table = $('#tblData').DataTable();
           table.destroy();
        }
            catch (ex) {

            }

            var table=  $('#tblData').DataTable({
                "ajax": {
                    "url": "/Home/GetClockList?employeeid=" + $('#dropdownEmployee').val()
                    + "&clockdate=" + $('#txtAttendanceDate').val() ,
                    "type": "GET",
                    "datatype": "json",
                    "dataSrc": function (json) {
                        return JSON.parse(json);
                    }
                 },
                "columns": [
                    { "data": 'ID', "width": "6%" },
                    { "data": 'EmployeeName', "width": "20%" },
                    { "data": 'ClockedDatetoList', "width": "20%" },
                    {
                        "data": null,
                        "render": function (data, type, row) {
                            return `<div class="text-center">
                            <a class='btn btn-danger text-white' style='cursor:pointer; width:100px;' onclick="ShowDeleteModalPopup()" >
                               <i class='far fa-trash-alt'></i> Delete
                            </a></div>
                        `;
                        }, "width": "5%"
                    }

                ],
                "columnDefs": [
                    {
                        "targets": [0],
                        "visible": false
                    },

                ],
                "language": {
                    "emptyTable": "no data found."
                },
                "width": "100%"
            });
    }
function ShowDeleteModalPopup() {
 alert(ID); How can I bring the value from ID column and EmployeeName column when we click btn btn-danger  Please help
 alert(EmployeeName)
 $('#lblID').val(id);
 $('#deleteConfirmationModal').modal('show');
 }

html page

Sean Fang

Participant

1090 Points

299 Posts

Re: JQuery DataTables - Not Displaying Data from Button Clicked event to the javascript function...

Mar 03, 2020 03:10 AM|Sean Fang|LINK

Hi, polachan，

If I understand your requirement right, what you need is to fetch the 'ID' and 'EmployeeName' by clicking the button in the same row.

Since you set the 'ID' to invisible, you can not directly fetch it through DOM (use jquery or javascript). However, the values of 'ID' and 'EmployeeName' can be brought by using the given API of DataTables 'row().data()', which will return an object containing all of the data in this row. The row is fetched by adding the button into the function of the click event "ShowDeleteModalPopup".

More details, please refer to below code:

Script:

<script type="text/javascript">
        $(document).ready(function () {
            GetClockList();
        });

        function GetClockList() {
            try {
                var table = $('#tblData').DataTable();
                table.destroy();
            }
            catch (ex) {

            }

            var table = $('#tblData').DataTable({
                // simulation of the data, not important
                "ajax": {
                    "url": "DataTableJquery.aspx/GetClockList",
                    "type": "POST",
                    "contentType": "application/json;charset=utf-8",
                    "datatype": "json",
                    "dataSrc": function (json) {
                       
                        return JSON.parse(json.d);
                    }
                },
                "columns": [
                    { "data": 'ID', "width": "6%" },
                    { "data": 'EmployeeName', "width": "20%" },
                    { "data": 'ClockedDatetoList', "width": "20%" },
                    {
                        "data": null,
                        "render": function (data, type, row) {
                            return `<div class="text-center">
                            <a class='btn btn-danger text-white' style='cursor:pointer; width:100px;' onclick="ShowDeleteModalPopup(this)" >
                               <i class='far fa-trash-alt'></i> Delete
                            </a></div>
                        `;
                        }, "width": "5%"
                    }

                ],
                "columnDefs": [
                    {
                        "targets": [0],
                        "visible": false
                    },

                ],
                "language": {
                    "emptyTable": "no data found."
                },
                "width": "100%"
            });
        }
        function ShowDeleteModalPopup(input) {
            // get the row
            var row = input.parentNode.parentNode.parentNode;
            // Use row().data() API to fetch the data of the row
            var table = $('#tblData').DataTable();
            var rowData = table.row(row).data();

            // Get the ID and EmplyeeName
            var ID = rowData.ID;
            var EmployeeName = rowData.EmployeeName;
            alert(ID);
            alert(EmployeeName);
        }
    </script>

HTML:

<div class="table-responsive">
                <table id="tblData" class="table table-striped table-bordered" style="width: 100%">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>EmployeeName</th>
                            <th>Date</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>

Code behind: Simulation of the data, not important.

protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string GetClockList()
        {
            List<Clock> clocks = new List<Clock>();

            clocks.Add(new Clock() { ID = "1", EmployeeName = "name1", ClockedDatetoList = new DateTime(2020, 3, 1) });
            clocks.Add(new Clock() { ID = "2", EmployeeName = "name2", ClockedDatetoList = new DateTime(2020, 3, 2) });
            clocks.Add(new Clock() { ID = "3", EmployeeName = "name3", ClockedDatetoList = new DateTime(2020, 3, 3) });
            clocks.Add(new Clock() { ID = "4", EmployeeName = "name4", ClockedDatetoList = new DateTime(2020, 3, 4) });
            clocks.Add(new Clock() { ID = "5", EmployeeName = "name5", ClockedDatetoList = new DateTime(2020, 3, 5) });

            string s = JsonConvert.SerializeObject(clocks);


            return s;

        }

        public class Clock
        {
            public string ID { get; set; }
            public string EmployeeName { get; set; }
            public DateTime ClockedDatetoList { get; set; }
        }

Demo:

Hope this can help you.

Best regards,

Sean

‹ Previous Thread|Next Thread ›