laravel yajra datatable is showing only table headers

Question

I use yajra datatable in existing project.when I create a new datatable it shows only table headers. datas and buttons(['csv', 'excel', 'print', 'reset']) are not visible the code of transactions table is the query has no problems

<?php
/**
 * Driver DataTable
 *
 * @package     Gofer
 * @subpackage  DataTable
 * @category    Driver
 * @author      Trioangle Product Team
 * @version     2.2.1
 * @link        http://trioangle.com
 */

namespace App\DataTables;

use Yajra\DataTables\Services\DataTable;
use \DB;

class TransactionDataTable extends DataTable
{

    protected $edit, $delete;
    /**
     * Build DataTable class.
     *
     * @param mixed $query Results from query() method.
     * @return \Yajra\DataTables\DataTableAbstract
     */
    public function dataTable($query)
    {

        return datatables()
            ->of($query);
           
    }

    /**
     * Get query source of dataTable.
     *
     * @param User $model
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function query()
    {
      $transactions=DB::table('transactions')->select('id','remark','amount','detail');
      error_log('all transactions......'.$transactions);
      return $transactions;
    }

    /**
     * Optional method if you want to use html builder.
     *
     * @return \Yajra\DataTables\Html\Builder
     */



    public function html()
    {
        return $this->builder()
            ->columns($this->getColumns())
            ->minifiedAjax()
            ->dom('lBfr<"table-responsive"t>ip')
            ->orderBy(0)
            ->buttons(
                ['csv', 'excel', 'print', 'reset']
            );
    }

    /**
     * Get columns.
     *
     * @return array
     */

    protected function getColumns()
    {
        $columns = [
            ['data' => 'id', 'name' => 'id', 'title' => 'Id'],
            ['data' => 'remark', 'name' => 'remark', 'title' => 'Remark'],
            ['data' => 'type', 'name' => 'type', 'title' => 'Type'],
            ['data' => 'amount', 'name' => 'amount', 'title' => 'Amount'],
            ['data' => 'detail', 'name' => 'detail', 'title' => 'Detail'],

        ];
        return $columns;
    }

    /**
     * Get filename for export.
     *
     * @return string
     */

    protected function filename()
    {
        return 'transactions_' . date('YmdHis');
    }
}

when I open console it shows this error

your text`dataTables.buttons.js:1490 Uncaught TypeError: Cannot read properties of undefined (reading 'Buttons')
    at dataTables.buttons.js:1490:42
    at dataTables.buttons.js:1496:3
(anonymous) @ dataTables.buttons.js:1490
(anonymous) @ dataTables.buttons.js:1496
buttons.server-side.js:12 Uncaught TypeError: Cannot read properties of undefined (reading 'ext')
    at buttons.server-side.js:12:15
    at buttons.server-side.js:113:3
(anonymous) @ buttons.server-side.js:12
(anonymous) @ buttons.server-side.js:113
transactions:705 Uncaught TypeError: $(...).DataTable is not a function
    at transactions:705:174
    at transactions:712:570

I want to know why data and buttons(['csv', 'excel', 'print', 'reset']) are not visible.