DataTables.net如何使用多个数据源?
DataTables.net how use multiple data source?
我用的是作词“http://datatables.net/”。
对于我的数据表,我使用 ajax 请求从服务器端获取数据。但是我有一个单元格 ("List Role") 的另一个数据源,它使用另一个 ajax 源。
如何为单元格 ("List Role") 使用此源以及如何为 "ListRole"?
的单元格显示“<selec...><option..>
”
我的代码示例:
<table id="gridrole" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nom</th>
<th>Login</th>
<th>Email</th>
<th>Role Current</th>
<th>List Role</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nom</th>
<th>Login</th>
<th>Email</th>
<th>Role Current</th>
<th>List Role</th>
</tr>
</tfoot>
</table>
$('#gridrole').dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/Role/ReadRole/",
"dataType": "json"
},
columns: [
{ "data": "UserName" },
{ "data": "Login" },
{ "data": "Email" },
{ "data": "RoleName" },
{
"data": "ListRole"
}
],
});
更新
示例列表角色:
[{"Id":"1","Name":"Admin"},{"Id":"2","Name":"Test"}]
我假设您的数据表初始化的其他方面运行良好,第一个数据源的项目看起来像
{
"UserName": "test",
"Login": "qwerty",
"Email": "b@test.com",
"RoleName": "Test",
"ListRole": 2
}
等等,listrole 数据源看起来像
[{"Id":"1","Name":"Admin"},{"Id":"2","Name":"Test"}]
等然后,我建议您只读取一次 listrole 数据源,并创建一个 jQuery 对象,其中包含一个 <select><option ..</select>
实例,其中包含 Id
和 Name
的 listrole :
var $select = $('<select></select>');
$.getJSON('listrole.json', function(json) {
for (var i=0;i<json.length;i++) {
$select.append('<option value="'+json[i].Id+'">'+json[i].Name+'</option>')
}
});
然后在 columns
return 中克隆了 $select
(或者实际上是它的 HTML),其中 <option>
对应于 ListRole
在第一个数据源中被选中:
columns: [
...
{ data: "ListRole",
render: function(data, type, row, meta) {
var $clone = $select.clone();
$clone.find('option[value="'+data+'"]').attr('selected', 'selected');
return $clone.wrap('<div></div>').parent().html();
}
}
]
已对上述内容进行了演示 -> http://plnkr.co/edit/JW15Iblkz6rVSod3YWXw?p=preview
我用的是作词“http://datatables.net/”。 对于我的数据表,我使用 ajax 请求从服务器端获取数据。但是我有一个单元格 ("List Role") 的另一个数据源,它使用另一个 ajax 源。
如何为单元格 ("List Role") 使用此源以及如何为 "ListRole"?
的单元格显示“<selec...><option..>
”
我的代码示例:
<table id="gridrole" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nom</th>
<th>Login</th>
<th>Email</th>
<th>Role Current</th>
<th>List Role</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nom</th>
<th>Login</th>
<th>Email</th>
<th>Role Current</th>
<th>List Role</th>
</tr>
</tfoot>
</table>
$('#gridrole').dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/Role/ReadRole/",
"dataType": "json"
},
columns: [
{ "data": "UserName" },
{ "data": "Login" },
{ "data": "Email" },
{ "data": "RoleName" },
{
"data": "ListRole"
}
],
});
更新
示例列表角色:
[{"Id":"1","Name":"Admin"},{"Id":"2","Name":"Test"}]
我假设您的数据表初始化的其他方面运行良好,第一个数据源的项目看起来像
{
"UserName": "test",
"Login": "qwerty",
"Email": "b@test.com",
"RoleName": "Test",
"ListRole": 2
}
等等,listrole 数据源看起来像
[{"Id":"1","Name":"Admin"},{"Id":"2","Name":"Test"}]
等然后,我建议您只读取一次 listrole 数据源,并创建一个 jQuery 对象,其中包含一个 <select><option ..</select>
实例,其中包含 Id
和 Name
的 listrole :
var $select = $('<select></select>');
$.getJSON('listrole.json', function(json) {
for (var i=0;i<json.length;i++) {
$select.append('<option value="'+json[i].Id+'">'+json[i].Name+'</option>')
}
});
然后在 columns
return 中克隆了 $select
(或者实际上是它的 HTML),其中 <option>
对应于 ListRole
在第一个数据源中被选中:
columns: [
...
{ data: "ListRole",
render: function(data, type, row, meta) {
var $clone = $select.clone();
$clone.find('option[value="'+data+'"]').attr('selected', 'selected');
return $clone.wrap('<div></div>').parent().html();
}
}
]
已对上述内容进行了演示 -> http://plnkr.co/edit/JW15Iblkz6rVSod3YWXw?p=preview