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>

控制器

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/#/

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

1 个答案: