<div class="tab-pane active " id="tab1">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover dTable">
                <thead>
                    <tr>
                        <th>الكشف</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $detections as $data}
                    <tr>
                        <td>  {$data.title}  </td>
                        <td>  
                            <a href="#" class="btn green-haze btn-sm discountDetails"  
                               data-id ="{$data.id}" data-cat ="1"> Details </a>
                        </td>
                    </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="tab-pane " id="tab2">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover dTable">
                <thead>
                    <tr>
                        <th> </th>
                        <th>التحليل </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $invests as $data}
                    <tr>
                        <td>  {$data.catName}   </td>
                        <td>  {$data.name}  </td>
                        <td>  
                            <a href="#" class="btn green-haze btn-sm discountDetails"  
                               data-id = "{$data.id}" data-cat = "2"> Details </a>
                        </td>
                    </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="tab-pane " id="tab3">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover dTable ">
                <thead>
                    <tr>
                        <th> </th>
                        <th>الإسم  </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $rays as $data}
                    <tr>
                        <td>  {$data.catName}   </td>
                        <td>  {$data.name}  </td>
                        <td>  
                            <a href="#" class="btn green-haze btn-sm discountDetails"  
                               data-id = "{$data.id}" data-cat = "3"> Details </a>
                        </td>
                    </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
    </div>
</div>


{literal}
<script>
    $('.dTable').dataTable();
</script>

{/literal}