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 TABLE：//这里我得到了数据填充

<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。我怎么能实现这个

编辑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”，它通常根据视口大小隐藏列变量

此致

Answer 1

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" }
            ]

        });

使用BootStrap的jquery数据表？ mvc4

1 个答案: