<div class="col-sm-3">
        <div class="thumbnail" name="">
            <a href="" target="_blank">
                <img src="category_1.jpg" style="">
                <div class="caption"></div>
                <p>Category_1</p>
            </a>
        </div>



    <div class="col-sm-3">
        <div class="thumbnail">
            <a href="" target="_blank">
                <img src="category_2.jpg" style="">
                <div class="caption"></div>
                <p>Category_2</p>
            </a>
        </div>
    </div>

<div class="col-md-12 "  style="text-align:center; ">
    <table id="data-table" class="display"  cellspacing="0"
       width="100%"  >
        <thead>
            <tr>
                <th  style="text-align:center; ">Product</th>
                <th  style="text-align:center; ">Size</th>
                <th  style="text-align:center; ">Price</th>
                <th  style="text-align:center;">Location</th>
            </tr>
        </thead>
    </table>

<script>
    $(document).ready(function(){
  $('#data-table').DataTable({
  "processing": true, "serverSide": true, "ajax": {url: 'product.php',
  type: 'POST'}, "lengthMenu": [ [10, 25, 50,100], [10, 25, 50,100] ],
  responsive: true,

      "columns": [

         {"data": "product"},
         {"data": "size"},
         {"data": "price"},
          {"data": "location"}
     ]

    });
  });