Bootstrap hiding a column ? everything done small issue ?

Question

0.00/5 (No votes)

See more:

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 :

JavaScript

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

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

Posted 17-Apr-14 23:23pm

sunil gutta

Updated 18-Apr-14 10:02am

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Guruprasad.K.Basavaraju · Accepted Answer · 2014-04-18T07:17:00

Solution 1

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.

JavaScript

$(function() {
    $(".table-class tr").each(function() {
        $(this).find('td:eq(2)').addClass("hidden-xs");
    });
});

Posted 18-Apr-14 7:17am

Guruprasad.K.Basavaraju

Comments

sunil gutta 18-Apr-14 14:39pm

Hi ty for looking into .Actually TD'S are created dynamically right and i dont know how to use your above code especially where ? in my code context ? Thank you
EDIT : ADDED some more code which can actually make more clear to you . i captured the TD for one row in chrome . please look into it

Guruprasad.K.Basavaraju 18-Apr-14 15:55pm

just add the below function after creating the column filter in your script..

$(function() {
$(".table tr").each(function() {
$(this).find('td:eq(2)').addClass("hidden-xs");
});
});

sunil gutta 18-Apr-14 16:00pm

column filter ? i dont have that in my above . can you be more specific just becoz i suck big time
EDIT :once check my post i edited table#myDataTable in style tag which now working . once check details of it which i written some comments

Guruprasad.K.Basavaraju 18-Apr-14 16:10pm

Sorry.. see below..

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

});

});

$(function() {
$(".table tr").each(function() {
$(this).find('td:eq(2)').addClass("hidden-xs");
});
});
</script>

sunil gutta 18-Apr-14 16:27pm

tried but not working :( one thing i can say the above piece of code is perfect .

Guruprasad.K.Basavaraju 18-Apr-14 16:41pm

Can you try inspect element and see what class the TD has now ?

sunil gutta 18-Apr-14 16:42pm

when i keep THtag:eq(2) means its working but while TD its not working ??

Guruprasad.K.Basavaraju 18-Apr-14 16:44pm

Let me try this.

sunil gutta 18-Apr-14 16:54pm

ok . i tried giving my bootstrap class on td element directly while doing INSPECT ELEMENT on particular cell it is working perfectly . If we can get the bootstrap css reach td elements which are dynamically generated under TBODY this issue wll be done i guess

Guruprasad.K.Basavaraju 18-Apr-14 16:56pm

the below works...

var tab = $('#myDataTable').dataTable({
"sDom": 'T<"clear">lfrtip',
'fnDrawCallback': function () {
$('td:eq(1)').addClass('hidden-xs')
},
"oTableTools": {
"sSwfPath": "your path"
},

"bServerSide": true,
"sAjaxSource": 'AjaxDataProvider',
"bJQueryUI": true,
"aoColumns": [
{"sName": "ID","bVisible":false},
{
"sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return '

sunil gutta 18-Apr-14 17:04pm

oops .! it is hiding 1st row 1st column only . other columns are visible .

Guruprasad.K.Basavaraju 18-Apr-14 17:09pm

Thats what you wanted isn't it ?

sunil gutta 18-Apr-14 17:14pm

i mean to say is 1st row 1st column cell is hiding perfectly .. But when comes to row-2 every column is visible .. i want total column-1 columns to disappear from table .

Guruprasad.K.Basavaraju 18-Apr-14 17:25pm

Oh sorry, I guess I am reading everything wrong today.. you know what the best way to do this is applying the class when you create the column. Like below. Remove fnDrawCallback that you added before and just use the below one. Notice sClass in the Company_name column

var tab = $('#myDataTable').dataTable({
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": ""
},

"bServerSide": true,
"sAjaxSource": 'AjaxDataProvider',
"bJQueryUI": true,
"aoColumns": [
{"sName": "ID","bVisible":false},
{
"sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
}
},
{ "sName": "COMPANY_NAME", "sClass": "hidden-xs" },
{ "sName": "ADDRESS" },
{ "sName": "TOWN" }
]

});

sunil gutta 18-Apr-14 17:32pm

NAILED IT .!! Thank you so so much :) just in case if this option is not possible incase means i may be looking for other alternatives i.e other than jquery data-table . . uff now relaxed .now gonna fall back to table tools

Guruprasad.K.Basavaraju 18-Apr-14 17:33pm

Great..!!
Good luck..

My new article is here this week.. vote and download if you like..

http://www.codeproject.com/Articles/760609/Beginning-with-HTML-and-CSS-Part-Getting-Fanc

sunil gutta 18-Apr-14 17:42pm

wow by the look itself i am awestruck . . I like the 3D one . will download and i will do some research . TY for your efforts ty

Guruprasad.K.Basavaraju 18-Apr-14 17:44pm

thanks and good luck!!

sunil gutta 18-Apr-14 17:34pm

sClass done it . possible in future there may be a need of other things so where can i find these all attributes listed ? ?thanks

Guruprasad.K.Basavaraju 18-Apr-14 17:35pm

below link should be your bible.. do refer that often it will greatly help you.. only when you cannot figure it there you post for help..

https://datatables.net/api