C#web窗体使用bootstrap 中的datatable从Oracle数据库获取数据,显示一个带图片的列表,换一种方式,上面的方式不行
时间: 2024-03-01 16:56:05 浏览: 145
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
如果您不想使用Bootstrap的dataTable,可以考虑使用jQuery的DataTable插件,它也提供了丰富的特性和配置选项。
下面是一个简单的示例,演示如何从Oracle数据库获取数据并使用jQuery DataTable显示带图片的列表:
1. 在页面中引入jQuery、jQuery DataTable和相关CSS文件:
```html
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>
```
2. 在页面中创建一个HTML表格,并为其指定一个ID:
```html
<table id="myTable" class="display">
<thead>
<tr>
<th>图片</th>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```
3. 在页面中编写JavaScript代码,使用jQuery DataTable从Oracle数据库获取数据并将其显示在表格中:
```javascript
$(document).ready(function() {
$('#myTable').DataTable({
"ajax": {
"url": "your-api-url",
"dataSrc": ""
},
"columns": [
{ "data": "image" },
{ "data": "name" },
{ "data": "description" }
],
"columnDefs": [
{
"targets": 0,
"render": function (data, type, row) {
return '<img src="' + data + '" />';
}
}
]
});
});
```
其中,`ajax`选项指定了从服务器获取数据的URL,`columns`选项指定了表格中每列数据的来源,`columnDefs`选项指定了如何渲染表格中的图片列。
请注意,上述代码仅为示例代码,您需要根据自己的实际情况进行相应的修改。
阅读全文