Jquery Datatable 与 asp.net 中的下拉列表和复选框

Question

我有一个场景，我需要一个 jquery 数据表来显示下拉列表和复选框，每行中都有一些正常的数据列。到目前为止有没有人这样做。

Answer 1

这个问题的答案很容易在谷歌上找到。

请务必阅读官方数据表文档，因为它确实是一个很好的文档，并且有很多我们需要的东西。

但是，下面是一个示例，它借助官方数据表文档并使用示例数据对其进行了一些更改。 （确实有更好的方法。但这应该可以帮助您作为如何将自定义 HTML 添加到数据表列的起点）

$(document).ready(function () {

	var serverData = [
		{
			"_id": "5aa7ab645a886bb5007f7fd9",
			"isActive": true,
			"age": 24,
			"name": "W W W",
			"friends": [
				{
					"id": 0,
					"name": "W friend1"
				},
				{
					"id": 1,
					"name": "W friend2"
				},
				{
					"id": 2,
					"name": "W friend3"
				}
			]
		},
		{
			"_id": "5aa7ab64bd53fc1fc9beb894",
			"isActive": false,
			"age": 28,
			"name": "N N N",
			"friends": [
				{
					"id": 0,
					"name": "N friend1"
				},
				{
					"id": 1,
					"name": "N  friend2"
				},
				{
					"id": 2,
					"name": "N friend3"
				}
			]
		}
	]
	var table = $('#example').DataTable({

		data: serverData,
		columns: [
			{ data: "name" },
			{ data: "age" },
			{ data: "isActive" },
			{ data: "friends" },
		],
		'columnDefs': [{
			'targets': 2,
			'render': function (data, type, full, meta) {
				let checked = ''
				if (data) {
					return '<input type="checkbox" checked / >';
				}
				else {
					return '<input type="checkbox"  / >';
				}
				return data;
			}
		},
		{
			'targets': 3,
			"render": function (data, type, full, meta) {
				var selectInitial = "<select>";
        var selectClosing = "</select>";
        var options = '';
				$.each(data, function (key, value) {
					options = options+"<option value="+value.id+">"+value.name+"</option>";
				});
				return selectInitial+options+selectClosing;
			}
		}
		],
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src='https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js'></script><link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.9/css/jquery.dataTables.css'>

<table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
                <th>isActive</th>
                <th>friends</th>
                 
            </tr>
        </thead>
    </table>