Jquery数据到响应数据表 [英] Jquery Datatable to responsive data tables

问题描述

我是数据表的新手，从来没有创建响应数据表。所以我可能会问很多帮助。

这里是 link 用于JQuery数据表可编辑。我想创建它响应。第一件事我删除了它的容器宽度现在它的大小调整到平板电脑大小屏幕，看起来确定。

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

但是在屏幕尺寸以下，表是乱糟糟的。 >

我想要数据表的工作方式像这个。

我无法给你我的网站链接，因为它在网站管理面板。

任何想法/有用的链接或方向将对我有所帮助。非常感谢！

解决方案

在响应式设计中，大部分的技巧都是由百分比值直到某一点为止， @media查询。

对于你的例子，只是用于th和td标签的百分比我相信你可以管理它，但如果它小于40em然后完全不同的CSS采取如下控制： / p>

  //当宽度小于40em时，您也可以使用px 
 @media（max-width：40em）
 {
 //将每个项目显示为一行
 .movi​​e-list td，.movi​​e-list th {
 width：100％; 
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
 float：left; 
 clear：left; 
} 
 //为th和.titles显示它们为一个大的大胆的标题与不同的背景颜色
 .movi​​e-list tbody th，.movi​​e-list tbody td.title {
显示：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）; 
} 
 
 //只有这样才是为了覆盖以前的css 
 .movi​​e-list tbody th {
 margin-top：0; 
 text-align：left; 
} 
} 
  

希望这个帮助这只是给一些开始; / p>

这里你的鱼伙伴:)只需使用开发者工具栏并添加h2 Live Example标签下的代码;

 < style> 
 //检查它是否是一个小设备ipad iphone android等
 // google例如'css媒体查询移动
 @media（max-width：40em）{
 //只是显示第二行使用你的技能
 table＃example tr.even 
 {
 border：2px solid red; 
} 
 //完全一样的显示td为行
 //使用css选择器你可以隐藏第一个显示第二个像标题etc 
 table＃example tr td 
 {
 background-color：white; 
 width：90％; 
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 -sizing：border-box; 
 float：left; 
 clear：left; 
} 
 //删除thead，因为我们不需要它
 //类似于页脚以及
表＃示例thead 
 {
 display：none; 
} 
 //隐藏不需要的分页元素
 table＃示例〜div.fg-toolbar div＃example_info，
 table＃example〜div.fg-toolbar div a 
 {
 display：none; 
} 
 //只显示下一个和上一个
 //这不是我真正想要使它更多的tabable使它更大，试图覆盖一半的行。 
 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> 
  

至于我可以告诉编辑和添加的东西，因为这是完全css只是你有以深入挖掘。

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!

解决方案

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.

这篇关于Jquery数据到响应数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！