jquery - jQuery的数据表与BootStrap？ mvc4

我现在已经开发了Jquery数据表，现在我想对其应用BootStrap功能。

我需要根据查看端口的不同来显示列，比如说我最初是在桌面和Tab上做的。

我的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 TABLE：// //我在这里填入mt数据

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

编辑：在提到的代码中，我想隐藏取决于VIEW PORT的Domain。我怎样才能做到这一点

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

在这里，我正在尝试将成功地将白色背景色应用于动态生成的列的事情。但我不知道class =“ hidden-xs”通常会根据查看端口的大小隐藏列变量

问候

最佳答案

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

更新：

您可以像这样在td上添加CSS类：

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

        });