如何使Datatables看起来像一个网格？

Question

我尝试使用Datatables创建一个包含以下产品列表的网格。

但每行只显示 1张卡。如何让它看起来像每行只有3张卡的网格？

HTML

<table id="products_table" class="table is-indent tablesaw" cellspacing="0" width="100%" style="font-size: medium;">
  <thead>
    <tr>
      <th class="cell-600" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3" style="font-weight: 600;">Product Name</th>
    </tr>
  </thead>
</table>

JS

function loadClick() {
  var row = "";
  t.row.add(['<td><div class="demo-card-wide mdl-card mdl-shadow--2dp"><div class="mdl-card__actions mdl-card--border">' + name +  '</div></div></td>'])
    .node().id = ProductID;

  t.draw(false);
  $("#products_table_processing").css("visibility", "hidden");
}

$(document).ready(function () {
  var table = $('#products_table').DataTable({
    "processing": true,
    "language": {
      "processing": "<img src='http://i.imgur.com/G6ZMC0N.gif' >"
    }
  });
  $("#products_table_processing").css({ "display": "block", "z-index": 10000 })

  loadClick();
});

注意：

如果无法使用数据表完成。那么请建议我另一种方法来做到这一点。但我需要搜索＆amp;分页选项。