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

Question

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

理想的解决方案是拥有像Datatables这样的东西，你可以看到所有项目并实时缩小结果，但是，因为我只有名字，我更喜欢网格布局来最大化空间，而不是表格布局。 我可以不在桌面上使用数据表，而是使用任何其他元素吗？

此外，虽然没有相关的数据库，你能指点我实现这种实时过滤页面上可见元素的方案的其他解决方案吗？

Answer 1

有可能，前段时间我用它来做同样的事情。您需要覆盖row-callback function中的行输出，并在init-callback中进行一些html修改。

这是展示该作品的情况（不介意它们是随机的图像）：

您需要以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;" />