title: jquery datatables click event from button
body: <p>I am new to jquery. This was my first attempt at jquery.datatables and it worked fine. 
  Now I am trying to add some more to it - like if a button is clicked (Refresh button in the code below), I want to refresh the grid. But the click event is not fired. Please help.</p>
  
  <pre><code>@{
      Layout = "~/Views/Home/JQDataTableEditableLayout.cshtml";
  }
  
  @section head{
  
  &lt;script language="javascript" type="text/javascript"&gt;
      var oaddrTable;
  
      $(document).ready(function () {
  
          oaddrTable = $('#addrTable').dataTable({
              "bJQueryUI": true,
              "sPaginationType": "full_numbers",
              "iDisplayLength": 100,
              "aLengthMenu": [[50, 100, 300, -1], [50, 100, 300, "All"]],
              "bProcessing": true,
              "bServerSide": true,
              "sAjaxSource": '/Home/AjaxIndexDataProvider',
              "bAutoWidth": true,
              "bDeferRender": true,
              "sScrollX": "100%",
              "sScrollXInner": "120%",
              "sScrollY": 500,
              "bScrollCollapse": true,
  
              "aoColumns": [
                                      { "sName": "AddressID", "bSearchable": false, "bSortable": false, "bVisible": false },
                                      { "sTitle": "Address Line 1", "sName": "AddressLine1", "bSearchable": false, "bSortable": true },
                                      { "sName": "AddressLine2", "bSearchable": false, "bSortable": true },
                                      { "sName": "City", "bSearchable": false, "bSortable": true,
                                          "mRender": function (data, type, full) {
                                              return '&lt;a href="http://www.google.com.au?city=' + data + '"&gt;' + data + '&lt;/a&gt;';
                                          }
                                      },
                                      { "sName": "PostalCode", "bSearchable": false, "bSortable": true }
                           ]
  
          }).makeEditable({
              "sUpdateURL": "/Home/UpdateData"
          });
  
  
          $('#Refresh').on('click', function () { alert('aaaaaaaaaaa'); });
  
  
      });           //ready
  
  
          &lt;/script&gt;
  }
  
  &lt;button id="Refresh" type="button"&gt;Refresh&lt;/button&gt;
  &lt;div id="demo"  style="width:1000px;"&gt;
      &lt;h2&gt;Ajax example&lt;/h2&gt;
  
  
      &lt;button id="btnAddNewRow" value="Ok"&gt;Add new address...&lt;/button&gt; 
      &lt;button id="btnDeleteRow" value="cancel"&gt;Delete selected address&lt;/button&gt;
      &lt;table id="addrTable" class="display"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;AddressID&lt;/th&gt;
                  &lt;th&gt;AddressLine1&lt;/th&gt;
                  &lt;th&gt;AddressLine2&lt;/th&gt;
                  &lt;th&gt;City&lt;/th&gt;
                  &lt;th&gt;PostalCode&lt;/th&gt;
  
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt; 
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>regards n thanks in advance.</p>