Data table Second row button cick not working

navsnavya

    $(document).ready(function () {
        


        $('#tblCaseStatus thead tr')
            .clone(true)
            .addClass('filters')
            .appendTo('#tblCaseStatus thead');

        var table = $('#tblCaseStatus').DataTable({
            orderCellsTop: true,
            fixedHeader: true,
            initComplete: function () {
                var api = this.api();

                // For each column
                api
                    .columns()
                    .eq(0)
                    .each(function (colIdx) {
                        // Set the header cell to contain the input element
                        var cell = $('.filters th').eq(
                            $(api.column(colIdx).header()).index()
                        );
                        var title = $(cell).text();
                        $(cell).html('<input type="text" placeholder="' + title + '" />');

                        // On every keypress in this input
                        $(
                            'input',
                            $('.filters th').eq($(api.column(colIdx).header()).index())
                        )
                            .off('keyup change')
                            .on('change', function (e) {
                                // Get the search value
                                $(this).attr('title', $(this).val());
                                var regexr = '({search})'; //$(this).parents('th').find('select').val();

                                var cursorPosition = this.selectionStart;
                                // Search the column for that value
                                api
                                    .column(colIdx)
                                    .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', '(((' + this.value + ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                    )
                                    .draw();
                            })
                            .on('keyup', function (e) {
                                e.stopPropagation();

                                $(this).trigger('change');
                                $(this)
                                    .focus()[0]
                                    .setSelectionRange(cursorPosition, cursorPosition);
                            });
                    });
            },
        });
    
            
    

        $("#btnSearch").on("click", function () {
            var searchUrl = window.location.href;
            if (window.location.href.indexOf("History") > -1) {
                 searchUrl = '/Home/HistoryRefresh/';
            }
            else if (window.location.href.indexOf("/") > -1 || window.location.href.indexOf("/Home/IndexRefresh/")) {
                 searchUrl = '/Home/IndexRefresh/';
            };
            var status = $('#SelectStatus').find(":selected").text();
            var SelectYearMonth = $('#SelectYearMonth').find(":selected").text();//document.getElementById("SelectYearMonth").value;
            //alert(SelectYearMonth + "year" + document.getElementById("SelectStatus").text);
            $.ajax({
                url: searchUrl,
                type: 'Get',
                data: { SelectYearMonth: SelectYearMonth, Status: status },
                success: function (data) {
                    $('#divDcpReport').html(data);
                    RefreshDatatable();
                },
                error: function (result) {
                    alert('failed');
                }
            });
        });
    });

    function RefreshDatatable() {
       table= $('#tblCaseStatus').DataTable({
            "searching": false,
            "paging": true,
            "ordering": false
        });
    }
    $("#btnDownloadDcp").on("click", function (e) {
        debugger;
        e.preventDefault();
        window.location.href = '/Home/DownlaodDCP/' + parseInt($(this).attr('data-field'));
    });

    $("#btnDownloadGcp1").on("click", function (e) {
        debugger;
        e.preventDefault();
        window.location.href = '/Home/DownlaodGCP/' + parseInt($(this).attr('data-field'));
    });

    $("#btnException").on("click", function (e) {
        e.preventDefault();
        window.location.href = '/Home/DcpException/' + parseInt($(this).attr('data-field'));
    });

<table class="table table-bordered" id='tblCaseStatus' style="max-width:99.8%;margin:0 auto; text-align:center;font-size:1.3rem">
        <thead style="background: rgba(62, 80, 93, 1) ; color:white;">
            <tr style="">

                <th class="dt-head-center">Year-Month</th>
                <th class="dt-head-center">Status</th>
                <th class="dt-head-center">DCP Profile</th>
                <th class="dt-head-center">Last Acted On - By </th>
                <th class="dt-head-center">DCP Excel download</th>
                <th class="dt-head-center">GCP Excel download</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var casestatus in Model)
            {
                <tr style="vertical-align:middle">
                    <td>@casestatus.YearMonth</td>
                    <td>
                        @if (casestatus.Workflow_Type == "Exception")
                        {

                            <button id="btnException" data-field=@casestatus.RecordId class="text-danger btn-link"> @casestatus.WorkFlow_Status  <span class="glyphicon glyphicon-remove-circle"></span></button>
                        }
                        else
                        {
                            <button id="btnSummary" data-field=@casestatus.RecordId class="text-danger btn-link"> @casestatus.WorkFlow_Status  <span class="glyphicon glyphicon-remove-circle"></span></button>
                            <button id="btnSummaryold" data-field=@casestatus.RecordId class="text-primary btn-link">@casestatus.WorkFlow_Status    <span class="glyphicon glyphicon-list"></span></button>

                        }

                    </td>
                    <td>
                        @if (casestatus.Dcp_Profile == "Not Available")
                        {
                            <label id="lblprofileempty" data-field=@casestatus.RecordId>@casestatus.Dcp_Profile  </label>
                        }
                        else
                        {
                            <button id="btnProfile" data-field=@casestatus.RecordId class="text-primary btn-link fontColorSkin">@casestatus.Dcp_Profile    <span class="glyphicon glyphicon glyphicon-user"></span></button>
                        }
                    </td>
                    <td>@casestatus.Last_Acted_OnandBy</td>
                    <td>
                        @if (casestatus.WorkFlow_ID == 16)
    {
                 
                    <button id="btnDownloadDcpold" data-field=@casestatus.RecordId class="btn btn-default">
                        <span class="glyphicon glyphicon-list text-green"></span>
                    </button>
}

                    </td>
                    <td>
                        @if (casestatus.Gcp_File_Path.ToString() != "")
    {


                    <button id="btnDownloadGcp" data-field=@casestatus.RecordId class="btn btn-default">
                        <span class="glyphicon glyphicon-list text-green"></span>
                    </button>
}

                    </td>
                   
                </tr>
            }

        </tbody>
    </table>**Description of problem**: 

the first row all buttons works and redirect to next controller, but any rows after do not work they go hit the home controller.

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Looks like you are trying to use the same IDs for the buttons. HTML id names are to be unique on the page. Take a look at this example about using delegated events. Doing this will allow you to get the tr or td of the clicked button. This way you don't need IDs.

THat is a lot of code to debug just by looking at it. Please post a link to your page or a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

navsnavya

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

<meta charset=utf-8 />
<title>DataTables - JS Bin</title>

</head>
<body>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>

    <tfoot>
      <tr>
        <th>Name</th>
         <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td><button id="btnException" data-field=1 class="text-danger btn-link"> "Success"  <span class="glyphicon glyphicon-remove-circle"></span></button></td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$3,120</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td><button id="btnException" data-field=1 class="text-danger btn-link"> "Failed"  <span class="glyphicon glyphicon-remove-circle"></span></button></td>
      <td>Edinburgh</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$5,300</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td><button id="btnException" data-field=1 class="text-danger btn-link"> "Failed"  <span class="glyphicon glyphicon-remove-circle"></span></button></td>
      <td>Edinburgh</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$5,300</td>
      </tr>          
    </tbody>
  </table>
</div>

</body>
</html>

$(document).ready( function () {
var table = $('#example').DataTable();

  $("#btnDownloadDcp").on("click", function (e) {
    debugger;
  alert('hello btn download'); 
    e.preventDefault();

});

$("#btnException").on("click", function (e) {
    e.preventDefault();
  alert('hello btn');  

});

} );

navsnavya

when second row button success is clicked alert does not trigger

navsnavya

i have placed the code outside document ready too does not trigger it

navsnavya

live.datatables.net/dasejuca/1/edit

kthorngren

You have three buttons with the same id. As I said before id names are to be unique on the page. Only one will be found. Use delegated events, like this:
http://live.datatables.net/dasejuca/2/edit

Kevin

navsnavya

Hi
I have more then 1 button in a row, i need to know which row, which column button was clicked. Id was a typo i Have changed it please have a look.

$("#example tbody").on("click", 'td', function (e) {
var data = table.row(this).data();
alert('You clicked on ' + data[1].attr('data-field') + "'s row");
});

how to identify the button that was clicked if it were second column or 4th column

navsnavya

http://live.datatables.net/dasejuca/2/edit

navsnavya

http://live.datatables.net/dasejuca/3/edit edited with ids

kthorngren

Please read about jQuery delegated events. Modify the selector to include button. In the event handler this will be the button. From there you can get the id of the button, the cell data and row data. Updated example:
http://live.datatables.net/dasejuca/4/edit

Kevin

navsnavya

Thanks you are star* exactly my need will keep going now.