数据表获取未定义'来自json对象

时间:2016-01-06 00:48:35

标签: javascript json datatables

我需要在按钮的功能中从json对象获取一个id。如果我尝试直接访问id我得到undefined(不是错误/警告)但是如果我尝试访问该对象,我可以毫无问题地看到它(id和其余数据)。

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而不是警报中的整数。

我尝试了很多我甚至无法记住但却没有工作的东西......

我做错了什么?

2 个答案:

答案 0 :(得分:1)

我认为这就是你要做的。看看我的修改按钮,我之后添加的按钮。我正在使用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>

答案 1 :(得分:0)

您可以像这样使用render属性

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

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