how to call function on onclick event of hyperlink having text parameter.

how to call function on onclick event of hyperlink having text parameter.

tajtaj Posts: 20Questions: 5Answers: 0
edited July 2021 in DataTables 1.10
        $.ajax({
            type: "GET",
            url: "../PartsCatalog/GetPartDetails",
            data: id,
            success: function (data) {
                debugger;
                console.log(data);
                columnNames = Object.keys(data[0]);
                console.log(columnNames);
                for (var i in columnNames) {
                    columns.push({
                        data: columnNames[i],
                        title: columnNames[i]
                    });
                }
                columns.push({
                    data: "Action",
                    title: "Action"
                })

                $("#divGridSales").css({ display: "block" });
                $('#tblViewPartDetails').DataTable({
                    "processing": true, // for show progress bar
                    "serverSide": false, // for process server side
                    "filter": true, // this is for disable filter (search box)
                    "orderMulti": false, // for disable multiple column at once
                    "bDestroy": true,   //for reinitialize the datatable
                    "data": data,
                    "columns": columns,

                    "columnDefs": [
                        {
                            // The `data` parameter refers to the data for the cell.
                            // The `rows`argument is an object representing all the data for the current row.
                            "render": function (data, type, row) {
                                var partNo = row.partNumber;
                                //console.log(row);
                                //console.log(partNo);
                                return "<a href='#' id='hlinkView' class='ti-eye' data-toggle='modal' data-target='#exampleModal' onclick='getPartDetailsByPartNumber(" + XYZ + ")'></a>";
                                /*return "<button class='btn btn-danger btn-delete' onclick='Delete(" + row.partNumber + ")'>Delete</button>";*/
                            },
                            "targets": -1 // -1 is the last column, 0 the first, 1 the second, etc.
                        },
                        {
                            targets: [0, 1, 2, 5, 6, 7, 8, 9, 10],
                            visible: false
                        },
                        {
                            targets: 3, width: '100px'
                        },
                        {
                            targets: 12, width: '100px', className: 'dt-center'
                        },
                        {
                            targets: 4, width: '400px'
                        },
                        {
                            targets: 11, width: '100px', className: 'dt-right'
                        },
                        {
                            targets: 13, width: '50px', className: 'dt-center'
                        },
                        {
                            targets: 4, className: "dt[-head|-body]-nowrap", title: 'tttttt'
                        }
                    ]
                });
            }
        });

Here in "render": function (data, type, row) section getting error like
Uncaught ReferenceError: XYZ is not defined.
if we pass numbers that time it hits the required function.
also how to cleanup popup while fetching next time

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited July 2021 Answer ✓

    also how to cleanup popup while fetching next time

    What popup are you referring to? If its a Datatables error there will be a troubleshooting link in the alert that will help you solve the problem.

    Uncaught ReferenceError: XYZ is not defined.

    What is XYZ? Where is it defined? Is it part of the row data?

    Maybe this example will help you with your row rendering.

    In general you will be better off using delegated events like this example. If XYZ is the row data you can get it in the delegated event handler and pass it to your function. You can make the selector more specific to the link, something like this example wiht buttons:
    http://live.datatables.net/qemodapi/506/edit

    Kevin

  • tajtaj Posts: 20Questions: 5Answers: 0

    Thanks lot @Kevin,

    I have tried following code and it works.
    -------------------------------------------Ist Part

                            {
                                // The `data` parameter refers to the data for the cell.
                                // The `rows`argument is an object representing all the data for the current row.
                                "render": function (data, type, row, meta) {
                                    var partNo = row.partNumber;
                                    //console.log(row);
                                    //console.log(partNo);
                                    return "<a href='#' id='hlinkView' class='ti-eye' data-toggle='modal' data-target='#exampleModal'></a>";
                                    /*return "<a href='#' id='hlinkView' class='ti-eye' data-toggle='modal' data-target='#exampleModal' onclick='getPartDetailsByPartNumber(" + partNo + ")'></a>";*/
                                },
    

    --------------------------------------------------------II nd Part

    $('#tblViewPartDetails tbody').on('click', '.ti-eye', function () {
        debugger;
        var table = $('#tblViewPartDetails').DataTable();
        var tr = $(this).closest('tr');
        var data = table.row(tr).data();
        console.log(data.partNumber);
        getPartDetailsByPartNumber(data.partNumber, data.lobid, data.countryCode);
    });
    
Sign In or Register to comment.