javascript - 使用数据表创建可搜索的图库

Question

当使用数据在表格中显示时，Datatable 非常有用。我喜欢它的搜索行为。我想制作一个具有相同搜索行为的图片库。

Jquery

if ($("#tbl_images_list").length) {
    // Get parameters from the current URL 
    var oTable = $('#tbl_images_list').DataTable({
        processing: true,
        serverSide: true,    

        ajax: {
            url: 'upload_images/fetch',
        },
        columns: [{
            data: null,                               
            render: function(data, type, row, meta) {
                return '<img src="' + row.image_url + '" onerror="this.src=' 
                    + 'uploads/default.png' + '" width="400" height="200">';
            },
            name: 'image_url'
        },],
    });
}

查看

<div class="body table-responsive">
    <table class="table table-bordered table-striped table-hover d-flex" id="tbl_images_list">
        <thead>
            <tr>
                <th>Image</th>   
            </tr>
        </thead>
        <tbody >                               
        </tbody>
    </table>
</div>

Controller

public function fetch() 
{
    $model = Image::select('image_url');
    return Datatables::eloquent($model)->make(true);
}

目前它只渲染一列和一行图像。我在这里能做的就是让行并排，然后一切都会很棒。让我举一个明显的例子。现在，屏幕上显示的内容如下。

| Image (column_name) |
|   Row 1 (image_1)   |
|   Row 2 (image_2)   |
.....son on............

我想要的是使行彼此相邻，我知道这是愚蠢的想法。但如果可能的话，这个想法在这里会起作用。

| Image (column_name) |
| Row 1 (image_1)  | | Row 2 (image_2) | and so on...

我需要帮助。请告诉我是否可能，或者有任何替代方法可以实现相同的目的。

Answer 1

我不知道您的数据表问题的答案，但这里有一些您可能感兴趣的图像搜索插件

https://vestride.github.io/Shuffle/

https://yiotis.net/filterizr/#/