Datatables: How to show a variable number of rows on each page?

Question

I have a table that shows the last week of events.

I'd like to show a day's events per page. So that could be 5 or 18 or none.

How can I do something like:

// Create the datatable
let dt = $('#dt').DataTable(
  data    : json,
  columns : [
    {
      title : Event,
      data  : EventName
    },{
      title : Date,
      data  : Date
    }
  ]
)

// Show today's events
dt.page().data( getDateRows( new Date() ) )

// Get the events that occurred on a specific date
function getDateRows(dateToGet){
  let pageRows = dt.data.rows().filter(r => r.Date === dateToGet.toLocaleString())
  if (pageRows.length)
    return pageRows
  else
     dt.language.emptyTable("No events on this day")
  return false
}

// Show tomorrow's events when user clicks next
$('#next').on( 'click', function () {
  let date = new Date()
  let tomorrow = date.setDate(date.getDate() + 1) || '';
  table.page( 'next' ).data( getDateRows( tommorrow ).draw( 'page' );
} );
 
// Show yesterday's events when user clicks previous
$('#previous').on( 'click', function () {
  let date = new Date()
  let yesterday = date.setDate(date.getDate() - 1) || '';
  table.page( 'next' ).data( getDateRows( yesterday ).draw( 'page' );
} );