Sử dụng jQuery Datatables với bố cục không dạng bảng

Question

Ứng dụng của tôi yêu cầu quản trị viên tạo các nhóm phụ tên từ danh sách lớn gồm hơn 1000 tên có sẵn. Tôi muốn họ xem tất cả các tên VÀ có thể thu hẹp các mục hiển thị bằng cách nhập vào hộp tìm kiếm để họ có thể chọn món anh đào họ muốn. Kết quả có thể là danh sách hoặc mảng được phân tách bằng dấu phẩy. Hành vi Lựa chọn/Chọn2 không hữu ích trong trường hợp này. Giải pháp lý tưởng là có thứ gì đó như Datatables, nơi bạn có thể xem tất cả các mục và thu hẹp kết quả trong thời gian thực nhưng, vì tôi chỉ có tên, tôi thích bố cục lưới để tối đa hóa không gian, không phải bố cục bảng. Tôi có thể sử dụng datatables KHÔNG trên bàn nhưng trên bất kỳ yếu tố nào khác không?

Ngoài ra, mặc dù không liên quan đến dữ liệu, bạn có thể chỉ cho tôi các giải pháp khác để đạt được tình huống này trong thời gian thực lọc các thành phần hiển thị trên trang không?

Answer 1

Có thể, một số thời gian trước đây tôi đã sử dụng nó cho cùng một điều. Bạn cần ghi đè đầu ra của hàng trong row-callback function và thực hiện một số sửa đổi html trong init-callback.

Đây là chương trình trường hợp của tác phẩm đó (không nhớ cho hình ảnh họ là ngẫu nhiên;):

Bạn cần có dữ liệu ở định dạng json một chèn nó vào datatables, sau đó thay đổi kết quả đầu ra cho mỗi bản ghi. Đó là một chút hack nhưng nó có thể quản lý được.

EDIT Ví dụ: (nó vẫn chưa hoàn chỉnh nhưng nó hoạt động;)

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