Jquery Datatable 到响应式数据表答案

【问题标题】：Jquery Datatable to responsive data tablesJquery Datatable 到响应式数据表
【发布时间】：2014-04-30 12:50:39
【问题描述】：

我是数据表的新手，从未创建过响应式数据表。所以我可能需要很多帮助。

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

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

但是在屏幕尺寸下面比那个表格更乱。

我希望数据表像 this 一样工作。

我不能给你我实际实现的站点链接，因为它在站点管理面板中。

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

【问题讨论】：

我建议您使用响应式数据表...而不是将其转换为响应式...
@AamirShahzad 我已经实现了那些现在没有转机...唯一的解决方案是转换为响应式...

标签： jquery css responsive-design datatables media-queries

【解决方案1】：

在响应式设计中，大多数技巧都是通过百分比值完成的，直到某个点，然后我们开始使用@media 查询。

对于您的示例，我相信您可以管理用于 th 和 td 标签的百分比，但如果它小于 40em，则完全不同的 CSS 会像下面那样进行控制；

//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;
     }
}

希望这只是一个开始；

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

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

据我所知，编辑和添加内容正在工作，因为这完全是 css，只是你必须更深入地挖掘。

【讨论】：

感谢 @onur 我熟悉媒体查询 - 但问题是我如何像 view.jquerymobile.com/1.3.1/dist/demos/examples/tables/… 这样为移动屏幕和其他小屏幕重新组织（破坏）数据表
@Firebug 您能否提供一些解决方案中的实际代码，以便我们找到其余部分。

【解决方案2】：

你只能用 jquery 来做。 fnAdjustColumnSizing 函数自动调整标题的大小。当您调整窗口大小时，我们使用此功能。

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

【讨论】：