datatables从json对象变得'undefined'

我需要从按钮的函数中获取json对象的id。如果我尝试直接访问id，我得到undefined（不是错误/警告），但是如果我尝试访问该对象，我可以毫无问题地看到它（id和其余数据）。datatables从json对象变得'undefined'

var table = $('#example').DataTable({ 
    serverSide: true, 
    dom: 'Bfrtip', 
    ajax: '/get?op=2', 
    columns: [ 
     { data: 'id' }, 
     // more columns 
    ], 
    buttons: [ 
     { 
      text: 'New', 
      action: function (e, dt, node, config) { 
       window.location.href = '/url?op=new' 
      } 
     }, 
     { 
      text: 'Modify', 
      action: function (e, dt, node, config) { 
       window.location.href = '/url?op=modify&id=' + dt.row({ selected: true }).id()) 
      }, 
      enabled: false 
     }, 
     { 
      text: 'Delete', 
      action: function (e, dt, node, config) { 
      }, 
      enabled: false 
     } 
    ], 
    select: true 
});

我可以访问JSON对象这样做：

alert(JSON.stringify(dt.row({ selected: true }).data())); 
// {"id":1,"key":"value","etc":"etc"}

这是工作，我可以看到该对象的警报。

alert(dt.row({ selected: true }).id()); // undefined 
alert(JSON.stringify(dt.row({ selected: true }).id())); // "undefined" 
alert(JSON.stringify(dt.row({ selected: true }).data()[0])); // undefined

这是行不通的，我可以看到undefined而不是alert中的整数。

我尝试更多的东西，我甚至不记得，但没有工作...

我到底做错了什么？

来源

2016-01-06 Chazy Chaz

我不明白你是如何选择一行。我还没有找到使用{selected：true}的示例。 – Bindrid

我没有那样做，有人给我的代码作为示例http://stackoverflow.com/questions/34573773/datatables-buttons-enable-disable-example-not-working/34573906?noredirect=1#comment56893128_34573906。你知道我如何从选定的行中获取id值吗？ –

@Bindrid什么？ –

我想这是你正在尝试做的。看看我的修改按钮，这是我在你之后添加的按钮。我使用的是extn，但是如果你的数据有一个id字段，你应该可以改变名称来匹配。做了一些其他更改，以便在我的本地环境中运行，但是如果您在jsfiddle中设置或在本地进行操作，它应该可以工作。

注意：这里假定一次只能选择一行。

<!DOCTYPE html> 

    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title></title> 
     <link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css " rel="stylesheet" type="text/css" /> 
     <link href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" /> 

      <link href="https://cdn.datatables.net/select/1.1.0/css/select.dataTables.min.css" rel="stylesheet" type="text/css" /> 
     <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script> 
     <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js" type="text/javascript"></script> 
     <script src="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js" type="text/javascript"></script> 
     <script src="https://cdn.datatables.net/select/1.1.0/js/dataTables.select.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 

      var mydata = [ 
        { 
         "name": "Tiger Nixon", 
         "position": "System Architect", 
         "salary": "$320,800", 
         "start_date": "2011/04/25", 
         "office": "Edinburgh", 
         "extn": "5421" 
        }, 
        { 
         "name": "Garrett Winters", 
         "position": "Accountant", 
         "salary": "$170,750", 
         "start_date": "2011/07/25", 
         "office": "Tokyo", 
         "extn": "8422" 

        }]; 



      $(document).ready(function() { 

       $.map(mydata, function (item, key) { 
          item["DT_RowId"] = item["extn"]}); 

       var table = $('#example').DataTable({ 
        serverSide: false, 
        dom: 'Bfrtip', 
        data:mydata, 
        columns: [ 

       { "data": "name" }, 
       { "data": "position" }, 
       { "data": "office" }, 
       { "data": "extn" }, 
       { "data": "start_date" }, 
       { "data": "salary" } 
         // more columns 
        ], 

        buttons: [ 
         { 
          text: 'New', 
          action: function (e, dt, node, config) { 
           window.location.href = '/url?op=new' 
          } 
         }, 
         { 
          text: 'Modify', 
          action: function (e, dt, node, config) { 

           window.location.href = '/url?op=modify&id=' + dt.row({ selected: true }).id() ; 
          }, 
          enabled: true 
         }, 
         { 
          text: 'Delete', 
          action: function (e, dt, node, config) { 
          }, 
          enabled: false 
         }, 
         { 
          extend: 'selected', 
          text: 'Modify', 
          action: function (e, dt, button, config) { 
          var rw = dt.rows({ selected: true }).data()[0]; 
          window.location.href = '/url?op=modify&id=' + rw.extn; 
         } 

       } 

        ], 
        select: true 
       }); 
      }); 

     </script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
     <div> 

      <table width="100%" class="display" id="example" cellspacing="0"> 
        <thead> 
         <tr> 
          <th>Name</th> 
          <th>Position</th> 
          <th>Office</th> 
          <th>Extn.</th> 
          <th>Start date</th> 
          <th>Salary</th> 
         </tr> 
        </thead> 
        <tfoot> 
         <tr> 
          <th>Name</th> 
          <th>Position</th> 
          <th>Office</th> 
          <th>Extn.</th> 
          <th>Start date</th> 
          <th>Salary</th> 
         </tr> 

        </tfoot> 
       </table> 
     </div> 
     </form> 
    </body> 
    </html>

来源

2016-01-06 05:43:02 Bindrid

谢谢！我只用了'var rw = dt.rows（{selected：true}）。data（）[0];'和alert（rw.id）;'事实证明'{selected：true} '实际上在工作！ –

您可以使用渲染属性这样

 "render": function (data, type, full, meta) { 

      var varName = full.varName; 
      return '<div>'+ varName +'</div>' //or whatever html you want to render  
    }

来源

2016-01-06 01:57:51

不，我需要从选定的行中获取id值。 –

datatables从json对象变得'undefined'

回答

相关问题