要在 C# Web 应用程序
中使用 Bootstrap 的
DataTable 插件
查询数据库并显示一个包含图片的
列表，需要
进行以下步骤：
1. 首先在 HTML 文件
中引入相关的 CSS 和 JS 文件，与上面的例子相同，具体方式可以参考 Bootstrap
DataTable 官方文档。
2. 在 HTML
中创建一个表格，并为其添加一个 id 属性和 class 属性，以便在 JavaScript
中进行引用和初始化。
```html
<table id="myTable" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>图片</th>
<th>名称</th>
<th>描述</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<!-- 这里将在 JavaScript
中动态生成
数据 -->
</tbody>
</table>
```
3. 在 JavaScript
中进行 DataTable 的初始化，并通过 AJAX 请求从后端获取
数据。在获取
数据后，
使用 JavaScript 动态生成表格
中的每一行，并将图片显示在表格
中。
```javascript
$(document).ready(function() {
$('#myTable').
DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "GetDataFromDatabase.aspx", // 后端处理请求的页面
"type": "POST",
"dataType": "json"
},
"columns": [
{
"data": "img_url", // 对应图片的链接
"render": function(data, type, row, meta) {
return '<img src="' + data + '" style="width: 100px;">';
}
},
{ "data": "name" },
{ "data": "description" },
{ "data": "price" }
]
});
});
```
4. 在后端处理请求的页面（这里以 ASP.NET Web Forms 为例），
查询数据库并将结果返回给前端。可以
使用 ADO.NET 连接到
数据库，
查询数据并将结果转换为 JSON 格式。
```csharp
protected void Page_Load(object sender, EventArgs e)
{
// 构造 SQL
查询语句
string sql = "
SELECT img_url, name, description, price FROM products";
// 连接
数据库
string connectionString = ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;
using (SqlConnection connection = new SqlConnection(connectionString))
{
SqlCommand command = new SqlCommand(sql, connection);
connection.Open();
// 执行
查询
SqlDataReader reader = command.ExecuteReader();
DataTable dataTable = new
DataTable();
dataTable.Load(reader);
// 将
查询结果转换为 JSON 格式并返回给前端
string json = JsonConvert.SerializeObject(
dataTable, Formatting.Indented);
Response.Clear();
Response.ContentType = "application/json; charset=utf-8";
Response.Write(json);
Response.End();
}
}
```
这样，就可以在 C# Web 应用程序
中使用 Bootstrap 的
DataTable 插件从
数据库查询数据并显示一个包含图片的
列表了。注意，这里只是简单地介绍了实现的思路，具体实现过程可能会因为不同的开发环境和需求而有所不同。
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
