jquery datatable with BootStrap ? mvc4

Question

I already developed my Jquery datatable now i want to apply BootStrap functionality to it .

I need to display columns variably depends upon view port say initially i am doing for desktop and tab .

My jquery datatable code :

<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 : // here i get mt data filled

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

EDIT : IN the code mentioned i want to hide Domain which depends on VIEW PORT . how can i achieve this

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

like this for every row with just change in data coming .. Now how to apply

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

HERE i am trying with things i was successful applying background color white to the dynamically generated columns . but i dont know class="hidden-xs" which usually hides column variable based on view port size

Regards

Ehsan Sajjad · Accepted Answer · 2014-04-19 13:30:36Z

3

Bootstrap 3 has responsive tables, you can use the classes of it like this:

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

Here are few examples:

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

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

You might also consider trying one of these approaches, since larger tables aren't exactly friendly on mobile even if it works:

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

Updated:

you can add css class on td like this:

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

        });

edited Apr 19, 2014 at 13:30

answered Apr 17, 2014 at 5:25

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

super cool Over a year ago

what about hinding somecolumns mate ?

Ehsan Sajjad Over a year ago

there are classes in bootstar for td that when you apply they go hidden on small screen size

super cool Over a year ago

yes i tried on <th> tag above its hiding but under <th> column data is not hinding mate becoz its getting dynamically loaded under TH tag . . is there any work around to hide the data i am getting via ajax call and sitting under respective TH tags ?? regards

Ehsan Sajjad Over a year ago

you need to add class on them bootstrap provides calsses

super cool Over a year ago

yes i added but how to hide the dynamically getting column's .once plz check the above code in thead--tr TAGS .. i am having only th's . As you know ajaxsource will fill data . i appled css class <th class="hidden-xs">Contact Name</th> but it hides just the HEADING not the column data ..

|

Collectives™ on Stack Overflow

jquery datatable with BootStrap ? mvc4

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related