Bootstrap隐藏一列？一切都做小问题？ [英] Bootstrap hiding a column ? everything done small issue ?
问题描述
您好b $ b
我正在尝试为可变设备设计我的JQUERY DATATABLE。所以我想在表格中隐藏一些列。因此，为了更好的响应能力及其优势，我选择BOOTSTRAP 3.0
我做了一切，但我无法找到逻辑如何隐藏列这是在我的HTML表格中的HEAD标签下动态生成的。
这是我更好理解的代码：
Hi
I am trying to design my JQUERY DATATABLE for variable devices . So i want to hide some columns in my table . So for better Responsiveness and its advantages i choose BOOTSTRAP 3.0
Well i done everything but i am unable to FIND logic how to hide columns which are DYNAMICALLY generated under HEAD tags in my HTML table .
Here is my code for better understanding :
<script type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'DataProvider',
"bJQueryUI": true,
"aoColumns": [
{
"sName": "ID"
},
{ "sName": "COMPANY_NAME" },
{ "sName": "ADDRESS" },
{ "sName": "TOWN" }
]
});
});
</script>
}
<div class="table-responsive">
<table id="myDataTable" class="table">
<thead>
<tr>
<th>ID</th>
<th class="hidden-xs">Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<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 td:nth-child(2) // I AM MAKING 2ND COLUMNS RED IF I INCORPORATE hidden-xs here while making column red means i guess will succeed but how to do it
{
background: red;
}
</style> // added style tag with some css . i am able to display background color of respective column but i need to hide with bootstrap class="hidden-xs" and i donno how to
CHROME INSPECT ELEMENT :
<tr class="odd" id="17"> //Class odd is used when id is odd likely even class for even id
<td class=" sorting_1">17</td>
<td class=""><a href="Home/Details/17">Emkay Entertainments</a></td> // yes i want to hide this
<td class="">Nobel House, Regent Centre</td>
<td class="" title="Click to select town">Lothian</td>
</tr>
在上面的代码中看到你无法找到TD标签，但是当我的代码执行时，插件将获得数据，即在TH标签下各自的TD标签..
我尝试了什么：我知道它不适用于TD'S STILL我尝试过如此使用css class hidden-xs on TH标签当我减少我的浏览器大小时，TH标签隐藏但不包含其下的列。
我需要建议隐藏动态生成的第二列或多列。 。
关于
In the above code see you cant find the TD tags but when my code executes the plugin will get the data i.e under TH tags with respective TD's ..
What i tried : I know it wont work for TD'S STILL I tried so used css class hidden-xs on TH Tag when i reduce my browser size the TH tag is hiding but not the columns under it .
I NEED SUGGESTIONS TO HIDE 2ND OR WATEVER COLUMNS WHICH ARE DYNAMICALLY GENERATED . .
regards
推荐答案
（ document ）。ready（ function （）{
(document).ready(function () {
（' ＃myDataTable'）。dataTable（{
bProcessing： true ，
bServerSide： true ，
< span class =code-string> sAjaxSource：' DataProvider'，
bJQueryUI： true ，
aoColumns：[
{
sName： ID
}，
{ sName： COMPANY_NAME }，
{ sName： ADDRESS}，
{ sName： TOWN}
]
}）;
}）;
< / script>
}
< div class = 表格响应>
< table id = myDataTable class = table>
< thead>
< tr>
< th> ID < / th >
< th class = hidden-xs>公司名称< / th >
< th>地址< / th >
< th> Town < / th >
< / tr >
< / thead >
< tbody>
< / tbody >
< / table >
< / div >
< style>
.table-responsive tr td：nth-child（ 2 ）{
visibility：hidden;
背景：红色;
仓位：绝对;
}
.table-responsive tr th：nth-child（ 2 ）{
visibility：hidden;
仓位：绝对;
背景：白色;
}
table＃myDataTable tbody td：nth-child（ 2 ） // 我制作第二列红色如果我将hidden-xs包含在这里，同时使列红色意味着我想会成功但是如何做到
{
背景：红色;
}
< / style > // 添加了一些带有css的样式标记。我能够显示相应列的背景颜色，但我需要隐藏bootstrap class =hidden-xs，我不知道如何
CHROME检查元素：
< tr class = odd id = 17> // 如果id为奇数，则使用类奇数甚至偶数为id的类
< td class = sorting_1> 17 < / td >
< td class = >< a href = Home / Details / 17> Emkay Entertainments < / a > < / td > // 是的我想隐藏这个
< td class = > Nobel House，Regent Center < / td >
< td class = title = < span class =code-string> 点击选择城镇> Lothian < / td >
< / tr >
('#myDataTable').dataTable({ "bProcessing": true, "bServerSide": true, "sAjaxSource": 'DataProvider', "bJQueryUI": true, "aoColumns": [ { "sName": "ID" }, { "sName": "COMPANY_NAME" }, { "sName": "ADDRESS" }, { "sName": "TOWN" } ] }); }); </script> } <div class="table-responsive"> <table id="myDataTable" class="table"> <thead> <tr> <th>ID</th> <th class="hidden-xs">Company name</th> <th>Address</th> <th>Town</th> </tr> </thead> <tbody> </tbody> </table> </div> <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 td:nth-child(2) // I AM MAKING 2ND COLUMNS RED IF I INCORPORATE hidden-xs here while making column red means i guess will succeed but how to do it { background: red; } </style> // added style tag with some css . i am able to display background color of respective column but i need to hide with bootstrap class="hidden-xs" and i donno how to CHROME INSPECT ELEMENT : <tr class="odd" id="17"> //Class odd is used when id is odd likely even class for even id <td class=" sorting_1">17</td> <td class=""><a href="Home/Details/17">Emkay Entertainments</a></td> // yes i want to hide this <td class="">Nobel House, Regent Centre</td> <td class="" title="Click to select town">Lothian</td> </tr>
在上面的代码中看到你无法找到TD标签，但是当我的代码执行时，插件将获得数据，即在TH标签下各自的TD标签..
我尝试了什么：我知道它不适用于TD'S STILL我尝试过如此使用css class hidden-xs on TH标签当我减少我的浏览器大小时，TH标签隐藏但不包含其下的列。
我需要建议隐藏动态生成的第二列或多列。 。
问候
In the above code see you cant find the TD tags but when my code executes the plugin will get the data i.e under TH tags with respective TD's ..
What i tried : I know it wont work for TD'S STILL I tried so used css class hidden-xs on TH Tag when i reduce my browser size the TH tag is hiding but not the columns under it .
I NEED SUGGESTIONS TO HIDE 2ND OR WATEVER COLUMNS WHICH ARE DYNAMICALLY GENERATED . .
regards
我不确定Bootstrap但是您可以使用Javascripts将相同的类应用于第二个TD表格已创建。
I am not sure of Bootstrap but you can simply apply the same class to second TD using the Javascripts after the table is created.
这篇关于Bootstrap隐藏一列？一切都做小问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
