Question

我正在创建一个表，其中第一列是列标题，第二列是列数据。现在我不知道是否有可能通过c＃或javascript获取数据。以下是示例

<html> 
<body> 
<h1>Small Bakery Products</h1> 
<table border="1" width="100%"> 
<tr>
<td>Id</td> 
<td>@data.id</td> 
</tr>
<tr>
<td>Name</td> 
<td>@data.Name</td> 
</tr>
<tr>
<td>Description</td> 
<td>@data.Description</td> 
</tr>
<tr>
<td>Price</td> 
<td>@data.Price</td> 
</tr>
</table> 
</body> 
</html>

Answer 1

var sampleData = [{"Id":"1000", "Name":"Sample Name 1", "Description":"sample description 1"},
                  {"Id":"1001", "Name":"Sample Name 2", "Description":"sample description 2"},
                  {"Id":"1002", "Name":"Sample Name 3", "Description":"sample description 3"}];


$(document).ready(function(){

var table = $('<table border="1"></table>');
  for(var i = 0;i<sampleData.length;i++){
    
  var item = sampleData[i];
    
    table.append('<tr><td>Id</td><td>'+item.Id+'</td><tr>');
    table.append('<tr><td>Name</td><td>'+item.Name+'</td><tr>');
    table.append('<tr><td>Description</td><td>'+item.Description+'</td><tr>');
  }
  
  $('#container').append(table);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="container"></div>

Answer 2

您可以使用Datatable插件填充表格。

请看下面的例子。

<table id="example" class="display" cellspacing="0" width="100%">
 <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
     </tr>
 </thead>
</table>

现在使用datatable初始化您的表。

为此你需要一些样式和脚本引用，如。

<script src="~/Scripts/jquery-1.7.2.js" ></script>
<script src="~/Scripts/DataTables/jquery.dataTables.js" ></script>
<link rel="stylesheet" type="text/css" href="~/Content/DataTables/css/jquery.dataTables.css">

$(document).ready(function () {
    $('#example').dataTable({
        "processing": true,
        "serverSide": true,
        "info": true,
        "stateSave": true,
        "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
        "ajax":{
            "url": "@string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Home/AjaxGetJsonData",
            "type": "GET"
        },
        "columns": [
            { "data": "Name", "orderable" : true },
            { "data": "Position", "orderable": false },
            { "data": "Office", "orderable": true }
        ],
        "order": [[0, "asc"]]
    });
});

现在您想知道数据来自哪里。但请看这个陈述。

"ajax":{
        "url": "@string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Home/AjaxGetJsonData",
        "type": "GET"
    },

这些ajax调用将从方法 Home / AjaxGetJsonData 中获取数据。

这里你没有提到你正在使用哪个框架，所以我假设你使用的是MVC，下面是从后端获取数据的代码。

public JsonResult AjaxGetJsonData()
    {
        Database db = new Database();

        var userList = db.YourTable.Select(m => new
        {
            m.Name,
            m.Position,
            m.Office
        });

        return Json(new
        {
            data = userList
        }, JsonRequestBehavior.AllowGet);
    }

所以你实际上在做什么，

创建仅包含标题的表格。
然后初始化数据表
调用名为AjaxGetJsonData（）的动作，返回所需的jsondata。
最后填充了您的表格。

下面的

是可用于检查示例和语法的网站。

https://datatables.net/

你仍然面临任何问题，然后在我的回答下面发表评论..

从数据库中获取表的第二列数据

2 个答案: