Search Box & Pagination is not showing in DataTable - datatables

Question

My Datatable jQuery code is like below.
$(".shop_table").DataTable({
pageLength: 10,
filter: true,
deferRender: true,
});
My HTML code is like below.
<table class="shop_table shop_table_responsive table table-striped table-bordered">
<thead>
<tr>
<th class="product-name">Attribute Name</th>
<th class="product-desc">Catalog Number</th>
<th class="product-price">Value</th>
</tr>
</thead>
<tbody>
{{#each this}}
<tr>
<td class="product-desc">
{{ this.ATTRIBUTE_NAME }}
</td>
<td class="product-price" data-title="Box Price">
{{ this.CATALOG_NUMBER }}
</td>
<td class="product-quantity" data-title="Number of Boxes">
{{ this.VALUE }}
</td>
</tr>
{{/each}}
</tbody>
</table>
But I am getting output like below without Search Box & Pagination.

Answer 1

Depending on what styling integration option you selected (BootStrap, jQuery UI, Foundation etc...) it may wipeout your default datatable DOM setting. Setting up the DOM in DataTables is difficult. You can read about it here.
jQuery DataTables DOM info
I was going to just leave a comment, but i don't have the rep to do that. I use BootStrap and in the DataTables settings I have this
$.extend($.fn.dataTable.defaults, {
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
pageLength: 25,
dom: "<'row'<'col-md-3'l><'col-md-7'f><'col-md-2 text-right'B>><'row'<'col-md-12't>><'row'<'col-md-6'i><'col-md-6'p>>",
autoWidth: false,
language: {
search: "Filter",
emptyTable: "No records found"
}
});