title: jquery datatable with BootStrap ? mvc4
body: <p>I already developed my Jquery datatable now i want to apply BootStrap functionality to it .</p>
  
  <p>I need to display columns variably depends upon view port say initially i am doing for desktop and tab . </p>
  
  <p>My jquery datatable code :</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(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" }
              ]
  
          });
  )};
  </code></pre>
  
  <p>HTML TABLE : // here i get mt data filled </p>
  
  <pre><code>&lt;div id="demo"&gt;
  
      &lt;table  id= "myDataTable" class="display" cellpadding="0" cellspacing="0" border="0" &gt;
          &lt;thead&gt;        
  
              &lt;tr&gt;
                         &lt;th&gt;Lead Id&lt;/th&gt;
                         &lt;th&gt;Contact Name&lt;/th&gt;
                         &lt;th&gt;Contact Address&lt;/th&gt;
                         &lt;th&gt;Lead Source&lt;/th&gt;
                         &lt;th&gt;Domain&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt; 
          &lt;/tbody&gt;
  
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT : IN the code mentioned i want to hide <strong>Domain</strong> which depends on VIEW PORT . how can i achieve this </p>
  
  <p>EDIT 2 : </p>
  
  <pre><code>&lt;tr class="odd" id="19"&gt;
  &lt;td class=" sorting_1"&gt;19&lt;/td&gt;
  &lt;td class=""&gt;
  &lt;a href="Home/Details/19"&gt;Asadul Ltd&lt;/a&gt;
  &lt;/td&gt;
  &lt;td class=""&gt;Hophouse&lt;/td&gt;
  &lt;td class="" title="Click to select town"&gt;Essex&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>like this for every row with just change in data coming .. Now how to apply</p>
  
  <p>EDIT 3: </p>
  
  <pre><code>&lt;style&gt;
  .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;
      }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>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</p>
  
  <p>Regards</p>