OnClick function on td element return firstcolumn value and header value

Question

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

this in your case is a window object, when you console.log(table) what the output you get? — Norlihazmey Ghazali
– Norlihazmey Ghazali, Commented Mar 2, 2016 at 2:20
this.Datatable() is not a function. table.cell(this) is not a function... — Daniel Lavoie
– Daniel Lavoie, Commented Mar 2, 2016 at 5:31

Norlihazmey Ghazali · Accepted Answer · 2016-03-02 05:47:42Z

1

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;
});

edited Mar 2, 2016 at 5:47

answered Mar 2, 2016 at 5:41

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

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

8 Comments

Daniel Lavoie Over a year ago

It keeps telling me that DataTable is not a function... Just to be clear because I'm not very good... 'table#mytable' must be the Id of the table generated? And to get the first column value... What would be the line table.column(idx).?Firstcolumnvalue?();

Norlihazmey Ghazali Over a year ago

yes it must be the table that we used to call datatable plugin. See example here datatables.net/reference/api/columns().header(). Ever try this table.column(0).header(); or table.column(1).header();

Daniel Lavoie Over a year ago

Damn... I'm turning it every way... It keeps telling me: Uncaught TypeError: $(...).DataTable is not a function... What am I missing?

Norlihazmey Ghazali Over a year ago

What element you used to instiated datatable plugin? Can you show how you call datatable from your js

Daniel Lavoie Over a year ago

I just added it in the question. I'm using Cshtml.

|

Collectives™ on Stack Overflow

OnClick function on td element return firstcolumn value and header value

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related