2013-06-26 274 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