Utilizzo di jQuery Datatables con layout non tabellare

Question

La mia app richiede agli amministratori di creare sottogruppi di nomi da un elenco di oltre 1000 nomi disponibili. Mi piacerebbe che loro vedessero tutti i nomi E fossero in grado di restringere gli oggetti visibili digitando una casella di ricerca in modo che potessero scegliere cosa volere. Il risultato potrebbe essere un elenco o una matrice separati da virgola. Il comportamento scelto/Select2 non è utile in questo caso.

La soluzione ideale sarebbe avere qualcosa come i Datatables in cui è possibile visualizzare tutti gli elementi e restringere i risultati in tempo reale ma, poiché ho solo nomi, preferirei un layout di griglia per massimizzare lo spazio, non un layout di tabella. Posso usare i datatables NON su una tabella ma su altri elementi?

Inoltre, sebbene non sia collegato a database, è possibile indicarmi altre soluzioni per ottenere questo scenario di filtraggio in tempo reale di elementi visibili su una pagina?

Answer 1

È possibile, qualche tempo fa lo stavo usando per la stessa cosa. È necessario sostituire l'output di riga in row-callback function e apportare alcune modifiche html in init-callback.

Ecco vetrina di quel lavoro (non la mente per le immagini che sono casuali;):

È necessario disporre che i dati in formato JSON un inserto a DataTable, dopo che cambia l'output di rendering per ogni record. È un po 'di hack ma è gestibile.

EDIT Esempio: (che hanno alcuni spigoli ma funziona;)

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