使用jQuery Datatables实现非表格布局

Question

使用jQuery Datatables实现非表格布局

8

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

理想的解决方案是使用Datatables，您可以实时查看所有项目并缩小结果，但由于我只有名称，我更喜欢网格布局以最大化空间，而不是表格布局。我可以在除表格以外的任何元素上使用datatables吗？

此外，虽然与databales无关，但您能否指向其他解决方案，以实现此页面上可见元素的实时过滤场景？

- lavirius

DataTables 无论如何都会将所有内容转换为基于 div 的网格。同时，还可以查看 typeahead.js 和其他 typehead 解决方案。 - isherwood

Select2的变体也可能很有用。http://select2.github.io/examples.html - isherwood

Select2/Chosen很好，但问题在于，在这种情况下，我们希望能够全局查看整个名称列表，并根据搜索内容进行筛选。因此，我正在寻找类似Datatables的行为，但适用于任何类型的布局。 - lavirius

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikola Loncar · Accepted Answer

以前我曾经用过这种方法，你需要在row-callback函数中覆盖行输出，并在init-callback中进行一些HTML修改。

以下是展示它的案例（不要在意图片，它们是随机的 ;) ：

enter image description here

你需要将数据以JSON格式插入到Datatables中，然后更改每个记录的渲染输出。这有点像黑客技巧，但是还是可以掌控的。

编辑示例：（它有一些问题，但是它能够工作;)

$('#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;" />