Apply jquery on tr

suser

I try this .

<script type="text/javascript">
      $(document).ready(function () {
          var table = $('#example').DataTable();

          $('#grid tbody').on('click', 'tr', function () {
              $(this).toggleClass('selected');
          });

          $('#button').click(function () {
              alert(table.rows('.selected').data().length + ' row(s) selected');
          });
      });
</script>

<table id="grid" class="display">
   <tr>
   <th>
   Name
   </th>
   <th>
   ID
   </th>
   </tr>
   <tbody>
   <tr>
  <td>
  ABC
  </td>
   <td>
   def
   </td>
   </tr>
   </tbody>
   </table>

also i add links

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"/>

but table not display like this
-https://datatables.net/examples/api/select_row.html

any help

F12Magic

You are using a stylesheet link and provide a javascript to it.
Better use:
<script type="text/javascript" src="path/to/jquery.dataTables.min.js"></script>

suser

but i already have static webmethod which return data so why i use this datatables?

suser

i already add this link

F12Magic

If you have loaded the plugin files in the correct way, then the only problem I see from your code is that your table doesn't have a thead tag. Correct that first, like the example below, please.

<table id="grid" class="display">
<thead>
    <tr>
       <th>Name</th>
       <th>ID</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>ABC</td>
        <td>def</td>
    </tr>
</tbody>
</table>