Używanie datowników jQuery z układem innym niż tabelaryczny

Question

Moja aplikacja wymaga od administratorów tworzenia podgrup nazw z dużej listy ponad 1000 dostępnych nazw. Chciałbym, aby zobaczyli wszystkie nazwiska I byli w stanie zawęzić widoczne elementy, wpisując w polu wyszukiwania, aby mogli wybrać coś, czego chcą. Rezultatem może być lista lub tablica rozdzielona przecinkami. Zachowanie Chosen/Select2 nie jest w tym przypadku użyteczne.

Idealnym rozwiązaniem byłoby posiadanie czegoś w stylu Datatables, w którym można zobaczyć wszystkie elementy i zawęzić wyniki w czasie rzeczywistym, ale ponieważ mam tylko nazwy, wolałbym układ siatki, aby zmaksymalizować przestrzeń, a nie układ tabeli. Czy mogę korzystać z datATables NIE dla tabeli, ale z innych elementów?

Co więcej, mimo że nie dotyczą one danych, czy możesz wskazać mi inne rozwiązania pozwalające uzyskać ten scenariusz w czasie rzeczywistym, filtrując widoczne elementy na stronie?

Answer 1

Możliwe, że jakiś czas temu używałam go do tego samego. Musisz zastąpić wyjściowy wiersz w row-callback function i zrobić jakąś modyfikację html w init-callback.

Oto pokaz przypadek tej pracy (nie przeszkadza dla obrazów są one losowo;):

Trzeba mieć te dane w formacie JSON wkładka go DataTables, że po zmień wyjście renderowania dla każdego rekordu. To trochę hack, ale jest to wykonalne.

EDIT Przykład: (to jakieś ostre krawędzie, ale to działa;)

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