ajax Loaded row details in datatable issue

shubham9039

Link to show my live test code:
https://jsfiddle.net/2vp5brm8/
I am trying this below script:

HTML:

<tr class="odd">
  <td class="details-control" key-num="123456" key-count="741"></td>
  <td>Airi Satou</td>
  <td>Accountant</td>
  <td>Tokyo</td>
  <td>$162,700</td>
</tr>

JS:

function format ( rowData ) {
var div = $('<div/>')
    .addClass( 'loading' )
    .text( 'Loading...' );

$.ajax( {
    url: '/api/staff/details',
    data: {
        key_num: "123456", //key-num="123456"
        key_count: "741",  //key-count="741"
    },
    dataType: 'json',
    success: function ( json ) {
        div
            .html( json.html )
            .removeClass( 'loading' );
    }
} );

return div;
}

Error messages are shown:
not working
Description of problem:
I am coding on basis of this page link documentation "https://datatables.net/blog/2017-03-31", I am trying to send the data when ajax call, as "key_num & key_count" that are in the "table > tr > td" own attribute's.
How do I get the "td attr" value and send it to ajax to fetch the expected value from server