将JSON数据表数据以JSON格式发布到服务器 [英] Posting jquery datatable data to server in JSON format

问题描述

我知道这个问题已经在SO和datatables网站上被问过很多次了，但是我不能使用提供的解决方案来解决这个问题.

I know this question has been asked numerous times on SO and on the datatables site, but i cannot get it to work using the solutions provided.

我正在客户端上构建数据表，现在想将客户端数据以json格式发布到我的wep api控制器中.

I am building my datatable on the client side and now want to post the client data to my wep api controller in json format.

在添加/删除行方面，客户端工作正常. 但是当我尝试使用以下方法创建JSON时:

The client side is working correctly when it comes to adding/deleting rows. But when i try create my JSON using:

    var table = $('#detailTable').DataTable();
var details = JSON.stringify(table.rows().data().toArray());

我得到以下结果:

[["11046","ABC","bis","123","123",15129]]

所以基本上我在JSON对象中缺少列名，因此Web api无法拾取它并将其转换为:

so basically i am missing column names in my JSON object, thus the web api is failing to pick it up and convert it to:

List<ReceiptEntryViewModel> ReceiptDetails

那么我如何获取数据表以生成以下格式的JSON:

So how can i get the datatables to generate a JSON in the following format:

[["ItemId":"11046","ItemCode":"ABC","ItemName":"bis","Price":"123","Quantity":"123","Total":15129]]

推荐答案

如果您只想收集列名并将其用作JSON中的属性名，则可以通过以下方式构建列名数组:

If you just want to collect the column names and use them as property names in the JSON, then you can build an array of column names this way :

var fieldNames =  [], json = []
table.settings().columns()[0].forEach(function(index) {
  fieldNames.push($(table.column(index).header()).text())  
})

我正在使用text()过滤掉所有HTML.然后执行上述操作，但改为遍历每一行，并使用收集的fieldNames:

I am using text() to filter out any HTML. Then do as above but iterate over each row instead, and construct an object literal (JSON item) for each row using the collected fieldNames :

table.rows().data().toArray().forEach(function(row) {
  var item = {}
  row.forEach(function(content, index) {
     item[fieldNames[index]] = content
  })
  json.push(item)
})  

现在您有了一个有效的JSON，您可以stringify并将其发送到服务器.

Now you have a valid JSON you can stringify and send to the server.

小样本演示-> http://jsfiddle.net/5j9wgorj/

Small sample demo -> http://jsfiddle.net/5j9wgorj/

请注意，这仅是示例.如果您有更大的数据集，则应避免使用forEach，而应使用for -loops.同样，也不需要盲目地重建标题名称的数组，因为您(开发人员)既知道列名，又希望事先将属性命名为什么.

Note that this is just an example. If you have larger datasets you should avoid forEach and use for-loops instead. Also there should be no need for blindly rebuilding an array of header names since you, the developer, know both column names and what you want the properties to be named as beforehand.

使用最终的解决方案进行更新.如果dataTable本身已准备好使用JSON，则可以避免由于构建JSON而产生的扭曲.定义columns部分:

Update with the solution it ended up to be. The contortions with building a JSON can be avoided if the dataTable itself is prepared for using JSON. Define a columns section :

var table = $('#example').DataTable({
  columns : [
    {  data : 'myField' }
  ]
})

并以JSON/文字形式插入新行:

And insert new rows as JSON / literals :

table.row.add({ myField: 'some value' }).draw()

现在

JSON.stringify( table.rows().data().toArray() )

将返回可以传递到服务器脚本的有效JSON字符串.

Will return a valid JSON string that can be passed to the serverscript.

演示-> http://jsfiddle.net/d07f6uvf/

demo -> http://jsfiddle.net/d07f6uvf/

这篇关于将JSON数据表数据以JSON格式发布到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！