Using jQuery Datatables with non tabular layout

Question

My app requires administrators to create sub-groups of names from a large list of 1000+ available names. I'd like them to see all the names AND be able to narrow the visible items by typing in a search box so they can cherry pick what they want. The result could be a coma separated list or array. The Chosen/Select2 behaviour is not usefull in this case.

The ideal solution would be to have something like Datatables where you can see all items and narrow the results in realtime but, because I only have names, I would prefer a grid layout to maximize space, not a table layout. Can I use datatables NOT on a table but on any other elements?

Also, although not databales related, can you point me to other solutions to achieve this scenario of real time filtering visible elements on a page?

Answer 1

It is possible, some time ago I was using it for same thing. You need to override output of row in row-callback function and do some html modification in init-callback.

Here is show case of that work (don't mind for images they are random ;) :

You need to have that data in json format an insert it to datatables, after that change render output for every record. It is a little bit of hack but it is manageable .

EDIT Example : (it have some rough edges but it works ;)

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