CODEWITHSUNDEEP
javascriptjquerydatatableonclick
Daniel Lavoie
Daniel Lavoie

Reputation: 109

OnClick function on td element return firstcolumn value and header value

I have TD elements with onlick="myfunction()" in it. I would like the function to create a custom location.href with other values from the table.

function myfunction( elem ) {
 var table = $('#horo').DataTable();
 var idx = table.cell(elem).index().column;
 var ColumnHeader = table.column(idx).header();
 var FirstColumnValue = X;
 location.href = "Page.cshtml?ID=" + ColumnHeader + "?Name=" + FirstColumnValue;
}

Everytime it keeps telling me Page.cshtml?ID=Undefined

The table is called like this

          <table class="horo" width="1235px" style="border-style: solid; border-width: thin">
        <thead>
            <tr>
                @foreach(DataColumn col in table.Columns)
                {
                    <th class="cedule2">@col.ColumnName</th>
                }
            </tr>
        </thead>
        <tbody>
            @foreach(DataRow row in table.Rows)
            {
                <tr>
                    @foreach(DataColumn col in table.Columns)
                    {
                        <td  onclick="myfunction(this)" onmouseover="" style="width: 154px; border: 1px solid black">@row[col.ColumnName]<br></td>
                    }
                </tr>
            }
        </tbody>
    </table>

And here is the way I create the table using Razor 

DataTable table = new DataTable();

for(int i = 0; i <= data.Count(); i++){
    table.Columns.Add(i.ToString(), typeof(string));

}
foreach(var col in data.First().Columns){
    var val = new List<string>();
    val.Add(col);

    foreach(var rec in data){
        val.Add(rec[col].ToString());

    }

    table.Rows.Add(val.ToArray());

}

Thank you very much for your help. It's really appreciated

Upvotes: 2

Views: 1377

Answers (1)

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

this in your case is a window object, you need to call again element that you used to instantiated the datatables, assume :

function myfunction( elem ) {
  // assume you call datatable with 
  // this element = $('table#myTable')
  // then use that
  var table = $('table#myTable').DataTable();
  // `this` inside .cell(this) should change to current clicked element
  // and must be passed as function args
  var idx = table.cell(elem).index().column;
  var ColumnHeader = table.column(idx).header();
  var FirstColumnValue = Noclue;
  location.href = "Page.cshtml?ID=" + ColumnHeader + "Name=" + FirstColumnValue;
}

So in TD element should be :

<td onclick="myfunction(this)">......</td>

Instead of using inline script and call the function directly, do it with jQuery .on :

var table = $('table#myTable').DataTable();

$('table#myTable tbody').on( 'click', 'td', function () { 
  var idx = table.cell(this).index().column;
  var ColumnHeader = table.column(idx).header();
  var FirstColumnValue = Noclue;
  location.href = "Page.cshtml?ID=" + ColumnHeader + "Name=" + FirstColumnValue;
});

Upvotes: 1

Related Questions