Question

尝试使用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   |
+--------------+-------------+

等等因此，它具有“速度”和“计数”的总体表标题，然后是“年”的子标题。

Answer 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;
                }
            });
        }
    });
});

Answer 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>

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

2 个答案: