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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21261059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 08:53:52  来源:igfitidea点击:

Display JSON data into a table with pagination headers

jqueryajaxjsonlaravellaravel-4

提问by melvnberd

Good day!

再会!

How can I display my JSON Data into a table? this is the json data that im getting..

如何将我的 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":"[email protected]",
   "phone":"09063330756",
   "addressStreet":"999 Street",
   "addressCity":"999City",
   "addressProvince":"999Province",
   "addressPostalCode":2147483647,
   "status":null,
   "notes":"Supplier999"}]
}

for now Im just trying to figure out how to display my data into the table.. then after that I'll try to paginate it, by the way Im using an AJAX call.

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

here is my ajax code:

这是我的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>");
    }
});
}

I tried to:

我试过了:

console.log(response.data) = undefined

and

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

here is my laravel code:

这是我的 Laravel 代码:

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

Thanks in advance.

提前致谢。

回答by Peter Herdenborg

If you're going to do this manually, you need to do something like this:

如果您要手动执行此操作,则需要执行以下操作:

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
}

If the server serves the JSON properly, jQuery will automatically parse it to a javascript object that you can access in the above fashion.

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

回答by user3206210

Use the datables plugin, it's open source and easy to use.

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

http://datatables.net/

http://datatables.net/