$('table').dataTable({
lengthChange: false, //visable show {row} entries
info : false, // hide showing entries bottom
pagingType: "first_last_numbers", // showing bottom number
searching: false, //hide search
aLengthMenu: [[5, 10, 25, -1], [5, 10, 25, "All"]], // set show {row} entries
iDisplayLength: 5 // num of rows
});
//html
<table id="table" class="table table-striped table-bordered dt-responsive display nowrap" style="width: 100%!important;">
<thead class="thead-light"></thead>
</table>
//js
var table = $('#table').DataTable({
processing: true,
searching : true,
paging : true,
pageLength: 25,
ordering : false,
data : data,
columns: [
{data: 'id', title: '#'},
{data: 'name', className: "text-center", title: 'Name'},
{
data: function(row){
return "</a><a class='ui icon blue button' href='/name/view/" + row.id + "'><i class='fas fas fa-search'></i></a> <a class='ui icon blue button' href='/name/" + row.id + "'><i class='fas fa-pencil-alt'></i></a>"
},
searchable: false,
orderable : false,
className: "text-center",
title: 'Actions'
},
],
lengthMenu: [
[ 25, 50, -1 ],
[ '25 rows', '50 rows', 'Show all' ]
]
})
jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');
//style
.dataTables_scroll
{
overflow:auto;
}