使用非表格布局的 jQuery 数据表

Question

我的应用程序要求管理员从包含 1000 多个可用名称的大型列表中创建名称子组。我希望他们能够看到所有名称，并能够通过在搜索框中键入内容来缩小可见项目的范围，以便他们可以挑选他们想要的内容。结果可能是逗号分隔的列表或数组。 Chosen/Select2 行为在这种情况下没有用。

理想的解决方案是使用 Datatables 之类的东西，您可以在其中查看所有项目并实时缩小结果范围，但是，因为我只有名称，所以我更喜欢网格布局以最大化 space，不是 table 布局。 我可以不在 table 而在任何其他元素上使用数据 table 吗？

此外，虽然与数据无关，但您能否指出其他解决方案来实现这种实时过滤页面上可见元素的方案？

Answer 1

有可能，前段时间我用它做同样的事情。您需要覆盖 row-callback function and do some html modification in init-callback.

中行的输出

这是该作品的展示案例（不要介意图片是随机的；）：

您需要将该数据设置为 json 格式并将其插入到数据表中，然后更改每条记录的渲染输出。这有点乱七八糟，但它是可以管理的。

编辑示例：（它有一些粗糙的边缘，但它有效；）

$('#example').dataTable({
  "data": [
    // some rows data
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A']
  ],
  "columns": [
    { "title": "Engine" },
    { "title": "Browser" },
    { "title": "Platform" },
    { "title": "Version", "class": "center" },
    { "title": "Grade", "class": "center" }
  ],
  "initComplete": function(settings, json) {
    // show new container for data
    $('#new-list').insertBefore('#example');
    $('#new-list').show();
  },
  "rowCallback": function( row, data ) {
    // on each row callback
    var li = $(document.createElement('li'));
    
    for(var i=0;i<data.length;i++) {
      li.append('<p>' + data[i] + '</p>');
    }
    li.appendTo('#new-list');
  },
  "preDrawCallback": function( settings ) {
    // clear list before draw
    $('#new-list').empty();
  }
});

ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

ul li {
  display: inline-block;
  width: 100px;
  border: 1px #CCC solid;
  padding: 10px;
  margin: 3px;
}

ul li p {
  margin-top: 2px;
  margin-bottom: 2px;
}

.dataTables_length {
  width: 50%;  
}

.dataTables_filter {
  width: 50%;  
}

<link href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>


<table id="example" class="display" style="display: none;" cellspacing="0" width="100%"></table>
<ul id="new-list" style="display: none;" />

使用非表格布局的 jQuery 数据表

Using jQuery Datatables with non tabular layout

jquery

datatables

jquery-datatables