将 JSON 数据显示到带有分页标题的表格中答案

【问题标题】：Display JSON data into a table with pagination headers将 JSON 数据显示到带有分页标题的表格中
【发布时间】：2014-02-11 05:16:49
【问题描述】：

美好的一天！

如何将我的 JSON 数据显示到表格中？这是我得到的 json 数据..

{"total":1,"per_page":6,"current_page":1,"last_page":1,"from":1,"to":1,
"data":{"id":999,
   "firstName":"user999",
   "lastName":"lastname999",
   "middleName":"middlename999",
   "company":"999 Company",
   "email":"999@gmail.com",
   "phone":"09063330756",
   "addressStreet":"999 Street",
   "addressCity":"999City",
   "addressProvince":"999Province",
   "addressPostalCode":2147483647,
   "status":null,
   "notes":"Supplier999"}]
}

现在我只是想弄清楚如何将我的数据显示到表格中。然后我将尝试对其进行分页，顺便说一下我使用 AJAX 调用。

这是我的 ajax 代码：

function search(){


var keyWord = $("#searchSupplier").val();
$.ajax({
    url: 'api/searchSupplier',
    type: 'get',
    data: {searchKey: keyWord},
    success: function(response) {

        $('table#supplierTable tbody').html("<tr><td>"+response.data+"</td></tr>");
    }
});
}

我尝试过：

console.log(response.data) = undefined

和

console.log(response) = the JSON data above.

这是我的 laravel 代码：

public function getSuppliers()
{
   $input = Input::get('searchKey');
   return Supplier::where('firstName', 'like', '%'.$input.'%')->paginate(6)->toJson();
}

提前致谢。

【问题讨论】：

响应应该可以用作对象而不是文本...添加 dataType='json'
感谢@Snowburnt 的评论，我怎样才能使它可用作对象？抱歉，我不知道该怎么做。 ://
抱歉，如果您将 dataType='json' 添加到 ajax 设置中，成功回调参数将是一个 javascript 对象，您应该能够将其用作多维键控数组
@Snowburnt 非常感谢您的帮助，这就是我的代码中缺少的内容。

标签： jquery ajax json laravel laravel-4

【解决方案1】：

如果您要手动执行此操作，则需要执行以下操作：

success: function(response){
  var html = '<table><tbody>';
  response.data.forEach(function(row){
    html += '<tr><td>' + row.id + '</td><td>' + row.firstName + ...;
  });
  html += '</tbody></table>';
  //Set some elements innerHTML to html, or create the table some other way
}

如果服务器正确地提供 JSON，jQuery 会自动将其解析为您可以通过上述方式访问的 javascript 对象。

【讨论】：

感谢@Peter 的回答，但我在“response.data”上收到未定义的错误。当我尝试 console.log(response) 时，我得到了整个 json 数据，我能够通过点符号访问它。抱歉回复晚了，我的网络出现问题
我已经让它工作了，我只需要输入 dataType: json 然后我就可以使用点符号了，我也使用了你的代码及其工作。非常感谢您，祝您有美好的一天
很高兴能为您提供帮助。如果服务器使用正确的 MIME 类型 application/json 发送 JSON，jQuery 应该能够检测到这一点，并默认将响应解析为对象（或数组，在其他情况下）。由于您必须指定dataType，我猜服务器在响应时设置了错误的 MIME。

【解决方案2】：

使用datables插件，它是开源且易于使用的。

http://datatables.net/

【讨论】：

感谢您的链接 :) 我正在研究如何在我的代码中实现这一点。 :)