locked
JQuery DataTables - Not Displaying Data from Button Clicked event to the javascript function Please help RRS feed

  • Question

  • User-1355965324 posted

    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>

    JS 

    <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

    Monday, March 2, 2020 7:03 AM

All replies

  • User-1330468790 posted

    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 even"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

    Tuesday, March 3, 2020 3:10 AM