Jquery数据表从Ajax调用中检索对象或数据。 .data()返回undefined

时间:2017-11-09 15:13:46

标签: html ajax jquery-ui datatables

HTML:

<div class="tableStyle">
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <h2 style="text-align: center;">SAMPLE</h2>
            <tr>
                <th>Commands</th>
                <th>ID</th>
                <th>Type</th>
                <th>Name</th>
                <th>PPU</th>
                <th>$ Amount</th>
            </tr>
        </thead>
    </table>
</div>

JS

$("#dialog").dialog({
    autoOpen: false,
    draggable: false,
    resizeable: false,
    height: 'auto',
    width: 'auto',
    buttons: {
      Cancel: function() {
        $( this ).dialog( "close" );
      },
      Save: function() {
        $ (this).dialog("close");
      }
    }
});

$.ajax({
    url: 'data.json',
    success: function(data) {
        var table = $('#example').DataTable({
                data: data, 
                "pagingType": "numbers",
                'searchable': true,
                'sort': true,
                columns: [
                    {data: null,
                    defaultContent: "<button id='edit'>Edit</button> <button id='delete'>Delete</button>"
                    },
                    { data : 'id' },
                    { data : 'type' },
                    { data : 'name' },
                    { data : 'ppu' },
                    { data : 'amount',
                     render: function(amount) {
                        return '$' + amount;
                     }}
                ]
            })

            $('#example tbody').on( 'click', 'tr #edit', function () {
                var data = table.row(this).data();
                console.log(data);
                $('#dialog h1').html("Title");
                $('#dialog').dialog('open');
            }); 

            $('#example tbody').on( 'click', '#delete', function () {
                alert('Delete this!');
            });
        }
    })

所以我想要实现的只是从按钮点击的相关行中获取数据。我尝试了几乎所有的东西,每次尝试它都是未定义的。我还在处理我的代码,但这是我需要的下一部分才能继续。我尝试使用var data = table.row(this).data();每次返回undefined。我需要通过单击特定的取消按钮来关联行对象。单击按钮后,我将打开一个对话框,显示该对象和相关行的某些信息。如果有人可以提供帮助,那将会有很大的帮助。 感谢

1 个答案:

答案 0 :(得分:0)

我用table.row(this).data()错误解决了这个问题,首先找到我正在使用哪一行的索引,然后通过相同的函数传递索引。

var index = $(this).closest('tr').index()
var data = table.row(index).data();

这似乎是解决这个问题的最简单方法。