DataTables.net 如何使用多个数据源？答案

【问题标题】：DataTables.net how use multiple data source?DataTables.net 如何使用多个数据源？
【发布时间】：2015-05-27 09:44:19
【问题描述】：

我使用合成器“http://datatables.net/”。使用我的数据表，我使用 ajax 请求从服务器端获取数据。但我有一个单元格（“列表角色”）的另一个数据源，它使用另一个 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"}]

【问题讨论】：

“ListRole”的来源是怎样的？我感觉 ListRole 也包含在第一个数据中，而另一个数据源是选项列表？
@davidkonrad 我有一个例子可以在我的原始帖子中列出。 listRoles 不包含在第一个数据中。是的，其他数据是选项列表
我的错，完全忽略了它。

标签： jquery datatables jquery-datatables datatables-1.10

【解决方案1】：

我假设你的 dataTables 初始化的其他方面运行良好，第一个数据源的项目看起来像

{
  "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> 实例和 listrole Id's 和 Name's ：

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 中返回一个克隆的$select（或实际上是它的HTML），其中选择了与第一个数据源中ListRole 的值相对应的<option>：

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();
      }
   }
]

已经做了上面的demo -> http://plnkr.co/edit/JW15Iblkz6rVSod3YWXw?p=preview

【讨论】：