2013-06-26 173 views
0

我是jquery的新手。這是我第一次嘗試jquery.datatables,它運行良好。 現在我試圖添加更多內容 - 就像點擊一個按鈕(下面的代碼中的刷新按鈕),我想刷新網格。但點擊事件不會被解僱。請幫忙。jquery datatables點擊按鈕事件

@{ 
    Layout = "~/Views/Home/JQDataTableEditableLayout.cshtml"; 
} 

@section head{ 

<script language="javascript" type="text/javascript"> 
    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 '<a href="http://www.google.com.au?city=' + data + '">' + data + '</a>'; 
             } 
            }, 
            { "sName": "PostalCode", "bSearchable": false, "bSortable": true } 
         ] 

     }).makeEditable({ 
      "sUpdateURL": "/Home/UpdateData" 
     }); 


     $('#Refresh').on('click', function() { alert('aaaaaaaaaaa'); }); 


    });   //ready 


     </script> 
} 

<button id="Refresh" type="button">Refresh</button> 
<div id="demo" style="width:1000px;"> 
    <h2>Ajax example</h2> 


    <button id="btnAddNewRow" value="Ok">Add new address...</button> 
    <button id="btnDeleteRow" value="cancel">Delete selected address</button> 
    <table id="addrTable" class="display"> 
     <thead> 
      <tr> 
       <th>AddressID</th> 
       <th>AddressLine1</th> 
       <th>AddressLine2</th> 
       <th>City</th> 
       <th>PostalCode</th> 

      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
</div> 

關於n預先感謝。

+0

你可以把它放在JSFiddle?沒有實際嘗試就很難找到錯誤。 –

+0

...對不起,我從來沒有用過jsfiddle。基本上我沒有得到警報,當我點擊刷新按鈕 – abcbucket

+0

在它自己的事件工程。嘗試將它放在數據表初始化之前。 – LMeyer

回答

0

我懷疑你沒有包含可編輯插件。所以對DataTables的調用起作用,但是當你嘗試調用makeEditable時你會得到一個JavaScript錯誤。 JavaScript停止並且從不進行調用。嘗試包括插件,從這裏例如:http://jquery-datatables-editable.googlecode.com/svn/trunk/media/js/jquery.dataTables.editable.js

+0

Hi Bumptious, 實際上這個頁面工作得很好,包括內聯編輯(jeditable)和italso通過ajax更新db。 – abcbucket

+0

Hi Bumptious, 實際上頁面工作得很好,包括內聯編輯(jeditable)和italso通過ajax更新db。我注意到下面的錯誤: Uncaught TypeError:Object [object Object] has no method'live'jquery.dataTables.editable.js:126 它是否會導致點擊事件不會觸發? – abcbucket

+0

在jquery-1.10.1.js後面添加jquery-migrate-1.2.1.jas後,錯誤消失了。 點擊事件中的警報框現在顯示ok。 感謝您的幫助。 – abcbucket