Question

这是一个我希望与DataTables插件一起存档的结构。

正如您所看到的那样，它占据了3列。

以下html 中断数据表排序功能。表格看起来很偏僻。

这里有一个不同数据的例子，但想法是一样的。

<tr>
  <td colspan="3">
     <table cellpadding="0" cellspacing="0">
         <tr>
           <td >Some very long lorem ipsum text</td>
         </tr>
         <tr>
           <td>Angelica Raaaaamos</td>   
           <td>Accountant</td>
           <td>Tokyo</td>
         </tr>
    </table>
  </td>

  <td>33</td>
  <td>2008/11/28</td>
  <td>$162,700</td>
</tr>

更新

灰色文字不是一个组。表格中的每个项目（每一行）都应该 包括

Answer 1

你可以从这里得到一个想法：
尝试将td隐藏为<td style='display:none;'></td>

＆＃13;

$( function(){
	$('#id-table').DataTable();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>


<table id='id-table' border='1'>
<thead>
<tr>
    <th>Angelica Raaaaamos</th>   
    <th>Accountant</th>
    <th>Tokyo</th>
  </tr>
</thead>
<tbody>
  <tr>
   <td colspan="3">Some very long lorem ipsum text</td>
   <td style='display:none;'></td>
   <td style='display:none;'></td>
  </tr>
  <tr>
    <td>Angelica Raaaaamos</td>   
    <td>Accountant</td>
    <td>Tokyo</td>
  </tr>
  </tbody>
</table>

＆＃13;

您获得的结果（反向行）是bcoz，DataTable按第一列分类您可以更改。

Answer 2

您可以使用RowGroup扩展程序，它可以按给定的数据点对行进行分组。

RowGroup

对表中的行进行分组的功能可以让最终用户快速轻松地查看所显示数据的结构，并向其显示每个组中显示的数据摘要。 RowGroup将此功能添加到DataTables，能够自定义DataTable中显示的开始和结束分组行，使您可以集成汇总数据以完全适合您的站点。

使用rowGroup选项作为对象，您可以使用几个选项来定义行组的外观和源数据。对于所有可用选项，请查看here。

这是一个例子，确定你会明白这个想法。 ;）

var dataSet = [
  [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800", "Foo foo foo foo bla bla" ],
  [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750", "Some very long lorem ipsum text" ],
  [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000", "Bar bar bar bar bla bla" ],
]

$('#example').DataTable({

  data: dataSet,
  columns: [
    { title: "Name" },
    { title: "Position" },
    { title: "Office" },
    { title: "Extn." },
    { title: "Start date" },
    { title: "Salary" },
  ],
  rowGroup: {
    startRender: function(row, group) {
      if(typeof group == "string") {
        return $('<tr/>')
          .append('<td colspan="6"><span>' + group + '</span></td>');
      }
    },
    endRender: null,
    className: 'table-group',
    dataSrc: 6
  }

});

table.dataTable tbody th, table.dataTable tbody .table-group td {
    padding: 0;
}

table.dataTable tbody th, table.dataTable tbody .table-group td span {
    padding: 8px 10px;
    display: block;
    color: silver;
}

table.dataTable tbody tr:nth-child(4n),
table.dataTable tbody tr:nth-child(4n-1) {
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/rowgroup/1.0.0/css/rowGroup.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.0.0/js/dataTables.rowGroup.min.js"></script>

<table id="example" class="" cellspacing="0" width="100%"></table>

Answer 3

在那里使用两个额外的空白td。像：

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class File extends Model
{
    protected $table = 'files';

    protected $fillable = [
        'mimi_type',
        'path',
        'width',
        'height',
        'size'
    ];

    /**
     * One-to-Many inverse relations with Filegroup.
     *
     * @foreignModel Filegroup
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function group()
    {
        return $this->belongsTo('App\Models\Filegroup', 'filegroup_id');
    }
}

如果不起作用，则在样式中使用宽度。像：

class CreateArticlesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('image_id');
            $table->text('text');
            $table->string('title');
            $table->integer('like_count');
            $table->integer('view_count');
            $table->integer('comment_count');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('articles');
    }
}

Answer 4

我会简单地将其放在评论中，但由于我的声誉太低，我建议您查看this

在drawCallback中，您必须在您希望它所在的行之前附加<td>。

如果我有你的jQuery代码，我可能会更具体。

如何在DataTables表中嵌套2行？

4 个答案: