当使用数据在表格中显示时,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...
我需要帮助。请告诉我是否可能,或者有任何替代方法可以实现相同的目的。
最佳答案
我不知道您的数据表问题的答案,但这里有一些您可能感兴趣的图像搜索插件
关于javascript - 使用数据表创建可搜索的图库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57704042/