jquery datatable with BootStrap ? mvc4

Question

I already developed my Jquery datatable now i want to apply BootStrap functionality to it .

I need to display columns variably depends upon view port say initially i am doing for desktop and tab .

My jquery datatable code :

<script type="text/javascript">

    $(document).ready(function () {

            $('#myDataTable').dataTable({

            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "Home/AjaxHandler",
            "bJQueryUI": true,

            "aoColumns": [
                                    {
                                        "sName": "Lead_Id",
                                        "bVisible": false,
                                        "bSearchable": false,
                                        "bSortable": false
                                    },
                       {"sName": "Contact_Name"  }
                       },
                       { "sName": "Contact_Address" },
                       { "sName": "Lead_Source" },
                       { "sName": "Domain" }
            ]

        });
)};

HTML TABLE : // here i get mt data filled

<div id="demo">

    <table  id= "myDataTable" class="display" cellpadding="0" cellspacing="0" border="0" >
        <thead>        

            <tr>
                       <th>Lead Id</th>
                       <th>Contact Name</th>
                       <th>Contact Address</th>
                       <th>Lead Source</th>
                       <th>Domain</th>
            </tr>
        </thead>
        <tbody> 
        </tbody>

    </table>
</div>

EDIT : IN the code mentioned i want to hide Domain which depends on VIEW PORT . how can i achieve this

EDIT 2 :

<tr class="odd" id="19">
<td class=" sorting_1">19</td>
<td class="">
<a href="Home/Details/19">Asadul Ltd</a>
</td>
<td class="">Hophouse</td>
<td class="" title="Click to select town">Essex</td>
</tr>

like this for every row with just change in data coming .. Now how to apply

EDIT 3:

<style>
.table-responsive tr td:nth-child(2)  {
visibility:hidden;
background: red;
position:absolute;

}
.table-responsive tr th:nth-child(2) {
visibility:hidden;
position:absolute;
background: white;
}
table#myDataTable tbody tr:nth-child(2) // i dont know what to do here
    {
        background: red;
    }

</style>

HERE i am trying with things i was successful applying background color white to the dynamically generated columns . but i dont know class="hidden-xs" which usually hides column variable based on view port size

Regards

Answer 1

Bootstrap 3 has responsive tables, you can use the classes of it like this:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Here are few examples:

http://jasonbradley.me/bootstrap-responsive-tables/

http://elvery.net/demo/responsive-tables/

You might also consider trying one of these approaches, since larger tables aren't exactly friendly on mobile even if it works:

http://elvery.net/demo/responsive-tables/

Updated:

you can add css class on td like this:

 $('#myDataTable').dataTable({

            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "Home/AjaxHandler",
            "bJQueryUI": true,

            "aoColumns": [
                                    {
                                        "sName": "Lead_Id",
                                        "bVisible": false,
                                        "bSearchable": false,
                                        "bSortable": false
                                    },
                       {"sName": "Contact_Name"  },
                       { "sName": "Contact_Address"," sClass": "hidden-xs" },
                       { "sName": "Lead_Source", "sClass": "hidden-xs" },
                       { "sName": "Domain", "sClass": "hidden-xs" }
            ]

        });