Question

我已经为jQuery实现了Datatables插件。我使用columns.data选项在数据加载到表中之前对我的数据执行操作。

由于我在更新数据时遇到问题，因此我引用了columns.data选项文档，并注意到更新发生时，该示例将row参数设置为val（我认为会更新row参数，从而更新基础数据。但是，我发现这不是真的。

编辑：为了澄清，问题似乎是在我分配row = val时。在row时，val和type == 'set'都是对象。如果我单独分配每个属性（例如row.information = val.information），那么它可以工作。有没有理由我无法将对象重新分配给新对象？

下面是一个捕捉我想要做的事情的例子：

var initialData = [{ "information": "Google Link", "weblink": "http://www.google.com" }];

var newDataObj = { "information": "Yahoo Link", "weblink": "http://www.yahoo.com" };

$('#example').DataTable({
   "data": initialData,
   "columns": [
      { "data": "information" }, 
      { 
         "data": function(row, type, val, meta){
            if(type === 'set'){
            	row = val; //ASSIGNING AN OBJECT TO AN OBJECT
             	return;
             }
             
             data = '<a href="' + row.weblink + '">' + row.information + '</a>';
             
             return data;
         }
      } 
   ]
});

$('#update_link').on('click', function (){
	
	var table = $('#example').DataTable();
	table.cell(0,1).data(newDataObj).draw();
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
</head>
<body>
<table class="display" id="example">
    <thead>
        <tr>
            <th>Information</th>
            <th>Link</th>
        </tr>
    </thead>
</table>

<div>
  <button id="update_link">Update Link</button>
</div>
</body>
</html>

Answer 1

我想通过简单地将对象val分配给新对象columns.data不会更改传递给... row.information = val.information; row.weblink = val.weblink; ...函数的原始对象。我必须改为“更改参数的INTERNALS”，这些更改将传播回原始对象。更多信息可以在这里找到：

Is JavaScript a pass-by-reference or pass-by-value language?

原因是因为javascript中的对象实际上是通过值传递的，但是传递的值是一个引用（按值引用）。

分配每个内部参数可修复问题。

var initialData = [{ "information": "Google Link", "weblink": "http://www.google.com" }];

var newDataObj = { "information": "Yahoo Link", "weblink": "http://www.yahoo.com" };

$('#example').DataTable({
   "data": initialData,
   "columns": [
      { "data": "information" }, 
      { 
         "data": function(row, type, val, meta){
            if(type === 'set'){
            	row.information = val.information; //debugger;
                row.weblink = val.weblink;
             	return;
             }
             
             data = '<a href="' + row.weblink + '">' + row.information + '</a>';
             
             return data;
         }
      } 
   ]
});

$('#update_link').on('click', function (){
	
	var table = $('#example').DataTable();
	table.cell(0,1).data(newDataObj).draw();
});

所以看起来我并不完全理解call-by-sharing。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
</head>
<body>
<table class="display" id="example">
    <thead>
        <tr>
            <th>Information</th>
            <th>Link</th>
        </tr>
    </thead>
</table>

<div>
  <button id="update_link">Update Link</button>
</div>
</body>
</html>

var a = ['one','two'];
var b = ['three','four'];
var c = ['five'];
var d = ['six','seven','eight']; 

var myJsonString = JSON.stringify(a.concat(b,c,d));
console.log( myJsonString );

当更新单元格时，Datatables插件返回旧数据

1 个答案: