Get Cell value on button click

dodoman2017

i am using MVC ajax to fill the table but i can not get cell value by button click please to advise:

<link href="~/Content/DataTablesbootstrap/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquerydataTables1.10.13/jquery.dataTables.min.js"></script>
<script src="~/Scripts/jquerydataTables1.10.13/dataTables.bootstrap.min.js"></script>

<div>
    <table id="MachineTable" class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.MachineNumber)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.MachineSerialNumber)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.MachineModel)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.MachineManufacturer)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.MachineCategory)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.MachineYear)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.MachineDescription)
                </th>
                <th>Edit</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        //Jquery Datatable function
        var table = $('#MachineTable').DataTable({
            processing: true, // for show progress bar
            data: null,
            ajax: {
                url: '/MachineDataTableAjax/Getmachines',
                type: "get",
                datatype: "json"
            },
            columns: [
                    { data: "MachineNumber", "autoWidth": true },
                    { data: "MachineSerialNumber", "autoWidth": true },
                    { data: "MachineModel", "autoWidth": true },
                    { data: "MachineManufacturer", "autoWidth": true },
                    { data: "MachineCategory", "autoWidth": true },
                    { data: "MachineYear", "autoWidth": true },
                    { data: "MachineDescription", "autoWidth": true },
                    {
                        data: "MachineNumber", "width": "50px", "render": function (data) {
                            return '<a>Edit</a>';
                        }
                    }
            ]
        });

$('#MachineTable tbody').on('click', 'a', function () {
            var data = table.row($(this).parents('tr')).data();
            alert(data[0] + "'s salary is: " + data[5]);
        });

ivchooo

Hi, This is how I fix this

data: null,
                                title: 'Action',
                                wrap: true,
                                "render": function (item) {
                                    return "<button onclick='ViewAction(" + item.id + ");' class=\"btn btn-success\">Преглед</button>&nbsp;&nbsp;"

                                }

   function ViewAction(id) {
            var _url = '@Url.Action("ActionMethod", "Controller", new { id=666})'.replace('666', id);
            window.location.href = _url;
        }

Use render function to generated the a tag and add on click attributed to call a js function.

dodoman2017

thanks in advance for your instant replay ivchooo, i try that but no event occurred in browser console i get :

Uncaught ReferenceError: ViewAction is not defined
at HTMLButtonElement.onclick (VM110 Index:1)
onclick @ VM110 Index:1

allan

data[0]

That's the problem - you are attempting to access the data as an array, but the data you are feeding to the table is objects (I can tell since you are using columns.data as a string).

Use:

data.MachineNumber

instead.

Allan