Дмитрий

Я решил проблему по другому. В папку js и css (в шаблоне) добавил нужные мне файлы и подключил их следующим образом.

// Add Stylesheets
JHtml::_('stylesheet', 'jquery.dataTables.min.css', array('version' => 'auto', 'relative' => true));

// Check for a custom js file
JHtml::_('script', 'jquery-3.5.1.js', array('version' => 'auto', 'relative' => true));
JHtml::_('script', 'jquery.dataTables.min.js', array('version' => 'auto', 'relative' => true));

Нашел решение. Может кому то пригодится

<script type="text/javascript">
$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead th').each( function () {
        var title = $('#example tfoot th').eq( $(this).index() ).text();
        if(title!=""){
            $(this).html( '<strong>'+title+'</strong><br><input class="sesn-serh-input" type="text" placeholder="Шукати" />' );
      }
    } );
 
    // DataTable
    var table = $('#example').DataTable({
	"order": [[ 0, "desc" ]],
	"pagingType": "full_numbers",
	"scrollX": true,
    "columnDefs": [
        { "searchable": false, "targets": [1,2,3,4,5] }
    ],
    });
 
    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        if( !table.settings()[0].aoColumns[colIdx].bSearchable ){
        table.column( colIdx ).header().innerHTML=table.column( colIdx ).footer().innerHTML;
    }
        $( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );
} );
	</script>