ajax not sending parameter to script

Trying to populate a datatable using ajax. Passing the parameter as follows:

$('#submitDetails').on('click', function()
{
  let details = $('#searchDetails').val();

  $.ajax({
        url: 'api/searchDetailInfo.php',
        type: 'POST',
        data: details,
        dataType: 'html',
        success: function(data, textStatus, jqXHR){
          console.log(data); // <-- printing the return from the php script
          let jsonObject = JSON.parse(data);
          var table = $('#example1').DataTable({    
                "data": jsonObject,
                "columns": [
                        { "data": "COLUMN1" },              
                        { "data": "COLUMN2" },
                        { "data": "COLUMN3" }
                ],
                "iDisplayLength": 50,
                "order": [[ 1, "desc" ]],
                "paging": true,
                "scrollY": 550,
                "scrollX": true,
                "bDestroy": true,
                "stateSave": true,
                "sPaginationType":"full_numbers",
                "autoWidth": true
        },
        error: function(jqHHR, textStatus, errorThrown) {
            $('#loadingDiv').hide();
            $('#errorModal').modal('show');
            $('.message').text('There was an error conducting your search.');
            console.log('fail: '+ errorThrown);
            return false;
        }
});

I am getting to the PHP script, but the script is not receiving the parameter.

<?php
  include("../include/database.php");

  if(isset($_POST['details']))
  {
    echo "good";
  }
  else
  {
    echo "bad";
  }
?>

I'm only getting "bad" in the console. I am not sure why the parameter is not being sent to the script.

How can I fix this?