Using jQuery Datatables with Non-Tabular Layout

Question

My application requires administrators to create subgroups of names from a large list of 1000 + available names. I would like them to see all the names and be able to narrow down the visible elements by entering in the search field so that they can choose what they want in cherry. The result may be a list or an array separated by a coma. In this case, the behavior of Chosen / Select2 is not useful.

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

Also, although not database related, can you tell me other solutions to achieve this real-time filtering scenario for the visible elements on the page?

Answer 1

Perhaps some time ago I used it for the same thing. You need to override the string output in the callback function and do some modification of the html in the INIT callback .

Here is an example of this work (do not pay attention to the images that they are random;):

You need to have this data in json format and paste it into datatables, after that change the rendering output for each record. It's a little hack, but it's manageable.

EDIT Example: (it has 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;" />