带有BootStrap的jquery数据表？ mvc4

Question

我已经开发了我的Jquery数据表，现在我想将BootStrap功能应用到它。

我需要显示列不定地取决于视图端口说，最初我正在做的桌面和标签。

我的jQuery的数据表代码：

<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表：//这里我得到吨的数据填充

<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> 

编辑：在代码中提到我想隐藏域取决于查看端口。我怎样才能做到这一点

编辑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> 

像这样只有每一行数据改过来了。现在如何申请

编辑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> 

在这里，我正在尝试将成功应用背景颜色白色应用于动态生成的列。但我不知道类=“隐藏-XS”，这通常是基于视口大小隐藏列变量

问候

Answer 1

引导3具有响应表，你可以使用它的阶级是这样的：

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

下面是几个例子：

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

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

您也可以考虑尝试这些方法之一，因为较大的表是无法在手机上究竟友好即使它的工作原理：

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

更新时间：

可以添加CSS类在td是这样的：

$('#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" } 
      ] 

     });