jquery data table action button

Question

Can anyone help me about the best approach to add action button like edit, delete in each row in jquery data table?

I had gone through some links but didn't find a solution.

$(document).ready(function () {

    $.ajax({
        url: '@Url.Action("GetStudentGridData", "UserManagement")',
        type: "GET",
        dataType: 'json',
        success: function (data) {
            $('#student-datatable').DataTable({
                data: data,
                aoColumns: [
                    { mData: "FirstName" },
                    { mData: "Class" },
                    { mData: "Roll" },
                    { mData: "PresentAddress" },
                    { mData: "BloodGroup" },
                    { mData: "RegisterDate" },
                    {
                        mRender: function (data, type, full) {
                            return '<a href="@Url.Action("Edit","Users")?id=' + data + '" class="editUser">Edit</a>';
                        }
                    }

                ]

            });
        },
        error: function () {
            alert("An error has occured!!!");
        }
    });
});

Here is the js code that I used to render data table. Each row has a student details and in my return 'data' object I had studentID property. I want to fetch data using that studentID when user click Edit button in a row.

Kindly help me about how to render edit and delete button and also how to handle them.

Solution : I have tried a new approach. Instead of rendering column using datatable property I have added button in html

<table id="student-datatable" class="table table-striped table-bordered table-hover table-highlight table-checkable" cellspacing="0">
<thead>
    <tr>

        <th>Name</th>
        <th>Class</th>
        <th>Roll</th>
        <th>PresentAddress</th>
        <th>Blood Group</th>
        <th>Register Date</th>
        <th>Action</th>
    </tr>
</thead>

<tbody>
    @{
        foreach (var cl in Model)
        {

            <tr>
                <td>@cl.FirstName @cl.LastName</td>
                <td>@cl.Class</td>
                <td>@cl.Roll</td>
                <td>@cl.PresentAddress</td>
                <td>@cl.BloodGroup</td>
                <td>@cl.RegisterDate</td>
                <td>
                    <div >
                        <button type="button" class="btn btn-default edit-student-btn" data-student-id="@cl.StudentID"><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-default"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
        }
    }
</tbody>

Then I just call the jquery datatable method.

$(document).ready(function () {

    $('#student-datatable').DataTable();
});

This give me nice output:

Mihai Alexandru-Ionut · Accepted Answer · 2017-05-23 18:40:02Z

2

In this case, you have to use event delegation for elements added dynamically.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

You should bind click event handler using .on() method.

$(document).on('click','.editUser',function(){
    var studentID=$(this).closest('tr').find('td').eq(6).html();
});

answered May 23, 2017 at 18:40

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Robin Halder Over a year ago

And how to render those buttons?

Mihai Alexandru-Ionut Over a year ago

You mean how to display in the page ?

Robin Halder Over a year ago

yes how to render edit and delete button in each row of table

Mihai Alexandru-Ionut Over a year ago

@RobinHalder,have a look to my fiddle: jsfiddle.net/ntcwust8/228. I make an example in order to show you how to format a row using columnDefs and fnCreatedRow methods.

Mihai Alexandru-Ionut Over a year ago

But in your case, the idea is the following: render the studentID in the table, then hide the column, render the button with editUser class like in my example, and the last step is to take the studentID when you click the button, using closest method.

Collectives™ on Stack Overflow

jquery data table action button

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related