通过控制器传递的 json 使用 jquery 和 ajax 填充表答案

【问题标题】：Populate table with jquery and ajax through json passed through controller通过控制器传递的 json 使用 jquery 和 ajax 填充表
【发布时间】：2019-06-03 10:36:24
【问题描述】：

尝试使用 jquery 和 ajax 创建一个表，但我在设置它时遇到问题，使其看起来像下面的输出。我似乎遇到的主要问题是从我的控制器获取返回以传递到我应该创建表的视图中。我不太确定如何通过控制器将数据传递到视图页面，然后对其进行操作以形成表格。我的json如下： [ { "category": 1, "speedCategory": "0-3km/h", "year": 2015, "count": 17008 }, { "category": 2, "speedCategory": "3-6km/h", "year": 2015, "count": 4,694 }, { "category": 1, "speedCategory": "0-3km/h", "year": 2016, "count": 12546 }, { "category": 2, "speedCategory": "3-6km/h", "year": 2016, "count": 500 } 等等。

这是我用来尝试返回信息的控制器： `

public class SpeedWebAPIController : ApiController
{
    private SpeedEntities db = new SpeedEntities();

    [HttpGet]
    public object GetSpeedWebAPI()
    {
        var speedCodes = (
            from ec in db.speedCodes
            join e in db.Speed
            on ec.speedTimeCode equals e.speedTimeCode
            select new
            {
                ec.category,
                ec.speedCategory,
                e.year
            })
               .GroupBy(p => new
               {
                   p.category,
                   p.speedCategory,
                   year = p.Year
               })
               .Select(p => new
               {
                   p.Key.category,
                   p.Key.speedCategory,
                   p.Key.year,
                   Count = p.Count()
               })
               .OrderBy(p => p.year)
               .ThenBy(p => p.category)
            .ToList();
        return speedCodes;
    }`

我正在尝试使用页面底部的 jquery 将其附加到我的表中： `

<div class="row">
<div class="col-4" id="table">
</div>
<script>
//Not sure how to pass in controller return and then create a jquery table 
//with this
</script>`

表格输出应如下所示：

+--------------+-------------+
|    Speed     |    Count    |
+--------------+-------------+
|             2015           |
+--------------+-------------+
| 0 to 3km/h   |    17,008   |
+--------------+-------------+
| 3km/h to 6km |    4,694    |
+--------------+-------------+
| 6km/h to 10km|    4,895    |
+--------------+-------------+
|             2016           |
+--------------+-------------+
| 0 to 3km/h   |    12,546   |
+--------------+-------------+

等等。所以它有速度和计数的整体表标题，然后是年份的子标题。

【问题讨论】：

标签： jquery ajax visual-studio

【解决方案1】：

您可以使用数据表来完成您的任务。

这叫RowGrouping，我已经为你做了一个样本here。

代码如下：

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Category</th>
            <th>Year</th>
            <th>SpeedCategory</th>
            <th>Count</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Category</th>
            <th>Year</th>
            <th>SpeedCategory</th>
            <th>Count</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>1</td>
            <td>2015</td>
            <td>0-3kmph</td>
            <td>17008</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2015</td>
            <td>3-6kmph</td>
            <td>4,694</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2016</td>
            <td>0-3kmph</td>
            <td>12546</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2016</td>
            <td>3-6kmph</td>
            <td>500</td>
          </tr>
         </tbody>
      </table>
    </div>
  </body>
</html>

Javascript：

$(document).ready( function () {
      var groupColumn = 1;
  var table = $('#example').DataTable({
        "columnDefs": [
            { "visible": false, "targets": groupColumn }
        ],
        "order": [[ groupColumn, 'asc' ]],
        "displayLength": 25,
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;

            api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                    );

                    last = group;
                }
            });
        }
    });
});

【讨论】：

【解决方案2】：

您可以在表格 tbody 中使用 jquery 动态追加返回的 json 数据。

var jsonData= $.parseJSON('{"response":[["3km/h","17,008"],["2km/h","200"]]}');
$.each(jsonData, function(i, d) {
   var row='<tr>';
   $.each(d, function(j, e) {
      row+='<td>'+e+'</td>';
   });
   row+='</tr>';
   $('#myTable tbody').append(row);
});

 <table class="table" id="myTable">
        <thead>
            <tr>
                <th>Speed</th>
                <th>Count</th>
            </tr>           
        </thead>           
        <tbody></tbody>
    </table>

【讨论】：

使用第一行（var jsonData= $.parseJSON 行），您可以在数据中进行硬编码。我怎么能改为从控制器调用函数并以这种方式返回数据？唯一的原因是我有很多条目。其次，我仍然需要将其按年分组以作为子标题。例如，它应该将速度和数量放在他们实现的年份之下。
编写一个 $.ajax 调用，在成功响应函数中，您将获得从控制器返回的数据。