1

I am new to data tables and never created a responsive data tables. So i may be asking much help.

Here is link for JQuery data tables editables. I want to create it responsive. First thing i did i removed its container width now its resizing to tablet size screen and looks ok.

#fw_container {
    margin: 0 auto;
    max-width: 90%;
    padding-top: 2em;
}
.full_width {
    width: 90%;
}

But on the screen size below than that tables are messing up.

I want data table to work like this.

I can't give you my site link where i have actually implemented because its in site admin panel.

Any thoughts/helpful links or direction will be helpful to me. Thanks a lot!

Improve this question
2
  • 1
    i suggest you to use responsive data tables... instead of converting it to responsive... Commented Mar 23, 2014 at 7:04
  • @AamirShahzad i have already implemented those now no turn around... only solution is to convert to responsive... Commented Mar 23, 2014 at 7:07

2 Answers 2

Reset to default
1

In responsive design most of the tricks done by percentage values until a certain point and after that we start using @media queries.

For your example just percentages used for the th and td tag I belive you can manage it but if it is smaller than 40em then completely different CSS take control like below;

//when width less than 40em you can also use px
@media (max-width: 40em)
{
   // show every item as a line
   .movie-list td, .movie-list th {
   width: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   clear: left;
  }
    //for th and .titles display them as a big bold title with different background color
    .movie-list tbody th, .movie-list tbody td.title {
    display: block;
    font-size: 1.2em;
    line-height: 110%;
    padding: .5em .5em;
    background-color: #fff;
    color: #77bbff;
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
    box-shadow: 0 1px 6px rgba(0,0,0,.1);
    }

    //for th only this is only for margin to override previous css
    .movie-list tbody th {
       margin-top: 0;
       text-align: left;
     }
}

hope this help this is just give some start;

here your fish mate :) just use developer tool bar and add the code under the h2 Live Example tag;

<style>
// check if it is a small device ipad iphone android etc.
// google for example 'css  media queries for mobile"
@media (max-width: 40em) {
  // just did something to display second row use your skills
  table#example tr.even
  {
     border: 2px solid red;
  }  
// exactly the same with other one to display td as rows
// with css selector you can hide first one display 2nd one like a title etc
table#example tr td 
  {
  background-color:white;
     width: 90%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   clear: left;
  }  
  // remove the thead as we dont need it
  // you should do similar to the footer as well
  table#example thead
  {
     display:none;
  }  
  // hide unwanted pagination elements
  table#example ~ div.fg-toolbar div#example_info, 
    table#example ~ div.fg-toolbar div a
  {
  display:none;
  }
  // and only display next and prev
  // it s not what I actually wanted to make it more tab able make it bigger and try to cover half of the row.  
  table#example ~ div.fg-toolbar div a#example_previous,
  table#example ~ div.fg-toolbar div a#example_next
  {
  display:inline-block;
  width:46% !important;

  }
}

</style>

As far as I can tell the edit and add stuffs are working as this is completely css just you have to dig deeper.

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

2 Comments

thanks @onur i have familiar with media queries - but issue is how to i re-oganize (break) datatable like this view.jquerymobile.com/1.3.1/dist/demos/examples/tables/… for mobile screen & other small screens
@Firebug well can you provide some actual code from your solution so we find the rest of it.
0

You can do it with jquery only. fnAdjustColumnSizing function automatically adjust the with of the headers. When you resize the window we use this funtion.

$(window).resize(function(){
   //Redraw datable
   $('#your-table').dataTable().fnAdjustColumnSizing();//Automatically sets header size
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.