jquery - 在数据表按钮中获取 json 值

Question

试图弄清楚如何在单击数据表按钮时获取 json 值并访问它。

这是数据表：

$.ajax({
    url: 'api/getLaneData.php',
    type: 'POST',
    data: data,
    dataType: 'html',
    success: function(data, textStatus, jqXHR){
        $('#loadingDiv').hide();
        $('.box-body').show();
        let jsonObject = JSON.parse(data);    
        let table = $('#example2').DataTable({  
         "data": jsonObject,
           "columns": [  
              { "data": "COLUMN1" },
              { "data": "COLUMN2" },
              // and so on
            ],
          "iDisplayLength": 50,
          "order": [[ 1, "desc" ]],
          "paging": true,
          "scrollY": 300,
          "scrollX": true,
          "bDestroy": true,
          "stateSave": true,
          "sPaginationType":"full_numbers",
          "autoWidth": true,
          "deferRender": true,
          "dom": 'Bfrtip',
          "buttons": [
            {
              text: '<i class="fa fa-plus"></i> Add Lane',
              className: 'addLane btn btn-primary btn-sm',
              action: function (e, dt, node, config){
                // HERE IS WHERE I AM TRYING TO ACCESS THE DATA
                console.log('this is data' + data.COLUMN1);
              }
            }
          ]
       });
     },
     error: function(jqHHR, textStatus, errorThrown){
     }
  });

执行上述操作，我收到一个未定义的错误。

如何访问按钮内的数据？

标签： jquerydatatables

Answer 1

我假设您忘记将dom: 'Bfrtip',添加到您的 dt 并且您的数据变量是一个对象数组。

因为你的问题是：

如何访问按钮内的数据？

您可以将按钮内的数据作为数据表属性访问：

this.data()：此方法提供对用于 API 上下文中表中每一行的原始数据的访问。

一个演示：

var data = {
    "data": [
        [
            "Shou Itou",
            "Regional Marketing",
            "Tokyo",
            "8899",
            "2011\/08\/14",
            "$163,000"
        ],
        [
            "Michelle House",
            "Integration Specialist",
            "Sydney",
            "2769",
            "2011\/06\/02",
            "$95,400"
        ],
        [
            "Suki Burks",
            "Developer",
            "London",
            "6832",
            "2009\/10\/22",
            "$114,500"
        ],
        [
            "Prescott Bartlett",
            "Technical Author",
            "London",
            "3606",
            "2011\/05\/07",
            "$145,000"
        ],
        [
            "Gavin Cortez",
            "Team Leader",
            "San Francisco",
            "2860",
            "2008\/10\/26",
            "$235,500"
        ],
        [
            "Martena Mccray",
            "Post-Sales support",
            "Edinburgh",
            "8240",
            "2011\/03\/09",
            "$324,050"
        ],
        [
            "Unity Butler",
            "Marketing Designer",
            "San Francisco",
            "5384",
            "2009\/12\/09",
            "$85,675"
        ],
        [
            "Howard Hatfield",
            "Office Manager",
            "San Francisco",
            "7031",
            "2008\/12\/16",
            "$164,500"
        ],
        [
            "Cara Stevens",
            "Sales Assistant",
            "New York",
            "3990",
            "2011\/12\/06",
            "$145,600"
        ],
        [
            "Hermione Butler",
            "Regional Director",
            "London",
            "1016",
            "2011\/03\/21",
            "$356,250"
        ],
        [
            "Lael Greer",
            "Systems Administrator",
            "London",
            "6733",
            "2009\/02\/27",
            "$103,500"
        ],
        [
            "Jonas Alexander",
            "Developer",
            "San Francisco",
            "8196",
            "2010\/07\/14",
            "$86,500"
        ],
        [
            "Shad Decker",
            "Regional Director",
            "Edinburgh",
            "6373",
            "2008\/11\/13",
            "$183,000"
        ],
        [
            "Michael Bruce",
            "Javascript Developer",
            "Singapore",
            "5384",
            "2011\/06\/27",
            "$183,000"
        ],
        [
            "Donna Snider",
            "Customer Support",
            "New York",
            "4226",
            "2011\/01\/25",
            "$112,000"
        ]
    ]
};

/*
$.ajax({
    url: 'http://localhost:63342/StackOverflow/1.json',
    type: 'POST',
    data: {},
    dataType: 'html',
    success: function(data, textStatus, jqXHR){
    */
        $('#loadingDiv').hide();
        $('.box-body').show();
        let jsonObject = data.data; // JSON.parse(data).data;
        let table = $('#example2').DataTable({
            "data": jsonObject,
            dom: 'Bfrtip',
            "buttons": [
                {
                    text: '<i class="fa fa-plus"></i> Add Lane',
                    className: 'addLane btn btn-primary btn-sm',
                    action: function (e, dt, node, config){
                        // HERE IS WHERE I AM TRYING TO ACCESS THE DATA
                        console.log(data.data[0]);
                        console.log('this is data' + JSON.stringify(data));
                    }
                }
            ]
        });
        /*
    },
    error: function(jqHHR, textStatus, errorThrown){
    }
});
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>


<div id="loadingDiv">loadingDiv</div>
<div class="box-body">
    <table id="example2" class="display" style="width:100%">
        <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>