C#使用bootstrap中的datatable控件中的formatter来格式化显示数据库中的图片
时间: 2024-03-09 17:45:31 浏览: 138
C#实现格式化数据功能
要在C#中使用Bootstrap中的Datatable控件中的formatter来格式化显示数据库中的图片,你需要使用以下步骤:
1. 在HTML中使用Datatable控件,并且设置formatter方法:
```html
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Image</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="path/to/image1.jpg" /></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<!-- more rows -->
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable({
"columnDefs": [{
"targets": 0,
"render": function(data, type, row) {
return '<img src="' + data + '" />';
}
}]
});
});
</script>
```
2. 在C#中创建一个Web服务,从数据库中获取图片路径和其他数据,并将其返回给HTML页面。
```csharp
[WebMethod]
public string GetDatatableData() {
string connectionString = "your_connection_string_here";
SqlConnection connection = new SqlConnection(connectionString);
connection.Open();
string sql = "SELECT path_to_image, name, position, office, age, start_date, salary FROM employees";
SqlCommand command = new SqlCommand(sql, connection);
SqlDataReader reader = command.ExecuteReader();
DataTable datatable = new DataTable();
datatable.Load(reader);
connection.Close();
string json = JsonConvert.SerializeObject(datatable);
return json;
}
```
3. 在HTML页面中调用Web服务,获取数据并将其加载到Datatable控件中。
```html
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Image</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
$(document).ready(function() {
$.ajax({
type: "POST",
url: "WebService.asmx/GetDatatableData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
var table = $('#example').DataTable({
data: data.d,
columns: [{
data: "path_to_image"
}, {
data: "name"
}, {
data: "position"
}, {
data: "office"
}, {
data: "age"
}, {
data: "start_date"
}, {
data: "salary"
}],
columnDefs: [{
targets: 0,
render: function(data, type, row) {
return '<img src="' + data + '" />';
}
}]
});
}
});
});
</script>
```
这样就可以在C#中使用Bootstrap中的Datatable控件中的formatter来格式化显示数据库中的图片了。
阅读全文